Google DevTool is sure all Web Dev already know, but I bet very few of you know how to use it “properly”:)) Probably for most people, just turn on DOM detector to adjust CSS and see Network is along, and the children used to blackboard púc should not stop talking.
So here is my permission to introduce some cool features that you probably never touched after spending time scratching the day of the epidemic.
Color board:
First, if you want to get or check a color code on a page, you can use shift + click on the color box to switch between color codes including: HEX | RGB | HSL
If you find a beautiful color on the site and want to copy its color code, you can use this method.
First click on the color box, then the color palette will appear and you can move the cursor to any color area of the website you want, if you want to turn off then click on the icon like a wallet smoking ink in the lab
Tune the Element’s Style
When working with React or Vue, I often have the problem that the page has too many styles that overlap each other, and with a number of styles that are too long, to find the exact style to change is very annoying, but By chance I discovered a feature of DevTool that helped me find the exact class needed in a flash.
First, everyone knows that the mouse pointer detects Element, you move that cursor to the area that needs to change the style, even if it is not very accurate but try to find the largest Element, that is, the Element covers the whole area. area that you suspect is containing the Element that needs to be changed, click one then switch to the Computed tab right next to the Style tab on DevTool.
In the small example above, you can see that there are 2 classes that are setting margin for the div tag to be 0.5rem but let’s assume that the number of overlapping classes is so large that you can hardly find which class is active, you have You can go to Computed and find the corresponding style section, there will be all classes that are affecting that style and the class is active.
Animation
Use the Animation editor to check how the Animation works
And even better, you have a timeline panel to adjust the running speed of Animation like this
Shadow Editor
This is also a tool I often use when I don’t know how to set the box-shadow parameters
Check Coverage
Or yet, you can also use DevTool to check the website’s Coverage
Check FPS
Thought only in the Game but in fact you can also check the frame rate on your site. You can see the frame rate when the Element is in focus or when scrolling something
End
Above are some of the bull tricks I have worked out during the home isolation season, hoping to be helpful for you.
Thanks for watching the article