Chrome review elements feature, web development Powerful helper

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:

The Review Elements function window (Developer Tools) is divided into six sub-functions, namely elements, Resources, Scripts, TimeLine, Profiles, and Storage, as shown in the overall interface:

Here are the functions of each tab separately.

Elements label page

The elements panel contains the most basic functions and is also the most practical. is to view and edit elements on the page, including HTML and CSS:

Elements the left side of the panel is the overall level of the page, as long as your Web page has a good organization, from this level can be the overall grasp of the Web page. Conversely, if the Web page structure is not good, can be seen from here. The selected part is when you invoke the review function, the page element where the mouse is docked, which is the element you want to review, the right side of the elements panel is a few basic properties panels for the element, including the styles, Metrics, properties, and Event Listeners of the element.

On the left is to view and edit the HTML structure of the page, you can directly on an element to modify the attributes of the element, or you right-click "Edit as HTML" directly to the HTML of the element to edit, or delete an element, all the changes will be immediately rendered on the page. (Note: See the last Option "review element" in the right-click menu above?) 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" directly into the console and execute:

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

Chrome review elements feature, web development Powerful helper