Tips for chrome Developer Tools

Tips for chrome Developer Tools

One of the favorite browsers is chrome. It is not only simple, lightweight, and fast, but also because of its powerful built-in F12 Developer Tools.

Tip 1: Elements panel

1) This is the most basic. If you want to view the page elements, right-click the page and choose inspect elements (Review element ), chrome will automatically call out the first label elements in the Developer Tools panel, and locate the selected Dom Element Node (1), so that we can right-click to edit the content of the DOM node.

2) Apart from DOM nodes matching on the left side of the elements panel, the style panel on the right is also useful, where element. style indicates the inline style of the DOM element. Currently, it is not recommended to use the in-line style. It is recommended to write it to CSS, so it is empty in most cases; the following matched CSS rules is written in the CSS file and matches the CSS style of the current Dom node element. It is related to the current element but overwritten by the later style with the strikethrough; the gray background area is not the style we wrote, but the browser's own, which is called the User Agent stylesheet;

3) Note that the active and hover attributes of the mouse are invisible by default. You need to click toggle element style to display or hide them.

4) Metrics

Used to view the structure of block elements. Such as the difference between margin and padding.

 

 

 

Tip 2: source panel

1) Local modifications

One of the most amazing tips is to modify the local file. developer tools automatically performs version control to facilitate viewing and comparing the modifications we have made.

2) Debugger

Single-step execution, cross-function execution, and step into functions are available.

 

3) Pretty print

The Code formatting function is used to format JavaScript and CSS files compressed into one line, which is more beautiful and easy to debug.

 

Tip 3: Powerful Console

1) Accept the firebug command line API

Http://getfirebug.com/wiki/index.php/Command_Line_API

If $0 is commonly used, it indicates the currently selected element.

2) use the console to record logs

Console. Log ()

Console. Warn ()

Console.info ()

Console. Error ()

 

Tip 4: Resource Panel

Contains almost all resources related to the current page, including document, JS, CSS, image, and the latest HTML5 local strage.

 

Tip 5: Network Panel

1) records all HTTP requests

2) You can also view the packet header and content of each request.

 

.