Chrome development, how to use debug. (Transfer)_html/css_WEB-ITnose

How to open Chrome’s developer tools?

You can right-click on the page and select Inspect Element:

or find it in Chrome's tools:

Or, you can just remember this shortcut: Ctrl Shift I (or Ctrl Shift J to open the console directly), or press F12 directly.

The opened developer tools look like this:

But I am usually used to clicking the button in the lower left corner to pop up the developer tools as an independent Window:

Let’s talk about the function of each Tab separately.

Elements tab

This is for viewing and editing elements on the page, including HTML and CSS:

The left side is the HTML structure of the page To view and edit, you can directly double-click on an element to modify the element's attributes, or you can right-click and select "Edit as Html" to directly edit the element's HTML, or delete an element, and all modifications will be immediately reflected on the page. Get presented. (Note: Did you see the last option "Inspect Element" in the right-click menu above? Does this mean that the page of this developer tool is also made of HTML? You will know after clicking on it, hehe)

You can also monitor an element. When JS modifies the element's attributes or HTML, trigger the breakpoint directly and jump to the JS code that modifies the element:

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

You can also see the override of the CSS values ​​set by each CSS selector here. Condition.

The following Metrics can see the space occupied by the elements (width, height, Padding, Margin):

Did you notice the Properties above? This is very useful. It allows you to see the methods and attributes of the element, which is much more convenient than checking the API manual (note the support of certain methods and attributes in other browsers such as IE and FireFox).

Resources tab page

The Resources tab page can view the requested resources, including CSS, JS, images, etc., and you can also view storage-related Such as Cookies, HTML5 Database and LocalStore, etc. You can edit and delete the stored content.

The CSS file here has an interesting feature. You can modify the CSS file directly, and the modification will take effect immediately:

Network tab

The Network tab is very useful for analyzing the network conditions of website requests, viewing the request headers and response headers of a certain request, and the response content, especially when viewing Ajax requests. Note that the request will be displayed here only after you open the Chrome developer tools.

Click on a specific request URL on the left to see the detailed HTTP request status of the request:

We can see the HTTP request header, HTTP Response headers, HTTP returned content and other information are very useful for development and debugging.

Scripts tab

Obviously, this tab is for viewing JS files and debugging JS code. Just look at the description below:

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

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

Timeline tab

Note that this Timeline tab does not refer to the time response of network requests (this can be viewed in the Network tab). This Timeline refers to the JS execution time. Page element rendering time:

Click Record at the bottom to start recording the content executed on the page. (If you are not familiar with this, please refer to the link at the end of the article)

Profiles tab

This is mainly for performance optimization, including checking CPU execution time and memory usage:

I’m not familiar with this, so I won’t go into details, but please refer to the link at the end of the article.

Audits tab

This is very useful for optimizing front-end pages and accelerating web page loading speed (equivalent to Yslow):

Click the run button, You can start analyzing the page. After the analysis, you can see the analysis results:

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

Console tab

is the Javascript console:

In addition to viewing error messages and printing debugging information (console.log ()), in addition to writing some test scripts, it can also be used as a Javascript API to view.

For example, if I want to see what methods and properties the console has, I can directly enter "console" in the console and execute:

How about it, it's clear at a glance, right? For another example, I want to see what methods the date function has:

(Note: Note that some of the methods and attributes seen here are new to ES5. Remember to be compatible with other browsers. Support status)

Conclusion

In addition to being simple and fast, Google Chrome now has a very rich set of plug-ins. For web developers, Chrome has relatively complete support for some new standards such as HTML5 and CSS3, and I personally think Chrome’s developer tools are really easy to use. This is why I recommend using Chrome to web developers. reason.