自定义开发者工具

Sofia Emelianova
Sofia Emelianova

本页列出了自定义 Chrome 开发者工具的方法。

设置

设置 >偏好设置包含许多用于自定义开发者工具的选项。

请参阅打开设置偏好设置

深色主题

您可以在设置命令菜单中启用深色主题。

深色主题。

  1. 打开命令菜单
  2. 开始输入 dark,选择切换到深色主题命令,然后按 Enter 键运行该命令。

    深色主题命令。

  3. 或者,你也可以在 设置 > 中设置你的主题偏好设置 >外观 >主题

动态主题

开发者工具可以自动与 Chrome 的配色主题相匹配。

如需设置主题,请执行以下操作:

  1. 打开新的标签页,然后点击右下角的 自定义 Chrome
  2. 外观中,通过 更改主题选择主题,或选择调色板。

开发者工具与在“Appearance”中选择的颜色主题一致。

抽屉式导航栏

抽屉包含许多隐藏功能。

Esc 可打开或关闭抽屉式导航栏。

抽屉。

点击 更多工具可打开其他抽屉 标签页。

用于打开其他抽屉式导航栏标签页的“更多工具”按钮。

更改开发者工具位置

默认情况下,开发者工具停靠在视口的右侧。您还可以将开发者工具停靠在底部或左侧,或者取消停靠在单独的窗口中。

您可以通过以下两种方式更改开发者工具的位置:

  • 主菜单:打开 自定义和控制 DevTools,然后点击:
    • 取消停靠至单独的窗口
    • 停靠到左侧
    • 固定到底部
    • 固定到右侧
  • 命令菜单

    1. 打开命令菜单
    2. 开始输入 dock,然后选择一个建议的选项:固定到底部、左侧、右侧、取消固定或恢复上次固定位置。

命令菜单中建议的停靠选项。

如要使用键盘快捷键开启/关闭恢复上一个停靠位置,请按:

  • 在 Linux 或 Windows 上:Ctrl+Shift+D
  • 在 macOS 上:Command+Shift+D

对面板、标签页和窗格重新排序

如需更改排序,请点击并向左或向右拖动以下任一元素:

  • 位于开发者工具顶部的面板。
  • 元素面板中的窗格,例如样式计算型布局等。
  • Sources 面板中的窗格,例如 PageWorkspaceOverrides 等。
  • DevTools 底部的抽屉式导航栏标签页。

此外,您还可以将面板和标签页向上和向下移动抽屉式导航栏中。为此,请右键点击相应面板或标签页,然后从下拉菜单中选择移至顶部移至底部

您的自定义标签顺序在 DevTools 会话间保持不变。

面板布局

默认情况下,DevTools 会根据窗口大小自动重新排列面板布局。您可以停用自动重新排列功能。依次转至 设置 >偏好设置 >外观,并根据您的偏好更新面板布局

例如,当屏幕尺寸较小时,元素面板中的“样式”窗格将从侧边移至底部。如果您希望样式窗格始终位于侧边,请将面板布局更改为垂直

更改面板布局

更改开发者工具界面语言

查看 设置 >偏好设置 >外观 >语言

如需更改语言,请依次前往“设置”和“偏好设置”

同步设置

您可以在多部设备之间同步开发者工具设置。

如需启用同步功能,请先开启 Chrome 同步。启用后,您的开发者工具设置会默认同步。

Chrome 个人资料同步。

您可以使用 Settings > 单独启用或停用开发者工具设置同步同步 > 启用设置同步复选框。

开发者工具同步设置

除了 WorkspaceExperimentsDevices 标签页中的设置以及一些其他常规设置之外,DevTools 会同步大多数设置。启用设置同步复选框的状态也会在不同设备之间同步。

例如,系统会同步以下外观设置,以便您在不同设备上获得一致的体验,而无需重新定义相同的设置。

外观设置。

不过,停靠设置不会同步,因为开发者在不同网站上调试时会有不同的停靠偏好设置。

基座。

自定义键盘快捷键

请参阅设置 >快捷方式

启用实验

请参阅设置 > 实验