---
title: "A Beginner’s Guide to JavaScript Debugging in Chrome | CoderPad"
description: "A brief beginner's guide to debugging your front-end JavaScript in Chrome."
canonical: "https://coderpad.io/blog/development/javascript-debugging-in-chrome/"
last_modified: "2023-06-05 14:29:03"
---
[Back to blog](https://coderpad.io/blog/)

# A Beginner’s Guide to JavaScript Debugging in Chrome

March 23, 2022 5 Minute Read

By Ken Swearengen

[Development](https://coderpad.io/blog/development/)![Header image](https://coderpad.io/wp-content/uploads/2022/03/Debugging-Frontend-Code-in-Chrome.png)

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.

## Learn how to run front-end developer interviews that don’t suck

[Read our guide](https://coderpad.io/blog/interviewing/5-tips-for-interviewing-frontend/)

## How to access the debugger in Chrome

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

1. Right-click on the browser page you’d like to debug and select Inspect.
2. Navigate to the browser menu, scroll down to More tools, and click on Developer tools.
3. 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.](https://coderpad.io/wp-content/uploads/2022/03/debugnav.png) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugsourcespanel-1024x512.png) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugbreakpoints-1024x500.png) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugdisablebreakpoint-1024x576.gif) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugdeactbreakpoints.png) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugactiontoolbar.png) Debugging breakpoint toolbar
1. Resume script execution: Continue to execute the code until the next breakpoint is hit
2. Step over next function call: Skip over function calls and move to the next line of code.
3. Step into next function call: Move into the next function call.
4. Step out of current function: Move out of the current function into the caller’s logic
5. Step: Move to the next piece of code.
6. Deactivate breakpoints: Self-explanatory
7. Pause on exceptions: Stop when an error is thrown

### Conditional breakpoints and watching data

You can set [boolean conditions that trigger breakpoints](https://developers.google.com/web/updates/2015/07/set-a-breakpoint-based-on-a-certain-condition#:~:text=When%20you%20set%20a%20breakpoint,Breakpoint%20and%20enter%20your%20expression.&text=You%20could%20set%20a%20conditional%20breakpoint%20based%20on%20the%20existence%20of%20err%20.) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugeditbreakpoint.png) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugconditional.png) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugwatch.png) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugworkspacesetup-1024x547.png) 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.](https://coderpad.io/wp-content/uploads/2022/03/debugworkspace.png) 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](https://developer.chrome.com/docs/devtools/workspaces/?utm_source=devtools#css) 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](https://developer.chrome.com/docs/devtools/javascript/).

## Subscribe for more CoderPad insights

## Trending Articles

Previous slide Next slide [Development

## What is Prompt Engineering?

Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.

Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development

## A Guide To Using React’s useCallback() Hook

Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.

Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development

## MySQL vs. PostgreSQL: How Do They Compare?

A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.

Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development

## PostgreSQL LIKE Operator: A Detailed Guide

When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.

Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development

## How To Use DataProvider In TestNG With Examples

When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.

Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development

## How To Get Up And Running With Django Migrations: A Guide

Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.

Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development

## Writing A Parameterized Test In JUnit With Examples

A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.

Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development

## How To Use Assert In JUnit With Examples

The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.

Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development

## A Simple Guide To TypeORM: What It Is And How To Use It

Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.

Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development

## Using PreparedStatement in JDBC With Examples

In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.

Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development

## React vs React Native: The Differences Explained

React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.

Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development

## Logging in Django

The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.

Read the post](https://coderpad.io/blog/development/logging-in-django/)

## Hire with confidence.

See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.

[Request a demo](https://coderpad.io/sales/)