I am not out of the internship of the front end of a small novice, these months found Google Chrome Devtools ease of use is very high small features and small details to share with you. Welcome to collect + like. New people need encouragement lol
Content and pictures are original, shall not be reproduced without permission!!
Element
1. Suspending the style name in styles can highlight all elements that match the style name (see figure)
This feature is useful. It is useful to see which elements the style is applied to. It’s easy to see if the styles are conflicting
2. Quickly adjust the value of the style (as shown in the figure)
Tip: Up and down to adjust the style values no longer have to guess
3. For font color, background color and other color values, you can directly select or edit the color in the console (as shown in the figure).
Not only can you manually pick up the colors, but you can also pick up the colors of other elements in the page
4. Use tools to simulate CSS series operations (as shown)
This is interesting…. Some hover styles will disappear when the mouse moves over. This is a simple solution to the problem of not being able to save styles. And it’s easy to control
5. Writing graphical CSS animation (as shown)
I have not used this specifically…. Because few animations are written…. But it looks like you can graphically adjust the motion. More interesting
6. Graphically write CSS shadows
This allows you to graphically adjust the XY offset, blur, and spread of the shadow
7. Quickly view the information of the selected elements (as shown in the figure)
This is interesting, before you do some business, many cases need to console. Log element. Look at his properties. You can also see the children of the selected element, the height, and so on
Console
1. Output content filters
This allows you to quickly type in a keyword to find the console you want. Whether regular self-test is supported
2. Console priority filtering
This allows you to quickly filter the priority of the console and see what debugging information you want to see
3. Other tools in the Console
Examples include “debugging information with time stamps,” “Showing XMLHttpRequests,” and more. Please self-test
Network
skills
This includes features such as “hide small image links beginning with data”, “enable offline mode”, and “delay limiting page speed”
Vue DevTools (other framework developers please skip)
1. Quickly locate the relative positioning position of components and the DOM tree position
I won’t say much about the picture
2. Quickly view the component name of the element and locate the component tree
As shown in figure
Security
You can see all domains requested since the page was loaded (not hosts)
More tools
Please look for the picture where I’m going to start cough cough
Animations
Change
This is very useful. Ahhhh. Especially if you change the CSS on your page and then go back and forget what you changed…… This tool can see all your temporary manual changes since the page loads
Network conditions
1. Basic operations
Function is shown in figure
2. Limit page traffic (using system default)
I believe everyone can understand…. I don’t have to tell you…
3. Limit page traffic (using customization)
Click “Add” in the previous picture, and then click “Add Custom Profile “in the picture in this chapter to display the picture above. Adjust it according to the actual situation
Quick source
Write code in here and it works as you write it
Rendering
This is where the various monitors are located, including the FPS framerate monitor.
To do HTML5/ mobile game development must be able to see real-time FPS, GPU Memory usage ~~
Search
Enter content, global search (contents of all loaded files)
Sensors
This simulates the current position of the device, as well as the phone’s level sensor parameters. Just drag the phone