chrome developer tools-00 overview

I recorded an explanation video and put it on station b
https://www.bilibili.com/video/BV1vu411U7FA
The video is clearer and more detailed than the article

1. Open method

• F12
• ctrl shift i（command option i）
• Right mouse button -> inspect
• More button in the upper right corner (three dots) -> More tools -> Developer tools

2. Zoom in and zoom out

• ctrl mouse wheel
• ctrl +/-，
  Reset ctrl 0,

mac Command +/-, reset command 0

3. Panel

Commonly used panels are element (dom on the left, style on the right), console (usually the drawer below), source (break point), network, application (local storage, localstorage, sessionstorage, cookie)

Open/close console drawer

• esc
• 'Open console drawer'/'hide console drawer' in the more buttons (three dots) in the upper right corner

Check element

Switch device (pc and mobile terminal) (mobile terminal: responsive, custom)

Switch language: Settings -> language,
Or: Settings->restore defaults and reload (restore defaults and reload) (all settings will be reset)
Disable javascript: Settings -> disable javascript

More:

Location,
hide/show console drawer
search (Search website resources (in the soucre panel))
// search element, network of other panels
// filter console、network
run command
// Some built-in commands, such as capture fullsize screenshot (the entire page screenshot), capture node screenshot (first select a node in the elements panel, and then run this command, you can take a screenshot of the selected node)
// Select a node in the elements panel, press the right mouse button, and there is also a capture node screenshot, which is more convenient
// When taking screenshots, pay attention to the scroll bar. Next time we talk about the elements panel