Debug Web pages with Google Chrome developer tools (Details)

Front-end programmers or college students are developing Web pages, what if they want to test or optimize the structure of the Web page by testing? This requires a tool, Chrome browser developer tools? This article is not familiar with the developer tool of the students or peers, talk about, first read the article

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 page HTML structure of the view and edit, 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 changes will be 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 CSS overrides 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 oh, you can see the elements have the methods and properties , more convenient than the API manual Oh (note Some methods and properties in IE, Firefox and other browsers under the support situation OH )。

Resources tab page

The Resources tab allows you to view the contents of the requested resource, including CSS, JS, images , etc., as well as the storage-related information such as cookies, HTML5 database and Localstore, etc., you can edit and delete the contents of the store.

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:

How about, at a glance? 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. And for Web developers, Chrome for HTML5, CSS3 and other new standards of support is relatively perfect, but do not forget the firebug, the tool is more professional and more comfortable, with IE browser and httpwatch this tool.

Debug Web pages with Google browser developer tools (details)