Intermediate level · Module 5: Debugging and Code Quality in JavaScript · Lesson 1 of 3
Debugging with DevTools
Use breakpoints, stepping, watches, conditional breakpoints and logpoints to find bugs quickly.
In this lesson you will
- Set breakpoints, step through code and inspect values
- Use conditional breakpoints and logpoints
Key concepts
breakpointstep over / into / outwatch and scopeconditional breakpoint and logpoint
The lesson
Debug with a hypothesis: decide what you expect a variable to be at a certain line, then pause there with a breakpoint and check. Step over, into and out of functions while watching values in the Scope panel.
Conditional breakpoints pause only when an expression is true, for example entry.price > 100000. Logpoints print a message without pausing and without editing your code.
For asynchronous code, the call stack shows the async chain that led to the current line. The Network tab and console errors often point to the cause before you open the debugger.
Step by step
- Reproduce a reported bug.
- Form a hypothesis and set a breakpoint to test it.
- Use a conditional breakpoint inside a loop.
- Replace a console.log with a logpoint.
Practice activity
Find the four seeded bugs from the practical activity and write one line of evidence for each.
Expected result: All four bugs are fixed, each with the DevTools evidence that revealed it.
Check your understanding
-
When is a conditional breakpoint useful?
Show answer
When a problem happens only for certain values, such as one item in a long loop.
-
What does a logpoint do?
Show answer
Prints a message when the line runs, without pausing or editing the code.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.