Practice & Assessment
Test your understanding of Using Debuggers and Dev Tools
Multiple Choice Questions
5You are paused at a breakpoint inside a loop that runs 10,000 times. The bug only occurs at iteration 9,500. What is the most efficient action?
You step into a function and realize immediately it is not related to the bug. What should you do?
A fetch request returns status 200 but the UI is showing wrong data. Where should you look first?
What does enabling async stack traces in Chrome DevTools add to the call stack panel?
You see a CORS error in the console. Where is the fix applied?
Coding Challenges
1Debug a Broken Async Function Using the Debugger
A provided JavaScript function uses fetch and async/await to retrieve user data and process it, but returns incorrect results. Using only the browser debugger (no console.log changes allowed): set a breakpoint inside the async function, inspect the response payload in both the Network panel and via watch expressions, identify the exact line where data diverges from expected, and write a one-paragraph bug report describing fault, propagation, and fix. Input: provided HTML/JS file with embedded broken async function. Output: written bug report plus corrected function. Time estimate: 25 minutes.
Mini Project
Debugger Walkthrough Script
Write a step-by-step walkthrough script for debugging a provided broken to-do list application using Chrome DevTools. The script must cover: setting breakpoints on the add-item and delete-item functions, using conditional breakpoints to find a specific failing item, using watch expressions to monitor array state, reading a failing network request in the Network panel, and identifying one async call stack trace. Format it as numbered steps a developer could follow live at their browser.