Challenge - 5 Problems
Browser Developer Tools Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate2:00remaining
What is the primary purpose of the Elements panel in browser developer tools?
The Elements panel in browser developer tools allows you to:
Attempts:
2 left
💡 Hint
Think about which panel lets you see the structure and style of the webpage.
✗ Incorrect
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
intermediate2:00remaining
What will the Console panel display after running this JavaScript code snippet?
Consider the following JavaScript code run in the Console panel:
What is the output shown in the Console?
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);
Attempts:
2 left
💡 Hint
Add the numbers 0 + 1 + 2 to find the total.
✗ Incorrect
The loop adds 0, then 1, then 2 to count. So count = 0 + 1 + 2 = 3.
❓ identification
advanced2:00remaining
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?
Attempts:
2 left
💡 Hint
Think about where you can see all files requested by the browser.
✗ Incorrect
The Network panel lists all files the browser requests, showing their load times and sizes. This helps spot slow resources.
❓ Comparison
advanced2:00remaining
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.
Attempts:
2 left
💡 Hint
One panel is for code debugging, the other for speed analysis.
✗ Incorrect
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
expert3:00remaining
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.
Attempts:
2 left
💡 Hint
Start by opening dev tools, then enable device mode, then choose device, then reload.
✗ Incorrect
First open dev tools, then toggle device toolbar to simulate devices, pick a device or size, and reload to apply changes.