Google Chrome is more than just a web browser. It’s a powerful development aid for developers.

If you want to do a good job, you must first sharpen your tools. Next, I will share with you some ways to use Chrome.

If you know how to add JavaScript breakpoints in Chrome, read on; Otherwise, use your imagination.

Suppose you have code like this:

 1 var a = 1;
 2 
 3 function test(){
 4     var a, b, c, d, e;
 5 
 6     a = 2;
 7     b = a - 1;
 8     b = 9;
 9     c = 3;
10     d = 4;
11     e = (a + b * c) * (a - d);
12 
13     return e;
14 }
15 
16 test();
Copy the code

It’s not the code that matters, it’s the form.

Let’s say e is the final result we want, but it turns out to be incorrect, so we break on the line where e is assigned.

After the breakpoint is set, hover over a variable for a moment and Chrome will prompt you for the value of that variable.

But unfortunately the expression is more complex, just look at the value of a single variable, there is no use. It all looks fine, but then it’s not.

At this point, you’ll probably want to know the result of the (a + b and c) section. Don’t worry, select the expression first, then hover the mouse over the selected area and pause.

Chrome tells you the answer directly. And here’s where it gets more interesting.

Right-click the selected area to display a menu with [Add to Watch] and [Evaluate in Console] at the top. Refer to the corresponding view picture.

The so-called watch can be understood as monitoring. If some expressions are important, you may need to monitor the value of the expression in real time during the whole debugging process. In this case, you can use Watch.

For example, let’s set the breakpoint at “b = 9;” On this line, then add watch:” a-b “with a value of 1. As shown in figure:

Click Next and execute “b = 9;” , so the value of b has changed. Now watch:” A-b “is -7.

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

Let’s take a look at console.

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

For example, if you want to know the result of (a + b + c), copy it to the console, press Enter, and the result comes out.

Wait, something is wrong. How does the console know the values of a, B, and C?

Executing JavaScript code in the console without breakpoints is globally oriented. That is, a variable x is defined in the console, and the scope of x is global.

If the console is used in the event of a program interrupt, the scope of the console faces the scope of the interrupt. That is, where the breakpoint is set (or where the code executes), the scope of the console is there.

In this case, a variable a is defined globally with a value of 1; It also defines a local variable a with a value of 2 in the function test scope. In “a = 2;” On the console, type A, press Enter, and print undefined.

Since the program is interrupted inside function test, the program is executed in function test, so the scope of the console is also in function test. Therefore, input A accesses local variable A, and local variable A is not assigned, so the result is undefined.

This time share so much first, later meet to give force to continue to share, hope to help readers.

Finally:

In the process of learning the web front end, it is inevitable to encounter a lot of problems, these problems may bother you for a long time, so I have a Web development learning exchange group (545667817), which are nuggets of friends, and organized a most comprehensive front-end learning materials, from the most basic HTML+CSS+JS to mobile HTML5 project actual combat learning materials, want to learn can apply to join, we learn from each other, communicate with each other, common progress, share different learning materials every day!