Google browser debugging JavaScript tips _javascript Tips

Google Browser is not only used to surf the internet, for developers, it is more like a powerful development aids.

工欲善其事 its prerequisite, the next author to share some of the use of chrome.

If the reader knows how to add JavaScript breakpoints to Chrome, read on; otherwise, do your own brain repair.

If there is such a piece of code:

Copy Code code 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 ();

The code itself is not important, but the form is important.

If E is the result of what we ultimately need, but we find the result incorrect, we break the breakpoint in the line assigned to E.

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

But the expression is more complex, just look at the value of a single variable, no effect. It all looks normal, and it's not going to work out.

At this point, you probably want to know (A + b c) This part of the results, do not worry, first the expression selected, and then move the mouse to the selected area, a little stop.

Chrome just tells you the answer. The more interesting is still behind.

Right-click in the selected area and a menu pops up with the top two items: [Add to watch], [Evaluate in console]. The specific corresponding view reference picture.

The so-called watch, can be understood as monitoring, some expressions are more important, you may need throughout the debugging process, real-time monitoring of the value of the expression, then you can use watch.

For instance, we set the breakpoint at "B = 9;" This line, and then add Watch: "A-b" with a value of 1. As shown in figure:

Click Next, execute "b = 9;", which means that B's value has changed, and then look at the Watch: "A-b" value, 7.

This achieves the real-time monitoring effect, the debugging is more convenient and quick.

Let's see what happens to the console next time.

The console is, of course, the console, and the expression can be evaluated directly in the console.

For example, to know (A + b C) results, directly copy to the console, enter, the result came out.

Wait a minute, like what's wrong with the console know the value of a, B, c?

In the absence of breakpoints, the execution of JavaScript code in the console is global-oriented. That is, when you define a variable x in the console, the scope of this x is global.

If the console is used in case of a program interruption, the scope of the console is oriented to the scope of the interrupt. That is, where the breakpoint is set (or where the code executes), the scope of the console is there.

For this example, a variable A is defined globally, with a value of 1, and a local variable, a value of 2, defined in the function test scope. In "a = 2;" Place a breakpoint, type A, enter in the console, and print out the undefined.

Because the program is interrupted in function test and the program executes in function test, the console scope is also in function test, so input a accesses a local variable A, at which point the local variable A is not assigned. So the result is undefined.

This time to share so much, later encountered to continue to share the force, hoping to help readers.