Google (Chrome) browser debugging JavaScript Tips

Google Chrome is not just for surfing the web, it's more like a powerful development aid for developers.

工欲善其事 its prerequisite, the next author to share some of the ways Chrome uses.

If the reader knows how to add JavaScript breakpoints to Chrome, read on, or do it yourself.

If there is a code like this:

1 varA = 1;2 3 functionTest () {4     varA, B, C, D, E;5 6A = 2;7b = A-1;8B = 9;9c = 3;TenD = 4; OneE = (A + b * c) * (A-d); A  -     returne; - } the  -Test ();

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

If E is the result we need eventually, but we find the result is not correct, then we put a breakpoint on the line assigned to E.

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

But the expression is more complex, just look at the value of a single variable, no effect. It all looks normal, and the calculation is not right.

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

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

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

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

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

Click Next to execute "b = 9;", that is to say that the value of B has changed, and then look at watch: "A-a" value, 7.

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

Let's see what's going on with the console.

Console is the console, of course, and expressions can be evaluated directly in the console.

For example, to know (A + b c) results, direct copy to the console, enter, the result is out.

Wait, as if something is wrong, with what console know the value of a, B, c?

Executing JavaScript code in the console without a breakpoint is global-oriented. That is, a variable x is defined in the console at this time, and the scope of the X is global.

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

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

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

This is the first time to share so much, later encountered to the strength of the continued sharing, hoping to help readers.

Google (Chrome) browser debugging JavaScript Tips