Master JavaScript Debugging: Step-by-Step Guide Using Chrome DevTools

This tutorial shows how to debug a specific JavaScript bug using Chrome DevTools, teaching techniques that apply to future debugging tasks.

Step 1: Reproduce the Error

Open the provided demo page in a new tab, enter 5 in "Number 1" and 1 in "Number 2", then click "Add Number 1 and Number 2". The label shows 5 + 1 = 51, which is incorrect; the expected result is 6.

Step 2: Pause Code with a Breakpoint

Open DevTools (⌘+Option+I on Mac or Ctrl+Shift+I on Windows/Linux), go to the Sources panel, expand Event Listener Breakpoints , select the click event. This sets an event‑based breakpoint that pauses execution whenever a click handler runs.

Step 3: Step to the Next Line

In the Sources panel, click the Step into next function call button to step into onClick(). DevTools highlights the line: function onClick() { Then click Step over next function call to execute inputsAreEmpty() without entering it, demonstrating how the if block is skipped because the function returns false.

Step 4: Set an Additional Line Breakpoint

Locate the last line of updateLabel():

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

Click the line number (32) to add a line breakpoint. When execution reaches this line, DevTools pauses, allowing you to inspect the values of addend1, addend2, and sum.

Step 5: Inspect Variable Values

Instead of many console.log() calls, use a Watch expression. In the Sources panel, click Watch , then Add Expression and enter typeof sum. The Watch panel shows "string", indicating that sum is a string rather than a number.

You can also use the console directly: open the console drawer (Esc), then type parseInt(addend1) + parseInt(addend2) and press Enter. The console prints 6, the expected result.

Step 6: Fix the Bug

While paused, edit the code in the Sources panel: replace the line var sum = addend1 + addend2; with

var sum = parseInt(addend1) + parseInt(addend2);

Save the change (⌘+S or Ctrl+S). Deactivate breakpoints, then click Resume script execution . The calculator now correctly displays 5 + 1 = 6.

These steps illustrate how to use Chrome DevTools to reproduce, pause, step through, inspect, and fix JavaScript bugs without leaving the browser.