Learn How To Debug JavaScript with Chrome DevTools

Ditch console.log debugging once and for all! Learn how to use breakpoints to debug code within the Chrome Developer Tools

As a new developer, finding and fixing bugs can be difficult. You may be tempted to randomly use console.log() in an attempt to get your code working correctly. Not Anymore!

This article is all about debugging the correct way! You’ll learn how to use the Chrome Developer Tools to set up breakpoints and step through your code. This workflow is often a much more efficient way to find and fix bugs in your code.

This tutorial shows you how to debug one specific issue, but the general workflow you learn is helpful for debugging all types of JavaScript bugs.

Step 1: Reproduce the bug

Reproducing the bug is always the first step to debugging. To “reproduce the bug” means to find a series of actions that consistently causes the bug to appear. You may need to reproduce the bug many times, so try to eliminate any unnecessary steps.

Follow along with the instructions below to reproduce the bug that you’re going to fix in this tutorial.

Here is the webpage we’ll be working with in this tutorial. Make sure to open this page in a new tab: OPEN DEMO .

. In the demo, enter 5 for Number 1 .

for . Enter 1 for Number 2 .

for . Click Add Number 1 and Number 2 .

. Look at the label below the inputs and button. It says 5 + 1 = 51 .

Whoops. That result is wrong. The result should be 6 . This is the bug that you're going to fix.

Step 2: Pause the code with a breakpoint

DevTools lets you pause your code in the middle of its execution, and examine the values of all variables at that moment in time. The tool for pausing your code is called a breakpoint. Try it now: