您可以通过多种方式打开 Chrome 开发者工具。从这个综合性参考中选择您最喜欢的方式。
您可以使用 Chrome 界面或键盘访问开发者工具:
- 通过 Chrome 中的下拉菜单。
- 使用可打开元素、控制台或您上次使用的面板的专用快捷方式。
此外,您还可以了解如何为每个新标签页自动打开开发者工具。
从 Chrome 菜单打开开发者工具
如果您更喜欢使用界面,可以从 Chrome 中的下拉菜单访问开发者工具。
打开“元素”面板以检查 DOM 或 CSS
要进行检查,请右键点击网页上的相应元素,然后选择检查。
开发者工具会打开 Elements 面板,然后选择 DOM 树中的相应元素。在 Styles 窗格中,您可以看到应用于所选元素的 CSS 规则。
通过 Chrome 主菜单打开您上次使用的面板
要打开最后一个开发者工具面板,请点击地址栏右侧的 按钮,然后依次选择更多工具 > 开发者工具。
或者,您也可以使用快捷方式打开最后一个面板。如需了解详情,请参阅下一部分。
使用快捷键打开面板:“元素”“控制台”或“您上次使用的面板”
如果您想使用键盘,可以按 Chrome 中的快捷键,具体视您的操作系统而定:
操作系统 | 元素 | 控制台 | 您的上一个面板 |
---|---|---|---|
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。
- I 表示您的选择。
快捷键 C 会在 检查器模式下打开 Elements 面板。当您将鼠标悬停在页面上的元素上时,此模式会显示有用的提示。您还可以点击任何元素,在元素 > 样式窗格中查看其 CSS。
如需查看开发者工具快捷键的完整列表,请参阅键盘快捷键。
在每个新标签页上自动打开开发者工具
从命令行运行 Chrome 并传递 --auto-open-devtools-for-tabs
标志:
退出任何正在运行的 Chrome 实例。
运行您喜爱的终端或命令行应用。
根据您的操作系统,运行以下命令:
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
在您关闭 Chrome 之前,系统会为每个新标签页自动打开开发者工具。
后续操作
接下来,观看下面的视频,了解一些有用的快捷键和设置,以便更快地在开发者工具中导航。
如需获得更多实操学习体验,请参阅如何自定义开发者工具。