Official document address

https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn#top_of_page

Chrome Developer Tools

Chrome Developer Tools is a set of Web development and debugging tools built into Google Chrome. Use developer tools to replay, debug and profile your website.

Note: Look for the latest version of Chrome developer tools, Chrome Canary always has the latest DevTools.

Open Chrome Developer Tools

• In the Chrome menu, select More Tools > Developer Tools.
• Right-click on the page element and select "Check".
• Use the shortcut Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac).

Understand panel

Device mode

Build a fully responsive, mobile-first web experience with the device model.

• Device mode
• Test response and device-specific visual Windows
• Analog sensors: geographic location and acceleration

Elements(Elements Panel)

Use the Elements panel to re-enact the layout and design of your website with free manipulation of DOM and CSS.

• Check and adjust your page
• Edit style
• Edit the DOM

Console(Console Panel)

During development, you can use the console panel to record diagnostic information. Or use it as a shell to interact with JavaScript on the page.

• Use console panel

Sources(Source panel)

In the Source panel, you can debug JavaScript with breakpoints. Or connect to local files through Workspaces and use developer tools to edit them in real time.

• Breakpoint debugging
• Debug obfuscation code

Network(Network Panel)

Use the Network panel to learn about requested and downloaded resource files and optimize your web page loading performance.

• Network panel foundation
• Understand resource timelines
• Network bandwidth limitation

Timeline

Using the Timeline panel, you can improve the runtime performance of the page by recording video. And explore the various events that happen during the life cycle of the website.

Profiles(Analysis Panel)

If you need more information than the Timeline panel provides, use the Configuration panel, for example, to track memory leaks.

Application(Resource Panel)

Use the Resources panel to examine all the resources loaded, including IndexedDB with Web SQL databases, local and session storage, cookies, application caches, images, fonts, and style sheets.

• Management data

Security(Security Panel)

Use the Security panel to debug mixed content issues, your certificate security risks and more.

• security

Instructions

Translated from: https://developers.google.com/web/tools/chrome-devtools/