Peeking into a chain without breaking it
Debugging means finding why code does something different from what you expected; DevTools lets you pause the running code with breakpoints or the debugger statement, step through it one line at a time, and watch every value, instead of guessing.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
This function should return the largest number, but largest([-5, -2, -9]) returns 0. Explain what a breakpoint would show and fix it: function largest(nums) { let max = 0; for (const n of nums) if (n > max) max = n; return max; }
Add a line to the second live example's loop that pauses the debugger only when item.price is a string, and fix the total so it prints Total: 135.
Explain it without notes
Describe a methodical way to debug a function that returns the wrong value.
What is the difference between step over, step into and step out?
What are conditional breakpoints and logpoints, and when would you use each?
When would you use the debugger statement instead of clicking a line number?
Preview
Console
Nothing logged yet.Expected console output
paid: [ { id: 1, total: 250, paid: true }, { id: 3, total: 400, paid: true } ]
over 100: [ { id: 1, total: 250, paid: true }, { id: 3, total: 400, paid: true } ]
ids: [ 1, 3 ]
Result: [ 1, 3 ]