打开 Chrome 开发者工具

凯切·巴斯克斯
Kayce Basques
叶杰林
Jecelyn Yeen
索菲亚·埃梅利安诺娃
Sofia Emelianova

您可以通过多种方式打开 Chrome 开发者工具。从这个综合性参考中选择您最喜欢的方式。

您可以使用 Chrome 界面或键盘访问开发者工具:

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

从 Chrome 菜单打开开发者工具

如果您更喜欢使用界面,可以从 Chrome 中的下拉菜单访问开发者工具。

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

要进行检查,请右键点击网页上的相应元素,然后选择检查

Chrome 下拉菜单中的“检查”选项。

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

后续操作

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

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