Why do I like Google Chrome as a Web developer?

Document directory

• How to open Chrome's developer tools?
• Elements Tab
• Resources Tab
• Network Tab
• Scripts Tab
• Timeline Tab
• Profiles Tab
• Audits Tab
• Console Tab

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

Before Google Chrome came out, I used FireFox all the time, because FireFox has rich plug-ins, and FireFox has powerful Firebug, which is a powerful front-end developer.

When Chrome came out, I liked its simplicity and speed, whether it is the startup speed, the page resolution speed, or the Javascript execution speed (FireFox4 is also greatly improved compared with FireFox3 ). However, at that time, because Chrome's developer tools were not perfect, and I was not very familiar with them, and I liked and relied on Firebug, I still used FireFox back as my main browser.

Later, due to the development of Chrome plug-ins (now FaWave), Google Chrom has been used as my main browser, gradually getting familiar with Chrome's developer tools, and Chrome has been quickly iterated, as Chrome has become my main browser and Chrome developer tool, I think it is better than Firebug.

Thanks to Google V8's rapid development, and its comprehensive support for HTML5 and CSS3, Chrome, a rich html client application, is superior in both smoothness and presentation, this is important for developers, especially those who prefer to study cutting-edge technologies.

As a Web developer, in addition to the above reasons, this article is related to our development and is Chrome's developer tool. This article details Chrome's Developer Tools and why I think it is better than Firebug.

How to open Chrome's developer tools?

You can right-click the page and select the review element:

Or find the following in Chrome's tool:

Alternatively, remember this shortcut: Ctrl + Shift + I (or Ctrl + Shift + J directly open the console), or pressF12.

The open developer tool looks like this:

However, I usually prefer to click the button in the lower left corner and use the developer tool as an independent window:

Next we will explain the role of each Tab separately.

Elements Tab

This is to view and edit the elements on the page, including HTML and CSS:

On the left side, you can view and edit the HTML structure of the page. You can double-click an element to modify its attributes, you can also right-click and select "Edit as Html" to directly Edit the HTML of an element, or delete an element. All modifications will be instantly displayed on the page. (Note: Do you see the last option "review element" in the context menu above? Does this mean that the webpage of this developer tool is also HTML? You can click it. Oh, hey)
You can also listen to an element. When JS modifies an element's attributes or HTML, it directly triggers a breakpoint and jumps to the JS Code that modifies the element:

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

You can also see the CSS value overwrites set by each CSS selector.
The following Metrics shows the space occupied by elements (width, height, Padding, and Margin ):

Note that the above Properties do not have? This is very useful. You can see the methods and attributes of the elements, it is much more convenient than querying the API Manual (pay attention to the support of some methods and attributes in other browsers such as IE and FireFox ).

Resources Tab

The Resources tab displays the requested Resources, including CSS, JS, and images. You can also view storage-related information such as Cookies, HTML5 databases, and LocalStore, you can edit and delete the stored content.
The CSS file here has a fun feature. You can directly modify the CSS file and the modification takes effect immediately:

Network Tab

The Network tab is useful for analyzing the Network conditions of website requests, viewing the request headers and Response Headers of a request, and especially for viewing Ajax requests. Note that the request is displayed only after you open the Chrome developer tool.
Click a specific request URL on the left side to view the detailed HTTP request information of the request:

We can see the HTTP Request Header, HTTP Response Header, HTTP returned content, and other information here, which is useful for development and debugging.

Scripts Tab

Obviously, this tab is used to view the JS file and debug the JS Code. The instructions are as follows:

You can also open the Javascript console to view or modify other information:

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

Timeline Tab

Note that the Timeline tab does not refer to the time response of the Network request (this can be viewed on the Network tab). The Timeline refers to the JS execution time and page element rendering time:

Click Record at the bottom to start the recording page. (This is not familiar. Please refer to the link at the end of this article)

Profiles Tab

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

I am not familiar with this. I will not mention it. Please refer to the link at the end of this article.

Audits Tab

This is useful for optimizing front-end pages and accelerating webpage loading speeds (equivalent to Yslow ):

Click the run button to start the Analysis page. After the analysis, you can see the analysis result:

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

Console Tab

It is the Javascript console:

In addition to viewing error information, printing debugging information (console. log (), and writing some test scripts, this can also be used as a Javascript API for viewing.
For example, if you want to view the methods and attributes of the console, you can directly enter "Console" in the console and execute:

How about it? For example, I want to check the methods of date functions:

(Note: Some methods and attributes shown here are added to ES5. Remember to be compatible with other browsers)

Conclusion

In addition to being concise and fast, Google Chrome has rich plug-ins. For web developers, Chrome also provides comprehensive support for some new standards such as HTML5 and CSS3, and I personally think Chrome's developer tools are really very useful, this is why I recommend Chrome to web developers.

NOTE 1: The Chrome version in 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: The title originally set in this article is: to those friends who are reluctant to use FireFox because of Firebug