Tips for debugging JavaScript in Google Chrome _ javascript skills

This article mainly introduces Google Chrome's tips for debugging JavaScript. If you need it, you can refer to Google Chrome not only for surfing the Internet, but also for developers, it is more like a powerful development auxiliary tool.

For better work, you must first sharpen the tool. Next, I will share with you some Chrome usage methods.

If you know how to add a JavaScript breakpoint to Chrome, continue to read it; otherwise, complete your brain.

Suppose there is such a piece of code:

The Code is as follows:

Var a = 1;

Function test (){
Var a, B, c, d, e;

A = 2;
B = a-1;
B = 9;
C = 3;
D = 4;
E = (a + B * c) * (a-d );

Return e;
}

Test ();

Code itself is not important, but forms are important.

Assume that e is the final result we need, but we find that the result is incorrect, so we are assigning a value to e under the breakpoint.

After the breakpoint is down, move the mouse over a variable and stop for a moment. Chrome will prompt you the value of the variable at this time.

However, the expression is complicated. It does not work if you only look at the value of a single variable. It looks quite normal, and the calculation is incorrect.

At this time, you may want to know the results of (a + B c). Don't worry, first select the expression, and then move the mouse over the selected area for a moment.

Chrome tells you the answer directly. It's even more interesting.

Right-click the selected area and a menu will pop up. The top two items are: [Add to watch] and [Evaluate in console]. For details about the corresponding view, refer to the image.

Watch can be understood as monitoring. Some expressions are important and may need to monitor the value of this expression in real time throughout the debugging process. In this case, watch can be used.

For example, we set the breakpoint to "B = 9;" and then add watch: "a-B" with a value of 1.

Click Next and execute "B = 9;", that is, the value of B has changed. Now let's take a look at the value of watch: "a-B", which is-7.

In this way, real-time monitoring is achieved and debugging is more convenient and quick.

Next, let's take a look at the console.

The console is of course the console. expressions can be evaluated directly in the console.

For example, if you want to know the result of (a + B c), copy it directly to the console and press Enter. The result is displayed.

And so on. Why does the console know the values of a, B, and c?

When there is no breakpoint, it is global-oriented to execute JavaScript code in the console. In other words, define a variable x in the console, and the scope of this x is global.

If you use the console when the program is interrupted, the scope of the console is oriented to the scope of the interrupt. That is to say, where the breakpoint is set (or where the code is executed), the scope of the console is where.

In this example, a global variable a with a value of 1 is defined, and a local variable a with a value of 2 is defined in the function test scope. At the "a = 2;" breakpoint, enter a in the console, press enter, and print undefined.

At this time, the program is interrupted within function test and the program is executed to function test. Therefore, the console scope is also in function test. Therefore, input a to access the local variable, at this time, the local variable a is not assigned a value, so the result is undefined.

This is the first time to share so much information. In the future, we will continue to share with you, hoping to help readers.