Debugging is an essential part of developing with JavaScript, and modern browsers provide powerful tools to help track down bugs and fix issues efficiently. Here's how to make the most of the debugging features available in browser DevTools (usually opened with F12 or Right Click → Inspect → Console/Debugger).
You can insert the
debugger
statement directly into your JavaScript code. When the browser executes this line, it will pause script
execution and open the Sources (Debugger) tab automatically. While paused, you can inspect variables, step
through code line by line, and observe the state of your application at that exact point.
function calculateTotal(a, b) {
let total = a + b;
debugger; // Execution pauses here
return total;
}
You can also use breakpoints in your code. These are a way to manually tell the browser, "pause here."
- Open the Sources panel in DevTools.
- Locate your script in the left-hand file tree.
- Click on the line number where you want the execution to pause.
- A blue marker will appear, indicating the breakpoint.
When code execution reaches that line, it will pause just like it would with the
debugger keyword. Once the execution is paused, you have several control
options:
- Step over (F10): Executes the current line and moves to the next one without going into function calls.
- Step into (F11): If the current line contains a function, it enters into that function to debug inside it.
- Step out (Shift+F11): If you're inside a function, this finishes it and returns to the parent scope.
- Resume (F8): Continues execution until the next breakpoint or debugger.