Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points of practical JavaScript debugging skills, which are detailed in content and clear in logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

As a front-end developer, we often use console.log () to debug problems in the program. Although this approach can solve some of the problems, it is not as efficient as tools that can perform step-by-step debugging. In this article, you'll learn how to easily debug JavaScript code using Google Chrome developer tools.

Most browsers provide DevTools for us to debug JavaScript applications, and they are used in a similar way, as long as we learn how to use debugging tools in one browser, it is easy to use it in other browsers.

Take the Greet Me program as an example, this program is very simple, just enter the name and wish, and finally output a sentence:

When you enter two form values, the wish section does not print correctly, but prints out the NaN. Next, take a look at what Chrome DevTools has to do to debug the problem of locating code.

First, understand the Sources panel

DevTools provides many different tools for debugging, including DOM checking, analysis, and network call checking. What we're talking about here is the Sources panel, which helps us debug JavaScript. You can use the shortcut key F12 to open the control panel and click the Sources tab to navigate to the Sources panel, or you can directly use the shortcut keys Command+Option+I (Mac) or Control+Shift+I (Windows, Linux) to open it.

The Sources panel consists of three main parts:

File navigation area: all files requested by the page will be listed here

Code editing area: when we select a file from the file navigation bar, the contents of the file are listed here, where we can edit the code

Debugger area: there are many tools that can be used to set breakpoints, check variable values, observe execution steps, and so on.

If the DevTools window is wide or does not open in a separate window, the debugger section is displayed on the right side of the code editor:

Second, set breakpoints

To start debugging code, the first thing to do is to set a breakpoint, which is the logical point where code execution is paused to debug it.

DevTools allows us to set breakpoints in different ways:

In the line of code

In a conditional statement

At the DOM node

On the event listener.

1. Set a breakpoint on the line of code

To set a code line breakpoint:

Click to switch to the Sources tab

Select the source file that needs to be debugged from the file navigation section

Find the lines of code that need to be debugged in the code editor area on the right

Click the line number to set a breakpoint on the line.

Here, a breakpoint is set on line 6 of the code, and the code is paused when it is executed.

two。 Set conditional breakpoint

To set a conditional breakpoint:

Click to switch to the Sources tab

Select the source file that needs to be debugged from the file navigation section

Find the lines of code that need to be debugged in the code editor area on the right

Right-click the line number and select "Add conditional breakpoint" to add a conditional breakpoint:

After clicking, a dialog box appears at the bottom of the line of code, and you can enter the conditions of the breakpoint:

Press enter (Enter) to activate the breakpoint, and an orange icon appears at the top of the breakpoint line:

When the value of the name variable in the print () method is Joe, code execution is paused. It is important to note that conditional breakpoints are used only when we determine the approximate scope of the code being debugged.

3. Set breakpoints on event listeners

To set a breakpoint on an event listener:

Click to switch to the Sources tab

Expand the Event Listener Breakpoints option in the debugger area

Select the event listener from the event list to set the breakpoint. We have a button click event in our program, so select click in the Mouse event option.

Tip: we can use this option when we want to pause the event listener code that runs after the event is triggered.

4. Set breakpoints in the DOM node

DevTools is also powerful in DOM checking and debugging. When you add, delete, or modify something in DOM, you can set breakpoints to pause the execution of the code.

To set a breakpoint on DOM:

Click to switch to the Elements tab

Find the element for which you want to set the breakpoint

Right-click the element for the context menu, select the Break on option, and then select one of Subtree modifications, Attribute modifications, Node removal:

These three options have the following implications:

Subtree modifications: breakpoints when the child nodes within a node change

Attribute modifications: breakpoints when node attributes change

Node removal: a breakpoint when a node is removed.

As shown in the figure above, we set a breakpoint when the DOM of the p of the output message changes. When the button is clicked, the greeting message is output to p, the content of the child node changes, and an interruption occurs.

Note: we can use this option when we suspect that the DOM change is causing the error, and when the DOM change is interrupted, the execution of the relevant JavaScript code is automatically paused.

Third, debugging step by step

Now we know how to set breakpoints. In complex debugging situations, we may need to use these combinations of debugging. The debugger provides five controls to step through the code:

Let's look at how these controls are used separately.

1. Next step (shortcut key: F9)

This option enables us to execute line by line when the JavaScript code is executed, and if there is a function call midway, stepping into the function, line by line, and then exiting.

two。 Skip (shortcut key: F10)

This option allows us to skip some code when executing code. Sometimes we may have determined that certain features are normal and do not want to take the time to check them, we can use the skip option.

The following is that when stepping into the logger () function, the execution of the function is skipped:

3. Enter (shortcut key: F11)

Use this option to learn more about functions. When stepping into a function, when you feel that a function is behaving abnormally and want to check it, you can use this option to enter the function and debug it.

Here's how to step into the logger () function:

4. Jump out (shortcut key: Shift+F11)

When stepping into a function, we may not want to continue to execute and exit it, so we can use these options to exit the function.

Here's how to get inside the logger () function and exit immediately:

5. Jump (shortcut key: F8)

Sometimes we want to jump from one breakpoint to another without any debugging between them to jump to the next breakpoint:

Check the scope, call stack and values

When debugging line by line, check the scope and value of the variable and the call stack of the function call. These three options are available in the Debugger area:

1. Range (Scope)

You can view local and global scope content and variables in the Scope option, and you can also see the real-time direction of this:

two。 Call stack

The call stack panel helps identify the function execution stack:

3. Value

Checking the values in the code is the main way to identify errors in the code. When stepping, we only need to hover the mouse over the variable to check the value.

You can see the check value of the variable name when the code is executed:

In addition, we can select part of the code as the expression to check the value. In the following example, the expression document.getElementById ('masked wish`) is selected to check the value:

4. Watch

The Watch section allows you to add one or more expressions and monitor their values as they are executed. This is very useful when we want to do some calculations outside the logic of the code. We can combine any variable from the code area to form a valid JavaScript expression. As you step through, you can see the value of the expression.

Here are the steps to add a Watch:

Click the + button on Watch:

Add an expression to monitor. In this example, you add a variable whose value you want to observe:

Another way to observe the value of the expression is to add it from the console in the console:

5. Disable and delete breakpoints

You can click the following button to disable all breakpoints:

Note that the above method does not delete breakpoints, only temporarily deactivates them. To activate these breakpoints again, just click the breakpoint again.

You can remove one or more breakpoints from the Breakpoints panel by unchecking the check box. You can delete all breakpoints by right-clicking and selecting the Delete all breakpoints option:

Use VS Code to debug JavaScript

There are some practical plug-ins in Visual Studio code that can be used to debug JavaScript code. You can install a plug-in named "Debugger for Chrome" to debug the code:

After installation, click the run option on the left and create a configuration to run / debug the JavaScript application.

This creates a file called launch.json that contains some setting information:

{"version": "0.2.0", "configurations": [{"type": "chrome", "request": "launch", "name": "Debug the Greet Me app", "url": "", "webRoot": "${workspaceFolder}"}]}

You can modify the following parameters:

Name: any name

Url: URL running locally

WebRoot: the default value is ${workspaceFolder}, which is the current folder. You may just change it to the project entry file.

The final step is to start debugging by clicking the play icon in the upper-left corner:

This debugger is similar to DevTools and has the following main parts:

Enable debugging. Press the play button to enable debugging options.

Controls for stepping through breakpoints and pausing or stopping debugging.

Set breakpoints on the source code.

The range panel looks at the range and values of variables.

The monitor panel used to create and monitor expressions.

The call stack that executes the function.

List of breakpoints to enable, disable, and delete.

The debug console reads console log messages.

Finally, going back to the original question, instead of debugging step by step, it is determined by the above debugging method that you only need to add a + to the wish variable:

Const message = 'Hello' + name +', Your wish `'+ + wish + '`may come truedebugging skills. These are all the contents of this article entitled "what are the practical JavaScript debugging skills?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.