Browser developer tools overview in Intro to Computing - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to open the developer tools in most browsers using a keyboard shortcut.

Intro to Computing

Press [1] + Shift + I to open developer tools.

Drag options to blanks, or click blank then click option'

AAlt

BCtrl

CTab

DEsc

Attempts:

3 left

💡 Hint

Common Mistakes

Using Alt instead of Ctrl

Using Esc key which closes dialogs

Using Tab which moves focus

Most browsers open developer tools with Ctrl + Shift + I (Cmd + Option + I on Mac).

2fill in blank

medium

Complete the code to select the tab in developer tools that shows the HTML structure of the page.

Intro to Computing

Click the [1] tab to view and edit the HTML elements.

Drag options to blanks, or click blank then click option'

ASources

BConsole

CElements

DNetwork

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing Console which shows logs and JavaScript

Choosing Network which shows resource loading

Choosing Sources which shows code files

The Elements tab shows the HTML structure and lets you inspect or edit elements.

3fill in blank

hard

Fix the error in the statement about the Console tab in developer tools.

Intro to Computing

The Console tab is used to [1] errors and run JavaScript commands.

Drag options to blanks, or click blank then click option'

Alog

Bview

Cdelete

Dedit

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing edit which is for Elements tab

Choosing delete which is not a console function

Choosing view which is too general

The Console tab logs errors and allows running JavaScript commands interactively.

4fill in blank

hard

Fill both blanks to create a CSS rule in the Styles tab that changes text color to blue.

Intro to Computing

p { color: [1]; [2] }

Drag options to blanks, or click blank then click option'

Ablue

Bfont-size: 16px;

Cbackground-color: yellow;

Dmargin: 10px;

Attempts:

3 left

💡 Hint

Common Mistakes

Using background-color instead of color

Using margin which affects spacing

Leaving second blank empty

The color property sets text color. Adding font-size changes text size.

5fill in blank

hard

Fill all three blanks to write a JavaScript command in the Console tab that logs 'Hello World'.

Intro to Computing

console.[1]('[2] [3]');

Drag options to blanks, or click blank then click option'

Alog

BHello

CWorld

Dprint

Attempts:

3 left

💡 Hint

Common Mistakes

Using print which is not a console method

Swapping Hello and World order

Using alert instead of console.log

console.log() prints messages to the Console. The message is 'Hello World'.

Practice

1. What is the main purpose of browser developer tools?

easy

A. To browse social media faster

B. To download files from the internet

C. To explore and fix websites easily

D. To play online games

Solution

1. Step 1: Understand the role of developer tools

   Browser developer tools help users inspect and debug websites.

2. Step 2: Compare options with this role

   Only To explore and fix websites easily describes exploring and fixing websites, which matches the purpose.

3. Final Answer:

   To explore and fix websites easily -> Option C

4. Quick Check:

   Developer tools = Explore and fix websites [OK]

Hint: Developer tools help fix and explore websites [OK]

Common Mistakes:

• Confusing developer tools with browsing speed
• Thinking developer tools download files
• Assuming developer tools are for gaming

2. Which keyboard shortcut opens the browser developer tools in most browsers?

easy

A. Ctrl + S

B. F12

C. Alt + F4

D. Ctrl + P

Solution

1. Step 1: Recall common shortcut for developer tools

   Pressing F12 is the standard shortcut to open developer tools in most browsers.

2. Step 2: Eliminate unrelated shortcuts

   Ctrl + S saves files, Alt + F4 closes windows, Ctrl + P prints pages, so they are incorrect.

3. Final Answer:

   F12 -> Option B

4. Quick Check:

   F12 = Open developer tools [OK]

Hint: F12 opens developer tools in most browsers [OK]

Common Mistakes:

• Confusing save shortcut with developer tools
• Using print or close shortcuts incorrectly
• Not knowing the F12 key purpose

3. Which developer tools tab would you use to see all files loaded by a webpage and their loading times?

medium

A. Network

B. Console

C. Elements

D. Sources

Solution

1. Step 1: Identify the purpose of each tab

   Elements shows HTML structure, Console shows messages/errors, Network shows files and loading times, Sources shows code files.

2. Step 2: Match the tab to the question

   Since the question asks about files loaded and loading times, Network tab is the correct choice.

3. Final Answer:

   Network -> Option A

4. Quick Check:

   Files and loading times = Network tab [OK]

Hint: Network tab shows files and loading times [OK]

Common Mistakes:

• Choosing Elements for file info
• Using Console for network data
• Confusing Sources with Network tab

4. You right-click on a webpage and select 'Inspect', but the developer tools do not open. What is the most likely reason?

medium

A. Developer tools are disabled or blocked by browser settings

B. You clicked on an image instead of the page

C. You need to restart the computer first

D. The browser does not support developer tools

Solution

1. Step 1: Understand common causes for developer tools not opening

   Developer tools can be disabled or blocked by browser settings or extensions.

2. Step 2: Evaluate other options

   Most modern browsers support developer tools, clicking on an image still opens tools, restarting computer is unnecessary.

3. Final Answer:

   Developer tools are disabled or blocked by browser settings -> Option A

4. Quick Check:

   Blocked settings = Tools not opening [OK]

Hint: Check browser settings if tools don't open after Inspect [OK]

Common Mistakes:

• Assuming browser lacks developer tools
• Thinking right-click target matters
• Restarting computer unnecessarily

5. You want to check why a button on a webpage does not respond when clicked. Which sequence of developer tools tabs should you check to find the problem?

hard

A. Console to write new code, Elements to reload page, Network to clear cache

B. Network to see files, Sources to edit code, Elements to change styles

C. Sources to view images, Console to change HTML, Elements to debug scripts

D. Elements to check button HTML, Console for errors, Network for related requests

Solution

1. Step 1: Identify tabs useful for button debugging

   Elements tab lets you inspect the button's HTML structure, Console shows errors or warnings, Network shows if any requests triggered by the button fail.

2. Step 2: Evaluate the sequences

   Elements to check button HTML, Console for errors, Network for related requests correctly lists Elements, Console, and Network in logical order for debugging a non-responsive button. Other options mix unrelated tasks or incorrect uses.

3. Final Answer:

   Elements to check button HTML, Console for errors, Network for related requests -> Option D

4. Quick Check:

   Button debug = Elements + Console + Network [OK]

Hint: Check Elements, Console, then Network for button issues [OK]

Common Mistakes:

• Mixing tab purposes
• Trying to write code in Console for this issue
• Ignoring Network tab for request failures