Google Chrome Javascript debugging tutorial

How to open Chrome's developer tools?
You can right-click the page and select the review element:

Or find the following in Chrome's tool:

Alternatively, remember this shortcut: Ctrl + Shift + I (or Ctrl + Shift + J directly open the console), or press F12 directly.
The open developer tool looks like this:

However, I usually prefer to click the button in the lower left corner and use the developer tool as an independent window:

Next we will explain the role of each tab separately.
Elements Tab
This is to view and edit the elements on the page, including HTML and CSS:

On the left side, you can view and edit the HTML structure of the page. You can double-click an element to modify its attributes, or right-click an element to select & quot; edit as HTML & quot; directly edit the HTML of an element or delete an element. All modifications are instantly displayed on the page. (Note: Do you see the last option & quot; Review element & quot; In the context menu above? Does this mean that the webpage of this developer tool is also HTML? You can click it. Oh, hey)
You can also listen to an element. When JS modifies an element's attributes or HTML, it directly triggers a breakpoint and jumps to the JS Code that modifies the element:

On the right side of the elements tab, you can view and edit the element CSS:

You can also see the CSS value overwrites set by each CSS selector.
The following metrics shows the space occupied by elements (width, height, padding, and margin ):

Note that the above properties do not have? This is very useful. You can see the methods and attributes of the elements, it is much more convenient than querying the API Manual (pay attention to the support of some methods and attributes in other browsers such as IE and Firefox ).
Resources Tab

The resources tab displays the requested resources, including CSS, JS, and images. You can also view storage-related information such as cookies, HTML5 databases, and localstore, you can edit and delete the stored content.
The CSS file here has a fun feature. You can directly modify the CSS file and the modification takes effect immediately:

Network Tab

The Network tab is useful for analyzing the network conditions of website requests, viewing the request headers and Response Headers of a request, and especially for viewing Ajax requests. Note that the request is displayed only after you open the chrome developer tool.
Click a specific request URL on the left side to view the detailed HTTP request information of the request:

We can see the HTTP Request Header, HTTP Response Header, HTTP returned content, and other information here, which is useful for development and debugging.
Scripts Tab
Obviously, this tab is used to view the JS file and debug the JS Code. The instructions are as follows:

You can also open the Javascript console to view or modify other information:

You can even set a breakpoint for an xhr request or an event:

Timeline Tab
Note that the timeline tab does not refer to the time response of the network request (this can be viewed on the network tab). The timeline refers to the JS execution time and page element rendering time:

Click record at the bottom to start the recording page. (This is not familiar. Please refer to the link at the end of this article)
Profiles Tab
This is mainly for performance optimization, including viewing the CPU execution time and memory usage:


I am not familiar with this. I will not mention it. Please refer to the link at the end of this article.
Audits Tab
This is useful for optimizing front-end pages and accelerating webpage loading speeds (equivalent to yslow ):

Click the run button to start the Analysis page. After the analysis, you can see the analysis result:

It can even analyze which CSS is not used in the style sheet on the page:

Console Tab
It is the Javascript console:

In addition to viewing error information, printing debugging information (console. Log (), and writing some test scripts, this can also be used as a javascript API for viewing.
For example, to view the methods and attributes of the console, enter & quot; console & quot; In the console and execute:

How about it? For example, I want to check the methods of date functions:

(Note: Some methods and attributes shown here are added to es5. Remember to be compatible with other browsers)
Conclusion
In addition to being concise and fast, Google Chrome has rich plug-ins. For Web developers, chrome also provides comprehensive support for some new standards such as HTML5 and css3, and I personally think Chrome's developer tools are really very useful, this is why I recommend chrome to Web developers.