Introduction to Chrome DevTools
Chrome DevTools (Chrome Developer Tools) is a set of web development and debugging tools built into Google Chrome (a free web browser developed by Google), which can be used to iterate, debug, and analyze websites.
Chrome DevTools (Chrome Developer Tools) official documentation (language selection in the lower left corner):
https://developers.google.com/web/tools/chrome-devtools/
The above URL generally cannot be opened. If it cannot be opened, the following can be used instead:
https://developers.google.cn/web/tools/chrome-devtools/
How to open Chrome Developer Tools?
Select More Tools> Developer Tools in the Chrome menu
Right-click on the page element and select "Check"
Use the shortcut key Ctrl+Shift+I (or use the function key F12, Windows) or Cmd+Opt+I (Mac)
[Ctrl + Shift + J (Windows) / Cmd + Opt + J (Mac), open DevTools, and locate the console panel]
Open the chrome browser, press F12, open the Chrome developer tools, see the figure below
DevTools is a collection of many functions, and the toolbar at the top of the window is a grouping of these functions. At present, the latest Chrome mainly has 9 functional groups, corresponding to 9 panels:
☆Elements: In the Elements panel, you can view all page elements in the form of a DOM tree, and you can also edit these page elements WYSIWYG
☆Console: On the one hand, it is used to record the information of the page in the execution process (usually realized through various console statements), on the other hand it is used as a shell window to execute scripts and interact with page documents, DevTools, etc.
☆Sources: The Sources panel is mainly used to debug JavaScript in the page
☆Network: In the Network panel, you can view the detailed information of the resources requested through the network and the time-consuming requesting these resources.
☆Performance: In the Performance panel, you can view detailed information during the page loading process, such as when to start doing things, how long it takes, and so on. What is the difference between this and the above Network? In the Performance panel, you can not only see information about loading resources through the network, but also information about all aspects of page loading such as parsing JS, calculating styles, and redrawing.
☆Memory: The Memory panel mainly displays the memory distribution of page JS objects and associated DOM nodes.
☆Application: Record all resources loaded by the webpage, including storage information, cache information, and information such as pictures, fonts, scripts, and styles used on the page.
☆Security: used to detect the security of the face-to-face page.
☆Lighthouse: Google web page performance analysis tool.