Google Chrome Developer Tool detailed Introduction

Http://www.cr173.com/html/19114_4.html

4th page JS Debug Source Control Panel

5 Source Control Panel (JS Debug)

JavaScript debugging, basically through the source Control Panel and command line cooperation.

5.1 Beautiful JavaScript

JS on the Internet is generally compressed, read compressed JavaScript is certainly not people can do, let alone add breakpoints. Under the Scripts panel there is a pretty print button (this symbol {}), click on the compressed JS file format to indent the regular file, this time in the set breakpoint readability is greatly improved.

Before adjustment

After adjustment

5.2 Code Error targeting

1 <! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > 2 3  

In the above code, the Red Flag section is obviously wrong, and some errors in the IDE are not checked (especially with browser-related parts). After loading the page, you can see the error message in the display bar and then navigate directly to the error point.

JavaScript error location targeting

5.3 Adding breakpoints and stepping

5.3.1 Breakpoint Interrupt

You can add a breakpoint by clicking on the left side and display it on the right. You can also add the viewed variable through watch expression.

We added a breakpoint that terminates at the breakpoint if the action on the page executes to the breakpoint. Then, we can debug with the top button on the right, which is very similar to the debug of the IDE like vs. The call stack is the calling stack for displaying functions and is very useful in debugging large-scale JavaScript programs.

Single-Step debugging

5.3.2 Page Interrupt Debugging

In addition to setting a regular breakpoint, you can also break when a particular event occurs (not for the element), on the right side of the Scripts panel, there is an event Listener breakpoints, which lists all supported events, not only the click, KeyUp and other events, but also supports Timer (interrupted when SetTimeout setinterval processing function starts execution), onload, scroll, and so on.

6 Display lines (command line)

The command line has a very useful place for our rookie, and is not very familiar with the functionality of the API or API provided by JavaScript. At this point the command line becomes the best place for us to experiment. For example, if we want to see what functions are in the document, we can enter it on the command line and then select and try. The way to learn about open-source frameworks such as jquery is also very efficient, and learning code has to run.

We can directly change the contents of the memory in the command line, and for small functions I can replace them in this way.

We press ENTER to run the input and press Shift+enter if you want to wrap the line. In this case, we directly in the command line inside said Calsum function covered out, a+b replaced with A*b. The results of the operation are as follows.

Command line use

Run results

Google Chrome Developer Tool detailed Introduction