Google browser Chrome How to debug JavaScript

Google Browser is a company developed by Google's browser. Google Browser is based on the other open source software written. The following small series for everyone 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 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).