Google browser JavaScript debugging tutorial

How do I open the developer tools for Chrome?
You can right-click on the page and select the review element:

Or find it in Chrome's tools:

Or, you directly remember this shortcut: Ctrl+shift+i (or ctrl+shift+j directly to the console), or press F12 directly.
The Open developer tool will look like the following:

But I usually get used to the button in the bottom left corner, the developer tool pops up as a separate window:

Here are the functions of each tab separately.
Elements label page
This is to view and edit the elements on the page, including HTML and CSS:

On the left is the view and edit the HTML structure of the page, you can double-click on an element to modify the attributes of the element, or you right-click " Edit as html" directly edits the Html of the element, or deletes an element, and all changes are rendered instantly on the page. (Note: See the last option in the right-click menu above " review element "?) Does this mean that the page for this developer tool is also HTML? You'll know when you click.
You can also listen to an element, in the JS on the elements of the attributes or HTML changes, the direct trigger breakpoint, jump to modify the elements to change the JS code:

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

You can also see the overlay of CSS values set by each CSS selector here.
The following metrics can see the space of the elements (width, height, Padding, margin of God horse):

Notice that the properties above are not? This is useful, so you can see the methods and properties of the element, which is much more convenient than checking the API manual. (Note Some of the methods and properties supported under IE, Firefox, and other browsers).
Resources tab page

The Resources tab allows you to view the contents of the requested resource, including CSS, JS, images, etc., and can also view storage-related cookies, HTML5 database and Localstore, and so on, you can edit and delete the stored content.
CSS file here has a fun feature, you can directly modify the CSS file, and modify the immediate effect OH:

Network tab page

The Network tab is useful for analyzing Web site requests, viewing the request headers and response headers of a request, especially when looking at Ajax class requests. Note that the request that was initiated after you opened the Chrome Developer tool will be displayed here.
Click on the left to a specific request URL, you can see the request of the detailed HTTP request situation:

We can see here the HTTP request header, HTTP response header, HTTP returned content and other information, for development, debugging, is very useful.
Scripts label page
Obviously, this tab is to view the JS file, debugging JS code, directly read the description:

And you can open the JavaScript console and do some other viewing or modification:

You can even set breakpoints for a XHR request or an event:

Timeline Label page
Note that this Timeline tab does not refer to the time response of the network request OH (this is viewed in the Networks tab), this timeline refers to the JS execution time, page element rendering time:

Click the record at the bottom to start recording what's on the page. (This is not familiar, please refer to the link at the end of the article)
Profiles Label page
This is primarily performance-optimized, including viewing CPU execution time and memory consumption:


This is not familiar, do not say more, or please refer to the end of the link.
Audits label page
This is useful for optimizing front-end pages and speeding up page loading (quite with YSlow):

Click the Run button, you can start analyzing the page, you can see the analysis results are finished:

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

Console tab page
Is the JavaScript console:

In addition to viewing error messages, printing debugging information (Console.log ()), writing some test scripts, you can also view them as JavaScript APIs.
For example, I want to see what methods and properties the console has, and I can enter "console" and execute it directly in the console:

What do you say, at a glance? Again, for example, I want to see how the date functions are:

(Note: Note that some of the methods and properties seen here are ES5 new, and remember that support for other browsers is compatible.)
Conclusion
Google Chrome, in addition to its simplicity and speed, now has a very rich plugin for chrome. For Web developers, Chrome's support for new standards such as HTML5, CSS3, and more, and Chrome's developer tools I personally think is really good, that's why I recommend Chrome to Web developers.

Google browser JavaScript debugging tutorial