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'.