Install Self-Hosted
Get Started on Cloud

Debug JavaScript in Chrome with DevTools

Image loading...Cover image - Chrome DevTools

In this article, you'll learn how to use Chrome DevTools to debug JavaScript code in an efficient manner.

What are Chrome DevTools?

Chrome DevTools is a built-in set of web developer tools in every version of Google Chrome. The JavaScript debugger in Chrome lets you set breakpoints, step through code, and debug JavaScript directly in the browser - no extra extensions needed.

Chrome DevTools panel overview

The DevTools consist of 8 main panels:

  1. Elements: View the DOM tree and manipulate HTML/CSS and style attributes
  2. Console: View and debug your JavaScript code
  3. Performance: Analyze and optimize the speed of web page or application
  4. Sources: Debug JavaScript code for syntax errors, set breakpoints, call stack, and inspect variables
  5. Network: Monitor network, view HTTP requests, and simulate different network conditions
  6. Application: Inspect localStorage, sessionStorage, cookies, IndexDB, and modify storage data
  7. Memory: Track memory usage, garbage collection, and memory leaks, and fix related issues
  8. Security: View SSL certificate details and insecure content warnings
  9. Lighthouse: Audit your app for performance, accessibility, and SEO

Image loading...Chrome DevTools sources panels

Info
In this article we'll focus mostly on the Sources panel, where majority of debugging takes place.

DevTools panel keyboard shortcuts

To open the DevTools Elements panel, press:

  • MacOS: Command + Option + C
  • Linux/Windows: CTRL + SHIFT + C

To open the DevTools Console panel, press:

  • MacOS: Command + Option + J
  • Linux/Windows: CTRL + SHIFT + J

How to Open and View JavaScript in Chrome (Sources Panel)

Before setting breakpoints, you need to navigate to your script. Here's how to open and view JavaScript source code in Chrome:

  1. Open DevTools with F12 (Windows/Linux) or Cmd+Opt+I (Mac)
  2. Click the Sources tab in the top menu bar
  3. In the left Page panel, expand the domain tree to find your .js files
  4. Click any file to open it in the center editor panel
  5. To quickly find a file by name, press Cmd+P / Ctrl+P and type part of the filename
  6. To search for a specific string across all loaded scripts, press Cmd+Shift+F / Ctrl+Shift+F
Info
The Sources panel shows all scripts loaded by the page — including vendor bundles and browser extensions. Use the search shortcuts above to quickly filter to your own code.

How to Debug JavaScript in Chrome with DevTools

The DevTools are basically bread and butter of every developer and don't require much description, so let's get down to some useful strategies that will let you debug your code more efficiently.

How to debug JavaScript in Chrome — quick overview:

  1. Open Chrome DevTools with F12 (or Cmd+Opt+I on Mac)
  2. Click the Sources tab to access the JavaScript debugger
  3. Navigate the file tree on the left to find your script
  4. Click a line number to set a breakpoint
  5. Reload the page — execution will pause at your breakpoint
  6. Inspect variables in the Scope panel and step through code with F10/F11
  7. Use the Console tab to evaluate expressions at the paused state

1. Add breakpoints

Breakpoints are a powerful debugging feature because they pause code execution, so you can inspect line by line and choose to resume once you're ready. This is especially useful for large source code bases or when it is hard to pinpoint the source of the bug.

Adding a breakpoint

In this example, let's add a line-of-code breakpoint.

  1. Open DevTools and switch to the Sources panel.

  2. In the Page window, select the .js file in which you want to add the breakpoint. The file source code will appear in the middle code editor panel:

Image loading...Selecting the JavaScript file

  1. Right-click the desired line in the gutter and select 'Add Breakpoint':

Image loading...Adding a breakpoint

  1. Run the function now. In my case, it pauses right before executing the POST request, plus I can see the posted data:

Image loading...Running the function

  1. Once you confirm that everything is in order, click the resume button to continue script execution.

Image loading...Resuming script execution

Success
Inspecting the code once it's been paused in a specific place is a much more productive than running console.log(data) and reloading the page over and over again.
Tip
You can check the list of available conditional breakpoint types and how to add them in the Chrome documentation. Image loading...Types of breakpoints

Chrome Debugger: Conditional Breakpoints and Watch Expressions

Standard breakpoints pause on every execution. For loops or event handlers that fire hundreds of times, conditional breakpoints let you pause only when a specific condition is true.

Adding a conditional breakpoint:

  1. Right-click the line number in the gutter
  2. Select Add conditional breakpoint
  3. Type a JavaScript expression, e.g. count > 10 or user.id === 42
  4. Press Enter — the breakpoint marker turns orange

The debugger will only pause when the expression evaluates to true, saving you from stepping through irrelevant iterations.

Logpoints work similarly but log a value to the Console instead of pausing — select Add logpoint and type "count is:", count. No console.log in your source code needed.

Watch expressions let you monitor any variable or expression across all pause events:

  1. In the right Watch panel, click +
  2. Type any valid JS expression, e.g. response.data.length
  3. Its value updates automatically each time the debugger pauses
Tip
Combine a conditional breakpoint with watch expressions to drill into complex bugs: pause only when the edge case occurs, then inspect the full state in Watch without cluttering the Scope panel.

2. View and edit local, closure and global properties

While the app is paused, you can view and edit the local, closure and global properties. Let's assume there's a bug that does not return the correct value for a variable, so you want to check its value at a certain point in the current function.

Once we add the breakpoint, we can expand the 'Scope' panel in the right column of the dev tools and view the variable value. If you want to test the function with other values, you can double-click on the variables to edit.

Image loading...scope panel

Tip
The scope panel provides one of the most useful information when it comes to debugging JavaScript.

3. Create, save and run snippets

Another efficient strategy is employing snippets. Snippets allow you to easily execute and reuse scripts in any part of your app via the Google's developer tools.

  1. You can add a snippet by switching to the Snippets tab in the left column.

Image loading...Adding a new snippet

With the tab open, click +New Snippet and write your code in the middle panel as shown in the image below:

Image loading...New snippet overview

Tip
You can save your snippet with CMD+S / CTRL+S at any time.

The snippet can be executed in two ways:

  1. Right-click on the snippet and click 'Run'.
  2. Press CMD + Enter or CTRL + Enter.

Image loading...Running a snippet

4. View call stack

When debugging the error, you may want to track the changes to the call stack. To display the functions in the stack, switch to the Sources panel and click the Call Stack line to expand it.

Image loading...Call stack panel

Tip
This feature is especially useful if you use a lot of asynchronous functions.

5. Blackbox Scripts in Chrome DevTools

When debugging, you probably want to exclude some scripts from running, such as third-party libraries, or scripts that you know are unrelated to the error.

Instead of commenting them out in your source code line by line, you can blackbox them on DevTools. To do so, click on the script file you want to ignore in the left panel on the Sources tab. Then, right-click on the middle panel and select 'Add script to ignore list':

Image loading...Blackboxing a script

From now on, the script will no longer run, which helps narrow down and eliminate the cause of the error or bug.

From Debugging to Prevention: Write Unit Tests After Fixing a Bug

Finding a bug with DevTools is only half the job. Without a test that reproduces the failure, the same bug can reappear silently in a future commit — especially in a CI/CD pipeline where no one is watching the browser.

The workflow looks like this:

  1. Reproduce the bug using a breakpoint in Chrome DevTools
  2. Identify the exact input/state that triggers the wrong behavior (use the Scope panel and Watch expressions)
  3. Fix the logic in your source code
  4. Write a unit test that covers this specific case — the test should fail before your fix and pass after

For example, if you found that a function returns undefined when user.role is missing, your test might be:

js
it('returns guest permissions when role is undefined', () => {
  expect(getPermissions({ id: 1 })).toEqual(GUEST_PERMISSIONS);
});

This way, any future regression is caught in CI before it reaches the browser. If you're building with React, Testing React Applications with React Testing Library is a solid next step — it covers component-level tests that complement the debugging workflow above.

To automate these tests on every push, set up a test suite in Buddy and configure a pipeline step to collect results — your test suite runs automatically on each commit, and you get notified before a bug ships.

Conclusion

The possibilities that Chrome DevTools allow for are basically endless. I highly recommend exploring the provided links in the Resources section below to delve further into these features. Once you become proficient with the toolset, you will enhance your debugging skills and leave behind the days of relying on the console.log() grind.

Thank you for taking your time to read this tutorial. If you found the article helpful, please consider sharing it. Cheers!

Additional resources

Read similar articles
Building a Web App with Angular and BootstrapLet's play bingo with JavaScript!
Jan 2, 2024
Share