自定义开发者工具

Sofia Emelianova
Sofia Emelianova

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

设置

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

请参阅打开设置偏好设置

深色主题

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

深色主题。

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

    深色主题命令。

  3. 或者,在 设置。 Settings(设置)> Preferences(偏好设置)> Appearance(外观)> Themes(主题)中设置主题。

动态主题

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

如需设置主题,请按以下步骤操作:

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

开发者工具会与“外观”中选择的颜色主题匹配。

抽屉式导航栏

抽屉式导航栏包含许多隐藏功能。

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

抽屉式导航栏

点击 更多工具。 更多工具以打开其他抽屉式导航栏标签页。

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

更改开发者工具位置

默认情况下,开发者工具会停靠在视口的右侧。您也可以将开发者工具固定在底部或左侧,或者将开发者工具从基座上取下。

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

  • 主菜单:打开 更多。 自定义和控制开发者工具,然后点击:
    • 从基座上取下。 从基座上取下单独的窗口
    • 固定到左侧 固定到左侧
    • 固定到底部。 固定到底部
    • 固定到右侧。 固定到右侧
  • 命令菜单

    1. 打开命令菜单
    2. 开始输入 dock,然后选择一个建议的选项:“停靠至底部”“左侧”“右侧”“取消停靠”或“恢复上一个停靠位置”。

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

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

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

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

要更改顺序,请点击并左右拖动以下任一项:

  • 面板。
  • 元素面板中的窗格,例如样式计算型布局等。
  • 来源面板中的窗格,例如页面工作区覆盖等。
  • 开发者工具底部的抽屉式导航栏标签页。

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

您的自定义标签顺序在开发者工具会话之间保持不变。

面板布局

默认情况下,开发者工具会根据窗口大小自动重新排列您的面板布局。您可以停用自动重新排列功能。前往设置 > 根据您的偏好设置更新面板布局

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

更改面板布局

更改开发者工具界面语言

请参阅 设置。 Settings > Preferences > Appearance > Language

要更改语言,请依次转到“设置”和“偏好设置”

同步设置

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

若要启用同步功能,请先开启 Chrome 同步。启用后,默认情况下会同步您的开发者工具设置。

Chrome 个人资料同步。

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

开发者工具同步设置

开发者工具会同步大部分设置,但工作区实验设备标签页中的设置以及一些其他常规设置除外。启用设置同步复选框的状态也会在设备之间同步。

例如,以下外观设置已同步,因此您在各种设备上都能获得一致的体验,而不需要再次重新定义相同的设置。

外观设置。

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

基座。

自定义键盘快捷键

请参阅设置 > 快捷方式

启用实验

请参阅设置 > 实验