How to Debug In the Browser

Debugging is the process of finding and fixing errors within a script. 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.

To sum up the process will be the following:

1. You open browser, press F12.
2. You go to Sources and on the left (1), choose the file .html or .js you want to analyze.
3. In section 2 you see the code of that file.
4. Part 3 is the debugging part, you can enter breakpoints (so that the code stops where you want and thus see where the error is): selecting the number of the line you want in section 2, or writing debugger in the code such that:

function hello(name) {

let phrase = `Hello, ${name}!`; debugger; // <-- the debugger stops here say(phrase);

}

--------------------------------------------------------------------------------------------------

More in depth detail:

The “Sources” panel

• 1. Open the example page in Chrome.
• 2. Turn on developer tools with F12 (Mac: Cmd+Opt+I).
• 3. 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.