I believe that most front-end career starts from F12 (Windows) or Cmd+Opt+I (Mac), the use of Chrome debugging tool can greatly reflect the ability of a front-end engineer, so I plan to write an article I understand the use of DevTools debugging method
1. Open the global command menu
Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows, Linux) open the command menu, chrome has a lot of deep entry features can be found here
2. Fast global search
When you’re working on a project and you just remember an API or an ID and you don’t know the static resources you need to do a global search
. -> More tools -> Search
At this time, the global search appears, which is for all resources under Source. We input the API we want to search in the search box, and click the search result to jump to the corresponding JS
3. Quick jump of JS lines in source
4. Long screenshot
5. Alt + Click to expand all child nodes of the current DOM
6. Check where the resource is loaded
7. CSS searcher searches the DOM
8. Chrome loads resource images to Base64
9. Multi-cursor editing
10. Hold Alt to partially select
11. About the usage of “performance
I feel that Chrome runtime performance bottleneck analysis is a better performance debugging introduction to write, will also be dedicated to writing a performance debugging
Tool usage method reference:
Chrome Tools Chinese
Chrome Developer Tools
Dev tips every day