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

This article mainly introduces how to use Chrome DevTools to debug JavaScript, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Step 1: reproduce the error

Reproducing errors is a debugging step. "reproducing errors" means finding a series of actions that continue to cause errors. You may need to repeat this error multiple times, so try to eliminate any unnecessary steps.

Follow the instructions below to recreate the bug that you will solve in this tutorial.

This is the web page we will use in this tutorial. Make sure you open this page in a new tab: open this page.

Enter 5 in Number 1.

Enter 1 in Number 2.

Click Add Number 1 and Number 2.

Look at the label below the input and button. Displays 5 + 1 = 51.

Ouch. It turned out to be wrong. The result should be 6. This is the error you want to fix.

Step 2: pause the code with a breakpoint

DevTools allows you to pause the code during execution and check the values of all variables at this time. A tool that pauses code is called a breakpoint. Try it now:

Return to the example and press Command + Option + I (Mac) or Control + Shift + I (Windows,Linux) to open DevTools.

Click the Sources panel.

Click Event Listener Breakpoints to open the panel. DevTools shows a list of all events, such as Animation and Clipboard.

Then find the Mouse event category and click to open the list.

Select the click check box.

To return to the example, click Add Number 1 and Number 2 again. DevTools pauses the code to highlight a line of code in the Sources panel. As follows:

Function onClick () {

Why?

When you select click, you set an event-based breakpoint for all click events. When any node is clicked and the node has a click event, DevTools automatically pauses the click event at that node.

Step 3: skip to the next line

A common cause of errors is that scripts are executed in the wrong order. With the code, you can traverse the code execution one line at a time and determine where it is different from the expected execution. Try it now:

On the Sources panel of DevTools, click the Step into next function call button, which allows you to step through the onClick () function, one function at a time. Stop when DevTools highlights the following lines of code:

If (inputsAreEmpty ()) {

Now click the Step over next function call button, and DevTools executes inputsAreEmpty () without entering it. Notice how DevTools skips these lines of code. This is because inputsAreEmpty () returns false, so the code block of the if statement is not executed.

This is the basic idea of skipping functions. If you look at the code in get-started.js, you can see that the error may be somewhere in the updateLabel () function. Instead of iterating through each line of code, you can use other types of breakpoints to pause the code getting closer to the wrong location.

Step 4: set another breakpoint

Line breakpoints are the most common type of breakpoints. When you want to pause a line of code, you can use line code breakpoints. Try it now:

Take a look at the * line in updateLabel (), as follows:

Label.textContent = addend1 +'+'+ addend2 +'='+ sum

On the left side of this code, you can see the line number of this line: 32. Click 32. DevTools puts a blue icon on top of 32. This means that there is a line code breakpoint on the line. DevTools now always pauses before the line of code is executed.

Click the Resume script execution button

The script continues to execute until the line of code that sets the breakpoint is reached

Look at the lines of code in updateLabel () that have been executed. DevTools prints out the values of "addend1", "addend2" and "sum". The value of "sum" looks suspicious. It seems to be treated as a string, it should be a number. This may be the cause of the mistake.

Step 5: check variable values

Another common cause of error is when a variable or function produces a different value than expected. Many developers use console.log () to see how variables change, but console.log () can be boring and ineffective for two reasons. First, you may need to manually edit your code with a large number of calls to console.log (). Second, you may not know which variable is associated with the error, so you may need to print many variables.

One console.log () alternative to DevTools is the Watch expression. Use monitoring expressions to monitor changes in variables over time. As the name implies, Watch expressions are not limited to variables. You can store any valid Watch expression in an JavaScript expression. Try it now:

In the Sources panel, click Watch.

Click the Add Expression button.

Enter typeof sum.

Press enter. DevTools displays "typeof sum:" string ". The value to the right of the colon is the result of your observation expression.

As predicted, sum is treated as a string type.

Another alternative to console.log () is the console. You can use the console to evaluate any JavaScript statement. Developers usually use the console to override variable values when debugging. In your case, the console can help find a way to repair bug. Try it now:

If you did not open the console drawer, press Esc to open it. It will open at the bottom of your DevTools window.

In the console, enter parseInt (addend1) + parseInt (addend2).

Press enter. DevTools executes the statement and prints out "6", which is the result you expect the demonstration to produce.

Step 6: fix

You have identified potential fixes for this bug. The rest is to try to fix it by editing the code and rerunning the demo. You don't need to leave DevTools to fix bug. You can edit the JavaScript code directly in DevTools UI. Try it now:

In the Sources panel of DevTools, use var sum = parseInt (addend1) + parseInt (addend2); replace var sum = addend1 + addend2;, which is the line you are currently pausing.

Press Command + S (Mac) or Control + S (Windows,Linux) to save the changes. The background of the code changes to red, indicating that the script has changed in DevTools.

Click the Deactivate breakpoints button

It turns blue to indicate that it is active DevTools ignores any breakpoints you set.

Click the Resume script execution button

Try using different variables, and now sum can be calculated correctly

Thank you for reading this article carefully. I hope the article "how to use Chrome DevTools to debug JavaScript" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.