A Beginner’s Guide to JavaScript Debugging in Chrome

March 23, 2022 • Development

By Ken Swearengen

Did you know your web browser can do more than allow you to doom scroll 24-hour news services, find all your dev questions answered on StackOverflow, and discover hilarious pictures of cats?

It also works as an excellent tool for debugging your front-end JavaScript.

No longer will you have to rely on adding and deleting hundreds of console.log(“this is another debugging message”); to see what your code is doing. Instead, you can leverage tools like Chrome’s DevTools to see what your JavaScript is doing in real-time as you move around the screen. You can set breakpoints, view console logs, check variable values, and more.

We’re now going to walk you through the basics of running the debugging tool in your browser. We highly recommend completing the steps yourself as you run through them to get the most out of this guide.

How to access the debugger in Chrome

Accessing the debugger in Chrome is simple, and there are a few ways to do it:

Right-click on the browser page you’d like to debug and select Inspect.
Navigate to the browser menu, scroll down to More tools, and click on Developer tools.
Use the keyboard shortcuts – Ctrl Shift J in Windows or Ctrl Option J in iOS.

Left is accessing the debugger through the Inspect element, Right is doing the same using the Developer tools element. — Left is accessing the debugger through the *Inspect* element, Right is doing the same using the *Developer tools* element.

How to use the Sources tab

The Sources tab is where you view your source code/bundle output. It is the main panel you use for debugging. Here you can view your source files to set up your breakpoints, watch variables, and do the majority of your debugging. You can navigate through the file tree by clicking on the arrows in the file tree itself.

Layout of the debugger, with the file tree and bundle output/source code highlighted. — Layout of the debugger.

Breakpoints and debugging

Breakpoints allow you to pause the processing of your application to dive deeper into its current state. When the application is paused you can check the values of variables to see if they’re correct, you can dive into function calls to see that the appropriate logic is applied and that appropriate responses are returned.

Add breakpoints by using either the debugger keyword which will pause the code at that point, or alternatively you can click on the line number at the piece of code where you want to establish the breakpoint.

Two screenshots side-by-side. On the left: setting breakpoint with the debugger keyword. On the right: setting breakpoint by clicking on the line number. — Left: Using the `debugger` keyword. Right: Using breakpoints.

You can disable the breakpoint either by removing the debugger keyword or by clicking on the breakpoint you’d like to remove.

Image of gif that shows how you can add and remove breakpoints by clicking on a line number. — You can add and remove breakpoints by clicking on a line number.

Alternatively, you can disable ALL breakpoints using this button in the top right corner.

Location of the Deactivate breakpoints button is below the close button but above the debugger panel itself. — Location of the **Deactivate breakpoints**.

Using the breakpoint toolbar

The breakpoint toolbar is the main way you’ll move through your code while you’re debugging your code. When the debugger pauses on a breakpoint that you have established, the toolbar will become available to you with the following actions:

Debugging breakpoint toolbar with numbers labeling different functions. — Debugging breakpoint toolbar

Resume script execution: Continue to execute the code until the next breakpoint is hit
Step over next function call: Skip over function calls and move to the next line of code.
Step into next function call: Move into the next function call.
Step out of current function: Move out of the current function into the caller’s logic
Step: Move to the next piece of code.
Deactivate breakpoints: Self-explanatory
Pause on exceptions: Stop when an error is thrown

Conditional breakpoints and watching data

You can set boolean conditions that trigger breakpoints when they evaluate to True during the debugging process.
To do this, right-click on the breakpoint and select Edit breakpoint.

Image of the "Edit breakpoint" menu obtained by right clicking on a breakpoint in the sources panel. — Edit breakpoint location

You’ll then see a box where you can enter the boolean condition to be evaluated.

Image of the conditional breakpoint box with "count.valueOf(0)" written in it. — Conditional breakpoint statement box

When inside the breakpoint you can also watch data to immediately see the results of a variable changing without writing a console.log() statement. Simply press the+ button in the Watch section and type the name of a variable.

Image of the debugging screen paused on a break point. Arrows point to where you can enter a variable to watch and to where you can see the variable value on the source code panel. — An example of the **Watch** function. In this case we’re watching the variable x and also adding another variable to watch.

Editing source code with Workspaces

Setting up a Workspace allows you to edit the source code from within the debugging tool in the browser. This way you don’t have to move between your regular IDE/text editor and the Chrome debugger everytime you want to make a change in the code to test or fix a bug.

To open up a workspace:

1) Click on the Filesystem tab on the left side of the debugger

2) Click on + Add folder to workspace

3) Select the source code you want to load into the workspace.

Image of how to add a workspace in Chrome. First, select “Filesystems”, then “Add folder to workspace”, and then select the folder you want to add. — Adding a workspace.

Once you select the folder and grant file access to the debugger, you’ll see all your source code with colored icons representing the different file types. Any changes you make in the code in the debugger window will be reflected in the source file once you save it using Ctrl S for Windows or Command S for Mac.

Image of a workspace with the file tree highlighted. — A workspace setup with editable files.

You can edit the HTML and CSS files directly in the workspace; however, if you want the benefit of doing it with the UI help of the Elements tab, there is an excellent article on the Chrome Developers page on how to do just that.

Congratulations, you should now be able to do some basic debugging on your JavaScript application, including setting up breakpoints to inspect your code during runtime and setting up workspaces so you can edit your code directly from your browser! If you want more info on all the fantastic things the Chrome debugger can do, check out their documentation here.