您可以通过多种方式打开 Chrome 开发者工具。从这份综合性参考资料中选择您最喜爱的方式。
您可以使用 Chrome 界面或键盘访问开发者工具:
- 通过 Chrome 中的下拉菜单创建。
- 使用可打开元素、控制台或您上次使用的面板的专用快捷方式。
此外,了解如何为每个新标签页自动打开开发者工具。
从 Chrome 菜单打开开发者工具
如果您更喜欢使用界面,可以从 Chrome 中的下拉菜单访问开发者工具。
打开“元素”面板以检查 DOM 或 CSS
如需检查,请右键点击网页上的相应元素,然后选择检查。
开发者工具会打开元素面板,并选择 DOM 树中的元素。在样式窗格中,您可以看到应用于所选元素的 CSS 规则。
从 Chrome 主菜单打开上次使用过的面板
如需打开最后一个开发者工具面板,请点击地址栏右侧的 按钮,然后依次选择 More Tools > Developer Tools。
或者,您也可以使用快捷方式打开最后一个面板。请参阅下一部分了解详情。
使用以下快捷键打开面板:“元素”“控制台”或“上次使用的面板”
如果您想使用键盘,可以按 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 之前,系统会为每个新标签页自动打开开发者工具。
后续操作
接下来,观看下面的视频,了解一些有助于在开发者工具中快速导航的实用快捷键和设置。
如需获得更多实操学习机会,请参阅如何自定义开发者工具。