Chrome Debugging Js__js

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

Before Google Chrome came out, I always use Firefox, because Firefox plug-ins are very rich, but also because Firefox has a strong firebug, for front-end development is an artifact.

When Chrome comes out, I like it's simple and fast, whether it's starting speed or page parsing speed or JavaScript execution speed (now the FireFox4 is also much better than the previous FireFox3). However, because the chrome developer tools are not perfect, and I am not very familiar with the firebug of goodwill and dependence, then use Firefox as my master browser.

Later, because of the development of Chrome plug-ins (now Fawave), has been using Google Chrom as my master browser, and gradually become familiar with the chrome developer tools, and Chrome has been in the rapid iteration, rapid progress, to the present, Chrome has definitely become my master browser, the Chrome Developer tool, and I think it's better than Firebug.

Thanks to the fast Google V8 and the support for HTML5 and CSS3, the rich-client application of HTML classes is excellent for both fluency and presentation, and for developers, especially the front-end developers who like to study cutting-edge technology, is very important.

For this article, as a web developer, in addition to the reasons above, it is the chrome developer tool that is relevant to our development. And this article, is to elaborate on the chrome developer tools, say why I think it better than firebug to use. How to open the Chrome developer tool.

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

Or find it in Chrome's tools:

Alternatively, you should remember this shortcut directly: Ctrl+shift+i (or ctrl+shift+j directly open the console), or press F12 directly.

The Open developer tool looks like this:

However, I am generally accustomed to the lower left corner of the button, the Developer tool pop-up as a stand-alone 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 side is the page Html structure of the view and edit, you can directly on an element to double-click modify element properties, or you right-click "edit as HTML" directly to the HTML of the elements to edit, or delete an element, all changes will be immediately on the page to be rendered. (Note: See the last Option "review element" on the right menu above.) Does this mean that the page of the developer tool is also HTML? You just click and you know it, oh, hey.
You can also listen to an element, in JS to the attributes of elements or HTML to modify the time, directly trigger breakpoints, jump to change elements to modify the JS code:

The right side of the Elements tab page allows you to 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 be seen in the space of the elements (wide, high, Padding, margin god horse):

Notice that the properties above are not. This is very useful oh, you can see the elements have the method and attributes, than to check the API manual is much more convenient oh (pay attention to some methods and properties in IE, Firefox and other browsers under the support of the situation OH). Resources Label Page

The Resources tab allows you to view the requested resource situation, including CSS, JS, pictures, and so on, while also viewing storage-related cookies, HTML5 database and Localstore, and 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 Label page

Network tab pages are useful for analyzing the network situation of a Web request, for viewing a request's header and response headers, and for responding to content, especially when viewing Ajax class requests. Note that the request that was launched after you opened the Chrome Developer tool will be shown here.
Click on the left to request a specific URL, you can see the request details of the HTTP request:

We can see here the HTTP request header, HTTP response header, HTTP return content and so on, for development, debugging, are very useful. Scripts Label Page

Obviously, this tab is to view the JS file, debugging JS code, directly look at the following illustration:

And you can open the JavaScript console and do some other viewing or modifying:

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

Timeline Label page

Note that this Timeline label page does not refer to the time response of the network request OH (this is viewed in the Network tab), this timeline refers to the JS execution time, page element rendering time:

Click on the record at the bottom to start recording what is being done on the page. (This is not familiar, please refer to the end of the link) Profiles label page

This is primarily for performance tuning, including viewing CPU execution time and memory footprint:

This is also unfamiliar, not much to say, or please refer to the end of the link bar. Audits label Page

This is useful for optimizing the front-end page and accelerating the loading speed of the Web page (quite with YSlow):

Click the Run button, you can start analyzing the page, the analysis will be able to see the results of the analysis:

It can even analyze what CSS is not being used in the stylesheet on the page:

Console tab page

Is the JavaScript console:

This can be viewed as a JavaScript API in addition to viewing error messages, printing debugging information (Console.log ()), and writing some test scripts.
For example, I want to see what methods and properties the console has, and I can enter "console" directly in the console and execute:

How, at a glance. Again, for example, I want to see how the Date function is:

(Note: Note that some of the methods and attributes you see here are ES5 new, and remember compatibility with other browsers.)

Conclusion

Google Chrome, in addition to simplicity, fast, now the chrome plugin is also very rich. For Web developers, Chrome's support for new standards such as HTML5 and CSS3 is perfect, and the Chrome developer tools I personally think are really good, which is why I recommend Chrome to Web developers.

Note 1: This screenshot of the chrome version 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 because Firebug and reluctant to Firefox friends