Debugging in Chrome

Debugging is the process of finding and fixing the bugs in a script. Modern browsers and most other environments support debugging tools – a special UI in developer tools that makes the debugging much easier. These tools also allow tracking the code step by step to see what exactly is going on.

Let’s take an example using Chrome here as it has a lot of features and most other browsers have a similar process.

The “Sources” panel

Your Chrome version may be a 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.

The toggler button opens the tab with files.

Click on it and select your file in the tree view.

The Sources panel has 3 parts:

1. The File Navigator lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear too.

2. The Code Editor shows the source code.

3. The JavaScript Debugging pane is for debugging.

Now we will click on the same toggler once more to hide the resources list and give the code some more space.

Console

If you press Esc, then a console opens below. We can type commands in the console and press Enter to execute.

After the statements are executed, its result is shown below.

For eg., here 1+2 results in 3, and 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. On the right 4 digit, not on the code.

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

It should look blue where you should click

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

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

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

1. Now jump to the breakpoint in the code (by clicking on it in the right panel).

2. Temporarily disable the breakpoint by unchecking it.

3. Remove the breakpoint by right-clicking and selecting Remove.

…And so on.

Debugger command

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

function hello(name) {

let phrase = `Hello, ${name}!`;

debugger; // <-- the debugger stops here

say(phrase);

}

That’s very convenient when we are in a code editor and don’t want to switch to the browser and look up the script in developer tools to set the breakpoint.

Coding is never quite complete without debugging. We are an ERP Development company with expertise in developing customized software solutions for our clients. Our custom development services enable businesses to automate, plan, collaborate, and execute their operations methodically.