偏好设置

索菲亚·埃梅利安诺娃
Sofia Emelianova

使用 设置。 Settings > Preferences 配置开发者工具及其面板的外观和行为。此标签页列出了常规的自定义选项和特定于面板的选项。

如需设定偏好设置,请依次打开 设置。 Settings > Preferences,然后向下滚动到下文所述的某个部分。

“偏好设置”标签页中的“外观”部分。

要了解每项设置的作用,请在此页面中搜索设置的名称,然后展开相应设置的说明。

本参考通过以下图标表示不同的设置:

  • 复选框。 个复选框
  • 下拉列表下拉菜单。
  • 已弃用。 已弃用

要恢复默认偏好设置,请向下滚动到偏好设置标签页的末尾,然后点击恢复默认设置并重新加载

外观

本部分列出了用于自定义开发者工具外观的选项。

Themes 下拉菜单。 用于为开发者工具界面设置颜色主题。

主题: 将开发者工具主题从系统偏好设置更改为深色更改为浅色。 - 系统偏好设置 - 浅色 - 深色

面板布局 下拉菜单。:用于按面板中排列窗格。

会影响 Elements > Styles 和姊妹标签页,以及 Sources > Debugger 窗格。auto 选项会使布局取决于开发者工具的宽度。

面板布局: 将元素的面板布局从水平更改为垂直。 - 横向 - 纵向 - 自动

已弃用。 颜色格式 下拉菜单。元素 > 样式中设置 CSS 颜色值的格式。

开发者工具会自动将任何有效的颜色值转换为所选格式。

颜色格式: 在“样式”窗格中更改颜色格式。
  • 按原始格式设置
  • HEX:#dac0de
  • RGB:RGB(128 255 255)
  • HSL:hsl(300deg 80% 90%)

Language 下拉菜单。 用于设置开发者工具界面的语言区域。

如需应用此设置,请重新加载开发者工具。

语言: 中文的“设置”面板。 - 浏览器界面语言 - 其中一个语言区域选项,在此示例中为中文

复选框。 启用 Ctrl/Cmd + 0-9 快捷键切换面板可让您使用键盘打开面板。

此视频展示了如何使用相应的键盘快捷键在标签页之间切换。

复选框。 停用已暂停状态叠加层:当代码执行暂停时,会在视口中隐藏 已暂停在调试程序 播放和单步跳过按钮。 叠加层。

复选框。 每次更新后显示新变化会在每次 Chrome 更新后自动打开新变化抽屉式导航栏标签页。

“新变化”抽屉式导航栏标签。

来源

本部分列出了用于自定义来源面板的选项。

复选框。 通过在匿名脚本和内容脚本中搜索,您可以使用搜索标签页搜索所有已加载的 JavaScript 文件,包括 Chrome 扩展程序中的文件。

此视频展示了如何搜索扩展程序源文件中的文本。

复选框。 自动在边栏中显示文件可在 Editor 中的标签页之间切换时选择 Sources > Page 窗格中的文件。

这段视频展示了如何启用此选项后,当您在标签页之间切换时,Sources 面板会选择导航树中的文件。

复选框。 启用 JavaScript 源代码映射可让开发者工具找到已生成或缩减的 JavaScript 文件的来源。

“Sources”面板的状态栏中会显示指向缩减文件的链接。

复选框。 启用 Tab 键移动焦点会使 Tab 键。 Tab 键在开发者工具中移动焦点,而不是在 Editor 中插入 Tab 字符。

需要重新加载开发者工具。

此视频首先展示了使用 Tab 键插入的 Tab 字符。然后,当您启用此选项并重新加载开发者工具时,按 Tab 键即可移动焦点。

复选框。 检测缩进可将缩进设为在编辑器中打开的源文件中的缩进。

需要重新加载开发者工具。

本视频首先展示了默认缩进 8 个空格。之后,当您启用此选项时,它会替换源文件的默认缩进。

复选框。 自动补全功能可在编辑器中启用便捷建议。

首先,系统不会向此视频显示任何推荐内容。启用此选项后,Editor 会显示有关命令补全的建议。

复选框。编辑器中,方括号匹配浅红色下划线和高亮显示方括号、花括号或圆括号(不含成对)。

没有下划线的一对大括号。

复选框。 代码折叠可让您在编辑器中折叠和展开用大括号括起来的代码块。

需要重新加载开发者工具。

此视频展示了如何在启用此选项时折叠代码块。

显示空白字符 下拉菜单。 会在编辑器中显示空白字符。

需要重新加载开发者工具。选项用于执行以下操作:

  • All 将所有空白字符表示为点 (...)。此外,EditorTab 字符表示为行 ()。
  • 尾随浅红色突出显示行尾的空白字符。
显示空白字符: 已选择选项:“全部”和“结尾”。 - 无 - 全部 (`...`) - 尾随

复选框。 调试时以内嵌方式显示变量值会显示在执行暂停时赋值语句旁边的变量值。

在函数执行期间暂停的调试程序会在赋值语句旁边显示变量值。

复选框。 触发断点时将焦点置于来源面板会在包含暂停执行的断点的行中打开 Sources > Editor

此视频首先展示了在某个断点处暂停时 Sources 面板失焦的画面。然后,当您启用此选项时,开发者工具会在 Sources 面板中打开 Editor,并显示包含断点的代码行。

复选框。 启用 CSS 源代码映射可让开发者工具找到生成的 CSS 文件的来源(例如 .scss),并向您显示这些文件。

“Sources”面板会在导航树的“已编写”部分显示 .scss 文件。“元素”面板中的“样式”窗格会在 CSS 规则旁边显示指向 .scss 来源的链接。

复选框。 允许滚动超出文件末尾:可让您滚动到编辑器中的最后一行之外。

本视频展示了如何在启用此选项后滚动到文件末尾。

复选框。 允许开发者工具从远程文件路径加载资源(例如源映射关系)。为安全起见,此功能默认处于停用状态。

如果停用,开发者工具会将日志记录到类似以下内容的 Console 消息中:

在控制台中显示一条消息,用于告知出于安全考虑,系统禁止加载远程文件路径。

默认缩进 下拉菜单。 可让您选择 Tab 键。 Tab 键在 Editor 中插入的空格数。

默认缩进: 停用覆盖选项并将默认缩进从两个空格更改为 8,然后更改为 Tab 键。 - 2 个空格 - 4 个空格 - 8 个空格 - 制表符

以下示例展示了如何将默认缩进量依次设为 8 个空格和 Tab 字符。

元素

本部分列出了用于自定义元素面板的选项。

复选框。 显示用户代理 shadow DOM 将在 DOM 树中显示 shadow DOM 节点。

元素面板会显示 shadow DOM 节点。

复选框。 自动换行会换行 DOM 树中的长行,并将其换行到下一行。

元素面板会按字词来分隔长行,并将其换行到下一行。

复选框。 显示 HTML 注释可在 DOM 树中显示 HTML 注释。

“元素”面板会显示 HTML 注释。

复选框。检查。 检查模式下将鼠标悬停在视口中的某个元素上时,悬停时显示 DOM 节点会选择 DOM 树中的相应节点。

这个视频首先展示了 DOM 树中未选中的 DOM 节点。然后,当您启用此选项时,元素面板会在用户悬停鼠标时选择节点。

复选框。 显示详细检查提示:当您将鼠标悬停在某个元素上时,系统会在 检查。 检查模式下显示视口中的提示。

在检查模式下显示的详细提示。

复选框。 悬停时显示标尺:当您将鼠标悬停在 DOM 树中的元素上时,系统会在视口中显示标尺。

视口中显示的标尺。

复选框。 当您将鼠标悬停在 Styles 窗格中的属性上时,显示 CSS 文档提示会显示一条包含简短说明的提示。

点击了解详情链接即可查看相应媒体资源的 MDN CSS 参考文档

包含 CSS 属性文档的提示。

网络

本部分列出了用于自定义网络面板的选项。其中的大多数选项都与面板设置中的选项相同。

复选框。 保留日志网络面板中的保留日志相同。在网页加载过程中保存请求。

此视频首先展示了在页面重新加载时刷新的请求日志,然后在启用此选项后继续播放。

复选框。 记录网络日志Network 面板中的 记录网络日志。 记录网络日志相同。开始或停止在网络日志中记录请求。

“网络”面板中的“记录网络日志”按钮。

复选框。 启用网络请求屏蔽会屏蔽与网络请求屏蔽抽屉式导航栏中的格式匹配的请求。

此视频首先展示了相关请求并未被屏蔽。然后,在您启用此选项后,网络请求屏蔽抽屉式导航栏中的一种模式会屏蔽它们。

复选框。 停用缓存(当开发者工具打开时)Network 面板中的停用缓存相同。停用浏览器缓存。

停用缓存 复选框。

复选框。 颜色代码资源类型会根据网络日志的 Waterfall 列中的类型,以不同的颜色突出显示请求。

不带颜色编码和不带颜色编码的“Network”标签页上的 Waterfall 列。

复选框。 按框架对网络日志进行分组网络面板中的按框架分组相同。此选项会对由内嵌框架发起的请求进行分组。

包含按内嵌帧分组的请求的网络请求日志。

复选框。 在此网站上强制屏蔽广告会在开发者工具打开时屏蔽网页上检测到的广告

在启用了“已屏蔽的请求”过滤器的情况下,显示在“网络”面板中的与广告相关的网络请求。

性能

本部分列出了用于自定义效果面板的选项。

火焰图鼠标滚轮操作 下拉菜单。:可在您浏览火焰图时为鼠标滚轮指定滚动或缩放操作。

火焰图鼠标滚轮操作: 将火焰图的鼠标滚轮操作从滚动更改为缩放。 - 滚动 - 缩放

此示例显示了 Performance 面板中火焰图上的滚动和缩放鼠标滚轮操作。

控制台

本部分列出了用于自定义控制台的选项。大多数选项与控制台设置中的选项相同。

控制台和“设置”中的选项类似。

复选框。 隐藏网络消息会隐藏控制台中的网络消息。

本视频展示了如何在 设置。 设置控制台设置中使用此选项隐藏网络消息

复选框。 仅选定的上下文会使控制台仅显示与所选上下文(top、iframe、worker 或 extension)对应的消息。

本视频展示了如何在 设置。 设置控制台 > 设置中启用此选项,以及如何在控制台中选择上下文。

复选框。 日志 XMLHttpRequests 会使 Console 记录 XHR 和提取请求。

本视频展示了如何在 设置。 设置控制台 > 设置中启用此选项,并将 XHR finished loading 消息记录到控制台中。

复选框。 显示时间戳可让控制台在邮件旁边显示时间戳。

控制台中列出的带有时间戳的消息。

复选框。 根据历史记录自动补全功能可让控制台在您输入时为您提供之前运行的命令建议。

您可以在控制台 > 设置中找到相同选项。

带有“控制台历史记录”命令选项的自动补全下拉菜单。

复选框。 按 Enter 键时接受自动补全建议可让控制台在您按 Enter 键时接受自动补全下拉菜单中的所选建议。

本视频介绍了在启用此选项前后按 Enter 键分别会发生什么情况。

复选框。 将控制台中的相似邮件归为一组可让控制台将相似的邮件归为一组。

您可以在控制台 > 设置中找到相同选项。

控制台中的类似消息被归为一组。

复选框。 在控制台中显示 CORS 错误可让控制台显示其记录的 CORS 错误

您可以在控制台 > 设置中找到相同选项。

控制台会显示 CORS 错误。

复选框。 Eager 评估可让 Console 在您输入命令时显示输出预览。

您可以在控制台 > 设置中找到相同选项。

此视频展示了各种输出预览。

复选框。 将代码评估视为用户操作会将您在控制台中运行的任何命令转换为用户互动。

换言之,它会在评估时将 navigator.userActivation.isActive 设置为 true。您可以在控制台 > 设置中找到相同选项。

此视频展示了启用此选项前后 navigator.userActivation.isActive 的评估结果。

复选框。 自动展开 console.trace() 消息控制台会在记录这些消息时显示展开的 console.trace() 消息。

控制台中展开的 console.trace() 消息。

复选框。 在导航时保留日志可让控制台在每次导航时记录一条 Navigated to 消息,并在所有页面中保存日志。

您可以在控制台 > 设置中找到相同选项。

控制台会显示“已转到”消息,并保存不同页面的日志。

扩展程序

本部分列出了用于自定义 Chrome 开发者工具扩展程序的链接处理的选项。

链接处理 下拉菜单。 会设置一个选项,以在您点击源文件的链接时(例如在 Elements > Styles 窗格中)打开文件。

链接处理: 选择用于打开链接的选项。 - 自动。默认情况下,在 **Sources** 面板中打开文件。 - 可由开发者工具扩展程序添加的任意选项。

持久性

本部分列出了用于控制开发者工具如何保存您所做的更改的选项。

复选框。 启用本地替换可让开发者工具在网页加载过程中保留您对来源所做的更改。

如需了解详情,请参阅本地替换

调试程序

本部分列出了用于控制 Debugger 行为的选项。

复选框。 停用 JavaScript 可让您查看停用 JavaScript 时网页的外观和行为。

重新加载网页,看看网页在加载时是否以及如何依赖于 JavaScript。

停用 JavaScript 后,Chrome 会在地址栏中显示相应的 JavaScript 已停用。 图标,而开发者工具会在 Sources 旁边显示警告 警告。 图标。 地址栏中有一个图标,开发者工具中的“Source”旁边有一个警告图标。

复选框。 停用异步堆栈轨迹会在调用堆栈中隐藏异步操作的“完整故事”。

默认情况下,如果您使用的框架支持异步操作,Debugger 会尝试跟踪此类跟踪。调用堆栈中的异步操作。 如需了解详情,请参阅查看异步堆栈轨迹

全球

本部分列出了在开发者工具中具有全局效果的选项。

复选框。 当您点击用于打开新标签页的链接时,自动打开开发者工具会会打开开发者工具。即所有包含 target=_blank 的链接。

本视频首先介绍了如何点击链接并不使用开发者工具打开新标签页。然后,当您启用此选项时,系统会使用开发者工具打开一个新标签页。

复选框。 输入时搜索可让开发者工具在您输入搜索查询时“跳转”到第一条搜索结果。如果停用,则仅按 Enter 键时,开发者工具才会将您转到结果。

此视频首先展示了当您输入搜索查询时,开发者工具如何“跳转”。然后,当您启用此选项时,开发者工具会按 Enter 键将您转到第一个结果。

同步

通过此部分,您可以设置在设备之间同步设置。

复选框。 启用设置同步可让您在多台设备之间同步开发者工具设置。

如要使用此设置,请先启用 Chrome 同步功能。有关详情,请参阅同步设置