打开 Chrome 开发者工具

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

您可以通过多种方式打开 Chrome 开发者工具。从这份全面的参考文档中选择您喜欢的方式。

您可以使用 Chrome 界面或键盘访问 DevTools：

• 通过 Chrome 中的下拉菜单。
• 借助专用快捷键，您可以打开 Elements、Console 或上次使用的面板。

此外，您还可以了解如何为每个新标签页自动打开开发者工具。

通过 Chrome 菜单打开开发者工具

如果您更喜欢界面，可以通过 Chrome 中的下拉菜单访问 DevTools。

打开“元素”面板以检查 DOM 或 CSS

如需进行检查，请右键点击网页上的元素，然后选择检查。

DevTools 会打开 Elements 面板，并在 DOM 树中选择相应元素。在 Styles 标签页中，您可以看到应用于所选元素的 CSS 规则。

从 Chrome 的主菜单中打开上次使用的面板

如需打开上次使用的 DevTools 面板，请点击地址栏右侧的 more_vert 按钮，然后依次选择更多工具 > 开发者工具。

或者，您也可以使用快捷键打开上一个面板。如需了解详情，请参阅下一部分。

使用快捷方式打开面板：元素、控制台或上一个面板

如果您更喜欢使用键盘，请根据您的操作系统在 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 快捷键可在 ink_selection 检查器模式下打开 Elements 面板。当您将鼠标悬停在页面上的元素上时，此模式会显示实用工具提示。您还可以点击任何元素，在 Elements（元素）> Styles（样式）标签页中查看其 CSS。

如需查看 DevTools 快捷键的完整列表，请参阅键盘快捷键。

在每个新标签页中自动打开 DevTools

从命令行运行 Chrome 并传递 --auto-open-devtools-for-tabs 标志：

1. 退出所有正在运行的 Chrome 实例。

   要点：此标志仅适用于您打开的第一个 Chrome 实例。如果此方法不起作用（例如在 Windows 上），请务必通过任务管理器终止所有驻留的 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 之前，系统会为每个新标签页自动打开开发者工具。

后续操作

成功：恭喜！您已成功掌握 Chrome 开发者工具的强大功能。

接下来，请观看以下视频，了解一些有用的快捷方式和设置，以便更快地浏览 DevTools。

如需获得更具实操性的学习体验，请参阅如何自定义 DevTools。