You may not know how to debug JavaScript code for Chrome

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

Debugging is the process of finding and fixing errors in a script. All modern browsers and most other environments support debugging tools, a special user interface within the developer tools that makes debugging easier. It also allows us to trace the code step by step to see what’s actually going on.

We’re going to use Chrome here, because it has enough features, and most other browsers have similar features.

“Resources” panel

Your Chrome version may look a little different, but it should still be in the right place.

• Open the sample page in Chrome.
• Use shortcut keysF12(Mac:Cmd+Opt+IOpen the developer tools.
• chooseSources (resources)Panel.

If you’re doing this for the first time, you should see something like this:

The toggle button opens a TAB for the list of files.

Let’s click and select Hello.js in the preview tree. It should look something like this:

Here we can see three areas:

1. The Resources Zone lists HTML, JavaScript, CSS, and other files, including images, that are attached to the page. Chrome extensions will also show up here.
2. The Source Zone displays the source code.
3. The Information and Control Zone is for debugging, and we’ll explore it shortly.

Now you can hit the Toggle button again to hide the resource list to make some room for your code.

Console

If we press Esc, a console will appear below and we can Enter some commands and press Enter to execute them.

After the statement is executed, its execution results are displayed below.

For example, 1+2 will return 3, and hello(“debugger”) returns nothing, so undefined:

Breakpoints

Let’s take a look at what happens to the sample page. In hello.js, click line 4. Yes, just click on the number “4”, not the code.

Congratulations to you! You have set a breakpoint. Now click on the number on line 8 as well.

It should look like this (blue is where you should click) :

Breakpoints are places where the debugger automatically pauses JavaScript execution.

When the code is paused, we can check the current variables, execute commands on the console, and so on. In other words, we can debug it.

A list of breakpoints can always be found in the panel on the right. This is very useful when we have many breakpoints in several files. It allows us to:

• Quickly jump to a breakpoint in your code (by clicking the corresponding breakpoint in the right pane).
• To temporarily disable a breakpoint by deselecting it.
• Remove a breakpoint by right-clicking and selecting Remove.
• … And so on.

Right-click on the line number allows you to create a conditional breakpoint. Is fired only if the given expression is true (that is, if the condition is satisfied).

This debugging method is useful when we need to pause program execution on specific variable values or parameters.

The Debugger command

We can also use the debugger command to pause the code, like this:

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

This is really handy when we’re in a code editor and don’t want to switch to a browser to look up scripts in developer tools to set breakpoints.

Pause and view

In our case, the hello() function is called during page loading, so the easiest way to activate the debugger (after we’ve set a breakpoint) is to reload the page. So let’s hit F5 (Windows, Linux) or Cmd+R (Mac).

After setting a breakpoint, the program pauses execution at line 4:

Please open the information drop-down list on the right (where the arrow indicates). This allows you to view the current code state:

1. Watch – displays the current value of any expression.

   You can click on the plus sign and enter an expression. The debugger displays its value at any time and automatically recalculates the expression during execution.

2. Call Stack – Displays nested Call chains.

   At this point, the debugger is in the call chain of Hello (), being called by a script in index.html (there is no function here, so “anonymous” is displayed)

   If you click on a stack item, the debugger jumps to the corresponding code and can also view all of its variables.

3. Scope – Displays the current variable.

   Local shows the variables in the current function, and you can see their values highlighted in the source code.

   Global displays Global variables (not in any function).

   There’s also the this keyword, which we haven’t learned yet, but we will soon.

Track the execution

Now it’s time to trace the script.

At the top of the right panel are buttons for tracing scripts. Let’s use them.

— Resume: Continue, shortcut key
F8.

Continue execution. If there are no other breakpoints, the program continues and the debugger no longer controls the program.

After we click on it, we see something like this:

The recovery is performed, reaching another breakpoint in the say() function and stopping there. Take a look at the “Call Stack” on the right. It has added a call message. We are now inside say().

— “Step” : Run the next command, shortcut key
F9.

Run the next statement. If we click on it now, the alert will be displayed.

Click this button again and again, and all statements of the script are executed one by one.

– Step over: Runs the next command, but
It doesn’t go into a functionShortcuts,
F10.

The previous command, “Step,” is similar, but behaves differently if the next statement is a function call. Functions here refer to: not built-in functions such as alert functions, but our own written functions.

The “Step” command goes inside the function and pauses execution on the first line, while “Step over” unknowingly executes the function call, skipping the inside of the function.

Execution is paused immediately after the function is executed.

This command is useful if we are not interested in the internal execution of the function.

— “Step into”, shortcut key
F11.

Similar to “Step” but different in the case of asynchronous function calls. If you’re new to JavaScript, you can ignore this difference because we haven’t used asynchronous calls yet.

As for the future, remember that the “Step” command ignores asynchronous methods, such as setTimeout (a convention function call), which will be executed after some time. The “Step into” enters the code and waits (if necessary). See the DevTools manual for more details.

“Step out” : Continue to the end of the current function, shortcut key
Shift+F11.

Continue executing the code and stop on the last line of the current function. This comes in handy when we accidentally enter a nested call, but we are not interested in the function, and we want to continue executing as long as possible.

— Enable/disable all breakpoints.

This button does not affect the execution of the program. Just a batch operation breakpoint on/off.

— Enable/disable automatic suspension of script execution when an error occurs.

When this feature is enabled and the developer tools are open, errors in any script will cause execution of the script to be suspended automatically. And then we can analyze the variables and see what went wrong. So if our script dies because of an error, we can open the debugger, enable this option and reload the page to see what caused it to die and what the context was.

Right-click on a line in the code and click on a very useful option called “Continue to Here” in the context menu that displays.

This is handy when you want to move many steps forward to a certain line, but don’t bother to set a breakpoint.

logging

Want to output something to the console? The console.log function will do just that.

For example: output values from 0 to 4 to the console:

For (let I = 0; i < 5; i++) { console.log("value", i); }Copy the code