打开 Chrome 开发者工具

您可以通过多种方式打开 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 标志：

1. 退出任何正在运行的 Chrome 实例。

2. 运行您喜爱的终端或命令行应用。

3. 根据您的操作系统，运行以下命令：

• 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 之前，系统会为每个新标签页自动打开开发者工具。

后续操作

接下来，观看下面的视频，了解一些有用的快捷键和设置，以便更快地在开发者工具中导航。

如需获得更多实操学习体验，请参阅如何自定义开发者工具。