Google browser how to debug JS Google browser debugging JavaScript tutorial

Google Chrome is a Google browser developed by the company. Google Chrome is based on other open source software. The following small series for you to share a Google browser debugging JavaScript tutorial, hope to help everyone

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

Open developer tools will look like this, we recommend that you pop up the developer tools as a separate window:

1. 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, make edits directly to the HTML of an element, or delete an element, and all changes are rendered instantly on the page. (Note: See the last option in the right-click menu above; Review the elements?) 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 overlay of CSS values set by each CSS selector here.

The following metrics can see the space of the element (width, height, Padding, Margin)

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

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

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

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

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

6. Profiles Label page

This is primarily performance-optimized, including viewing CPU execution time and memory consumption:

7. Audits label page

This is useful for optimizing front-end pages and speeding up page loading (quite with YSlow):

Click the Run button to start analyzing the page, and then you can see the results of the analysis.

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

8. 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, I can enter it directly in 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.)

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.

Google browser how to debug JS Google browser debugging JavaScript tutorial