打开开发者工具 🌈
从 Chrome 菜单中打开开发者工具 🎈
-
右键点击网页上的相应元素，然后选择 检查（Inspect）
-
DevTools 会打开 Elements 面板，并在 DOM 树中选择元素。在 样式（Styles） 窗格中，您可以看到应用于所选元素的 CSS 规则。
打开上次使用的面板 🎈
使用快捷键打开开发者工具 🎈
| 操作系统 | 元素 | 控制台 | 您的上一个面板 |
|---|---|---|---|
| Windows 或 Linux | Ctrl + Shift + C | Ctrl + Shift + J | F12 Ctrl + Shift + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
- 快捷记忆：
- C 代表 CSS。
- J 表示 JavaScript。
- 我 指定您的选择。
在每个新标签页上自动打开开发者工具 🎈
从命令行运行 Chrome 🐾
-
从命令行运行 Chrome 并传递
--auto-open-devtools-for-tabs标志：- MacOS：
open -a "Google Chrome" --args --auto-open-devtools-for-tabs - Windows：
start chrome --auto-open-devtools-for-tabs - Linux：
google-chrome --auto-open-devtools-for-tabs
- MacOS：
-
在 windows 下，也可以在目标后加入上面的标志
-
注意：此标志仅适用于您打开的 第一个 Chrome 实例。如果它都行不通，例如在 Windows 上，请务必通过任务管理器终止所有剩余的 Chrome 进程。
