How do I debug Chrome in Windows?

Before writing more complex code, let’s talk about debugging.

Debugging is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools – a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.

We’ll be using Chrome here, because it has enough features, most other browsers have a similar process.

The “Sources” panel

Your Chrome version may look a little bit different, but it still should be obvious what’s there.

• Open the example page in Chrome.
• Turn on developer tools with F12 [Mac: Cmd+Opt+I].
• Select the Sources panel.

Here’s what you should see if you are doing it for the first time:

The toggler button opens the tab with files.

Let’s click it and select hello.js in the tree view. Here’s what should show up:

The Sources panel has 3 parts:

1. The File Navigator pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
2. The Code Editor pane shows the source code.
3. The JavaScript Debugging pane is for debugging, we’ll explore it soon.

Now you could click the same toggler again to hide the resources list and give the code some space.

Console

If we press Esc, then a console opens below. We can type commands there and press Enter to execute.

After a statement is executed, its result is shown below.

For example, here 1+2 results in 3, while the function call hello["debugger"] returns nothing, so the result is undefined:

Breakpoints

Let’s examine what’s going on within the code of the example page. In hello.js, click at line number 4. Yes, right on the 4 digit, not on the code.

Congratulations! You’ve set a breakpoint. Please also click on the number for line 8.

It should look like this [blue is where you should click]:

A breakpoint is a point of code where the debugger will automatically pause the JavaScript execution.

While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.

We can always find a list of breakpoints in the right panel. That’s useful when we have many breakpoints in various files. It allows us to:

• Quickly jump to the breakpoint in the code [by clicking on it in the right panel].
• Temporarily disable the breakpoint by unchecking it.
• Remove the breakpoint by right-clicking and selecting Remove.
• …And so on.

Conditional breakpoints

Right click on the line number allows to create a conditional breakpoint. It only triggers when the given expression, that you should provide when you create it, is truthy.

That’s handy when we need to stop only for a certain variable value or for certain function parameters.

The command “debugger”

We can also pause the code by using the debugger command in it, like this:

function hello[name] {
  let phrase = `Hello, ${name}!`;

  debugger;  //  Run or enter Ctrl+Shift+D to switch to debug view. From the RUN AND DEBUG options, choose the Edge Chromium option for your host application, such as Outlook Desktop [Edge Chromium]. Select F5 or choose Run > Start Debugging from the menu to begin debugging.