Google browser how to debug JS

First we open the Developer tool, you can right-click on the page and select the review element or find it in the Chrome tool or you'll remember the shortcut directly: Ctrl+shift+i (or ctrl+shift+j directly open the console), or press F12 directly.

The Open developer tool looks like this, and it's recommended that you pop the developer tool as a separate window:

1. Elements label page

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

The left side is the page HTML structure of the view and edit, you can directly on an element to double-click Modify the attributes of the element, or you click the right key to select; Edit as HTML, editing the HTML of the element directly, or deleting an element, all changes will be rendered instantly on the page. (Note: See the last option on the right menu above; Do you check the elements?) does this mean that the page of the developer tool is also HTML? You'll know when you click. 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 see the space that the element occupies (wide, high, Padding, Margin)

Notice the properties on it? This is very useful oh, you can see the elements have methods 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).

2. 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:

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

4. 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:

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

6. Profiles Label page

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

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

8. 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, I can enter directly into the console, and execute:

How about, at a glance? Again for example I want to see what the date functions are:

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

Google Chrome is a very rich addition to the simplicity and speed of Chrome's current plugins. 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.