Google Chrome Browser debugging

Why I like Google Chrome as a web Developer

"Original address:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html"

Before Google Chrome came out, I always used Firefox, because Firefox has a very rich plugin, and because Firefox has a strong firebug, for the front-end development can be described as artifact.

When I came out of Chrome, I liked the simplicity and speed of it, whether it was startup speed or page resolution or JavaScript execution (now FIREFOX4 is much more advanced than the previous FireFox3). However, because of the chrome developer tool is not very perfect, and I am not very familiar with the firebug and the goodwill and reliance, then back to use Firefox as my master browser.

Since the development of the chrome plugin (now Fawave), I have been using Google Chrom as my master browser, gradually familiar with chrome developer tools, and chrome has been fast iterative, rapid progress, to now, Chrome has definitely become my master browser, Chrome's developer tool, and I think it's better than Firebug.

Thanks to Google V8 's fast, and support for HTML5 and CSS3, the HTML class's rich client app, whether smooth or rendered, is a great addition to developers, especially for front-end developers who like to research cutting-edge technologies, is very important.

For this article, as a web developer, in addition to the above reasons, our development is related to Chrome's developer tools. In this article, I want to elaborate on the chrome developer tool, and say why I think it is better than Firebug.

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 F12directly.

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 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 on it. You can also listen to an element, in the JS on the attributes of the element or HTML modification, 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:

(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.

Note 1: The chrome version of this article is: 13.0.782.215 m note 2:chrome developer tools for more detailed instructions please refer to: http://code.google.com/intl/zh-CN/chrome/devtools/docs/ Overview.html Note 3: This article originally wanted to set the title is: to those who are reluctant to Firebug because of Firefox's friends

Google Chrome Browser debugging