Chrome Dev tools

Chrome Dev tools
Introduce the basic usage of chrome Dev tools and some unexpected tips

Chrome developer tools is a series of embedded editing and debugging tools in chrome. It can effectively track layout issues, set breakpoints for Javascript, and optimize programs.

==== Open mode ====
CTRL + Shift + I open/close the debugging tool. (The tab is displayed before the last close)
CTRL + Shift + J open/close the console page of the debugging tool
CTRL + Shift + C open the debugging tool elements page. on this page, press the combination key, which is equivalent to the shortcut key of the magnifier button.

==== 8 tools ====
The chrome debugging tool is divided into eight tabs based on different tasks.
Elements console source network audit timeline profile resource. You can use Ctrl + [and CTRL +] to switch between them.

Elements check the Dom and styles
Console to view information generated by the console API, such as console. Log (). You can directly input JS statements to interact with your program.
Source is mainly used for debugging and even direct file editing.
The Network displays the current network request and downloaded resources in real time.
Audit analyzes page loading and provides suggestions and optimization to reduce webpage loading time and improve response speed.
Where does timeline spend loading pages? All events, from loading, parsing JS, computing style, and page re-painting, are recorded.
Profile records the execution time and memory usage to help you understand where resources are consumed, so you can optimize your code.
Resource checks the resources loaded on the page. It allows you to directly operate HTML5 databases, local storage, cookies, and appcache.

==== Elements ====
You can view HTML and corresponding styles through this interface. The most common method is right-click -- inspect element.
Use the magnifier button to highlight the selected elements. After you select the element, the corresponding HTML fragment is displayed in blue.
You can drag the HTML structure and double-click it to modify the tag and attribute value.
Press F2 or edit as HTML to edit html
The region at the bottom of elements is breadcrumb trail used to display the current node level

Dom breakpoints

Event Listeners
On this page, you can see the event registered by the element. Click the funnel ID and select selected nodes only. Only the events of the selected node are displayed. Expand the event. You can see which file and row define the event.

Styles
You can also see the CSS corresponding to this element on the styles interface.
There is a check box before the style to make this CSS invalid or take effect easily
(Some styles are covered with strikethrough, indicating that the style is overwritten by other styles)
You can click to modify the numeric value ???? To change Alt + ???? The Unit is 0.1.
After you press enter, you can add a new style.
+ Button to add a new style Selector
The mouse button can force the elements to use a pseudo-class style (however, here the pseudo-class is limited to active focus hover vistied4)
For the color value, click the color block to open a color selector to modify it.
The CSS selector shows which file defines the style. You can click it to go to the sources panel and modify the corresponding CSS file.
After modification, it can be saved temporarily (not written to the file, but temporarily saved in the current session)
Right-click load modifications to view the changes.
Revert can be used to cancel changes.

There is a metrics panel on the right side of styles. The box model intuitively shows the value of the margin padding Border Width height, which can be easily modified by double-clicking them.
When the mouse hover is over each block in metric, the corresponding area of the page is highlighted in the same color.

==== Console ====
The console interface is very useful. You can enter statements in the console to interact with the program.
In particular, the console Panel can be displayed at the same time as other panels.
Use the drawer button next to the setting button to open the console in split-view mode.

Clear content in the console
You can use the flag, enter clear () in the console, or press Ctrl + L.
If you want to clear the console in the program, use console. Clear ()
In the console, you can enter a statement. In the console, press enter by default to run the statement. If you want to enter multiple rows, you can use Shift + enter to wrap the line.
Therefore, you can define a function and execute it.

The console also has a filter (funnel sign) that can be used to filter information to be displayed.
Four log error (red) Warning (yellow) Info (blue) filters are used to display the information displayed on the console.

Tips for comparison in the console
Output in group
Console. Group ("authentication phase ");
//......
Console. groupend ("authentication phase ");

Format output
Console. Log ("% s has % d points", "Sam", "100 ");

Apply CSS to change the Font Style
Console. Log ("% CThis will be formatted with large, blue text", "color: Blue; font-size: X-large ");

Count the execution time of a piece of code
Console. Time ("array initialize ");
//......
Console. timeend ("array initiaize ");

Selector
$ ('# Loginbtn'); equivalent to queryselector
$ ('Button. loginbtn '); equivalent to queryselectorall

==== Source ====
It is mainly used for debugging and can also edit code.
Right-click a breakpoint and choose edit breakpoint to set a breakpoint failure condition.
Watch expression on the right can monitor Variables
Call Stack can view the function call status
For Asynchronous function calls (asynchronous request setTimeout, etc.), you need to check async to see the correct function call sequence.

You can temporarily modify the file and press Ctrl + S to save it temporarily.
The background color changes to pink.
Right-click load modifications to load all changes. Click revert to undo the changes.
Like sublime, you can use Ctrl + F to find
CTRL + G to jump to a line

Dom modifications
When the DOM node changes, the JS program execution can be interrupted.
In the elements panel, right-click an element and set it in break on.
There are three cases
Subtree modification when the subnode changes
When the modibutes modifications attribute is changed
When the node Removal node is deleted

==== Network ====
When the secondary panel is opened, it records all network activities.
By default, the Status Request status of many request methods for column name and method is provided.
Resource Type request source initiator size time duration timeline
You can select the columns you want to display in the funnel.
Click the name to view the detailed request and relevant information.

 

Chrome Dev tools