Browser developer tools overview in Intro to Computing - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary purpose of the Elements panel in browser developer tools?

The Elements panel in browser developer tools allows you to:

A Monitor network requests and responses during page load.

B View and edit the HTML and CSS of the current webpage in real-time.

C Debug JavaScript code by setting breakpoints and stepping through code.

D Analyze the performance and memory usage of the webpage.

💡 Hint

Think about which panel lets you see the structure and style of the webpage.

The Elements panel shows the webpage's HTML structure and CSS styles. It lets you inspect and modify them live, helping you understand how the page is built and styled.

❓ trace

intermediate

What will the Console panel display after running this JavaScript code snippet?

Consider the following JavaScript code run in the Console panel:

let count = 0;
for(let i = 0; i < 3; i++) {
  count += i;
}
console.log(count);

What is the output shown in the Console?

Intro to Computing

let count = 0;
for(let i = 0; i < 3; i++) {
  count += i;
}
console.log(count);

A 3

B Error

C 0

D 6

💡 Hint

Add the numbers 0 + 1 + 2 to find the total.

The loop adds 0, then 1, then 2 to count. So count = 0 + 1 + 2 = 3.

❓ identification

advanced

Which browser developer tool panel helps identify slow-loading resources?

You want to find which images or scripts take the longest to load on a webpage. Which panel should you use?

A Sources panel

B Performance panel

C Network panel

D Application panel

💡 Hint

Think about where you can see all files requested by the browser.

The Network panel lists all files the browser requests, showing their load times and sizes. This helps spot slow resources.

❓ Comparison

advanced

How do the Sources and Performance panels differ in browser developer tools?

Choose the option that best describes the difference between the Sources and Performance panels.

A Sources panel lets you view and debug code; Performance panel records and analyzes page speed and CPU usage.

B Sources panel displays cookies; Performance panel displays console logs.

C Sources panel shows network requests; Performance panel shows storage usage.

D Sources panel is for editing HTML/CSS; Performance panel is for debugging JavaScript.

💡 Hint

One panel is for code debugging, the other for speed analysis.

The Sources panel lets you view and debug JavaScript code by setting breakpoints. The Performance panel records how the page runs over time, showing CPU and rendering details.

🚀 Application

expert

You want to test how a webpage looks on a mobile device using browser developer tools. Which steps correctly describe how to do this?

Select the correct sequence of actions to simulate a mobile device view in browser developer tools.

A 2,1,3,4

B 1,2,4,3

C 1,3,2,4

D 1,2,3,4

💡 Hint

Start by opening dev tools, then enable device mode, then choose device, then reload.

First open dev tools, then toggle device toolbar to simulate devices, pick a device or size, and reload to apply changes.