偏好设置

Sofia Emelianova

通过 设置 > 偏好设置，配置开发者工具及其面板的外观和行为。此标签页列出了常规自定义选项和面板专属选项。

如需设置偏好设置，请打开 设置 > 偏好设置，然后滚动到下文所述的某个部分。

如需了解每项设置的作用，请在此页面中搜索设置名称，然后点击 add_circle 展开其说明。

此参考文档使用以下图标表示不同的设置：

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

如需恢复默认偏好设置，请滚动到偏好设置标签页的末尾，然后点击恢复默认设置并重新加载。

外观

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

主题 用于为开发者工具界面设置色彩主题。

主题：

• 系统偏好设置
• 浅色
• 深色

面板布局 用于在面板中排列窗格。

影响元素 > 样式和同级标签页，以及来源 > 调试程序窗格。自动选项会使布局取决于开发者工具宽度。

面板布局：

• 横向
• 类别
• 自动

语言 用于设置开发者工具界面的语言区域。

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

语言：

• 浏览器界面语言
• 语言区域选项之一，在本例中为中文

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

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

停用暂停状态叠加层会在代码执行暂停时隐藏视口中的在调试程序中暂停 叠加层。

每次更新后显示“新变化”会在每次 Chrome 更新后自动打开新变化抽屉式标签页。

来源

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

在匿名和内容脚本中搜索可让您使用搜索标签页搜索所有已加载的 JavaScript 文件，包括 Chrome 扩展程序中的文件。

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

在边栏中自动显示文件：当您在编辑器中的标签页之间切换时，在来源 > 页面窗格中选择文件。

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

启用 JavaScript 源代码映射可让开发者工具找到生成的或缩减大小的 JavaScript 文件的源代码。

要点：仅当源映射可用时，此选项才有效。 Sources 面板还会在状态栏中放置一个指向所生成或缩减大小的文件的链接。

启用“按 Tab 可移动焦点”可让 Tab 键在开发者工具中移动焦点，而不是在编辑器中插入 Tab 字符。

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

要点：此设置会使 默认缩进失效，因为在这种情况下， Tab 键不会插入字符。

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

检测缩进会将缩进设置为在编辑器中打开的源文件中的缩进。

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

要点：此设置会覆盖 默认缩进。在以下视频中，默认缩进设置为 8 个空格，而文件中检测到的缩进为 2 个空格。 显示空白字符：全部可让您将空白字符显示为点 (...)，将制表符显示为线 (—)。

此视频首先展示了默认的 8 个空格缩进。启用此选项后，它会覆盖默认缩进，改为使用源文件的缩进。

自动补全功能可在编辑器中提供实用的建议。

此视频首先不会显示任何建议。然后，当您启用此选项时，编辑器会显示命令补全建议。

自动添加右括号会在您输入左括号或左标记时自动添加右括号或右标记。

此视频展示了在启用自动补全括号功能之前和之后输入左括号的效果。

括号匹配功能会在编辑器中用浅红色下划线和突出显示没有配对的方括号、大括号或圆括号。

代码折叠功能可让您在编辑器中折叠和展开大括号中的代码块。

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

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

显示空白字符 在编辑器中显示空白字符。

需要重新加载开发者工具。选项的用途如下：

• 全部会将所有空白字符表示为点 (...)。此外，编辑器会将 Tab 字符表示为一条线 (—)。
• Trailing（尾随）会以浅红色突出显示行尾的空白字符。

显示空白字符：

• 无
• 全部 (...)
• 尾随

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

触发断点后聚焦于“来源”面板会在来源 > 编辑器中打开暂停执行的断点所在的行。

此视频首先展示了在断点处暂停时来源面板未聚焦的情况。然后，当您启用此选项时，开发者工具会在来源面板中打开编辑器，并显示包含断点的代码行。

自动美观输出缩减过大小的源代码可使这些源代码更易于阅读。

美观输出后，编辑器可能会将一行长代码显示为多行，并在前面加上 - 以表示这是续行。

启用 CSS 源代码映射可让开发者工具找到生成的 CSS 文件（例如 .scss）的源代码，并向您显示这些源代码。

要点：仅当源映射可用时，此选项才有效。

• Sources（源代码）面板会在导航树的 Authored（编写的代码）部分下显示 .scss 文件。
• Elements > Styles 窗格会在应用于元素的 CSS 规则旁边显示指向来源的链接。

允许滚动到文件末尾之后可让您在编辑器中滚动到最后一行之后。

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

允许开发者工具从远程文件路径加载资源（比如源映射关系）。为安全起见，此功能默认处于停用状态。

注意：远程文件路径存在安全漏洞。最好仅在您了解后果的情况下使用此选项。

如果停用，开发者工具会将类似以下内容的消息记录到控制台：

默认缩进 ：可让您选择在编辑器中按 Tab 键时插入的空格数。

要点：检测缩进会覆盖此设置，并将缩进设置为源文件的缩进。需要重新加载开发者工具。 启用“按 Tab 键可移动焦点”会覆盖 Tab 键。它会移动焦点，而不是插入字符。 显示空白字符：全部可让您将空白字符显示为点 (...)，将制表符显示为线 (—)。

默认缩进：

• 2 个空间
• 4 个空格
• 8 个空格
• 制表符

此示例展示了如何先将默认缩进设置为 8 个空格，然后再设置为一个 Tab 字符。

元素

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

显示用户代理 shadow DOM 会在 DOM 树中显示 shadow DOM 节点。

自动换行会拆分 DOM 树中的长行，并将其换行到下一行。

显示 HTML 注释会在 DOM 树中显示 HTML 注释。

悬停时显示 DOM 节点：在 检查模式下，当您将鼠标悬停在视口中的某个元素上时，系统会在 DOM 树中选择相应的节点。

此视频首先展示了 DOM 树中未选择 DOM 节点的情况。然后，当您启用此选项后，元素面板会在悬停时选择节点。

显示详细检查提示：在 检查模式下，当您将鼠标悬停在某个元素上时，系统会在视口中显示提示。

悬停时显示标尺：当您将鼠标悬停在 DOM 树中的元素上时，在视口中显示标尺。

显示 CSS 文档提示：当您将鼠标悬停在样式窗格中的某个属性上时，系统会显示一个包含简短说明的提示。

了解详情链接会将您转到该属性的 MDN CSS 参考文档。

网络

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

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

此视频首先展示了在重新加载页面时刷新请求日志，然后在启用此选项时保留请求日志。

录制网络日志与网络面板中的 录制网络日志相同。开始或停止在网络日志中记录请求。

启用网络请求屏蔽功能会屏蔽与网络请求屏蔽抽屉式导航栏中的模式匹配的请求。

此视频首先展示了请求未被屏蔽。然后，在您启用此选项后，网络请求屏蔽抽屉式导航栏中的模式会屏蔽这些请求。

停用缓存（在开发者工具已打开时）与网络面板中的停用缓存相同。停用浏览器缓存。

允许生成包含敏感数据的 HAR 会向下载导出 HAR 按钮添加选项，让您在导出时选择是否包含敏感数据（已清理）。

敏感数据是指 Cookie、Set-Cookie 和 Authorization 标头中的数据。

Color-code resource types（用颜色标记资源类型）会根据请求类型，在网络日志的 Waterfall（瀑布图）列中以不同颜色突出显示请求。

按框架对网络日志分组与网络面板中的按框架分组相同。此选项会将内嵌框架发起的请求归为一组。

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

性能

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

火焰图鼠标滚轮操作 ：在您浏览火焰图时，为鼠标滚轮分配滚动或缩放操作。

火焰图鼠标滚轮操作：

• 滚动
• 缩放

此示例展示了在性能面板中的火焰图上执行的滚动和缩放鼠标滚轮操作。

控制台

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

隐藏网络消息：在控制台中隐藏网络消息。

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

仅限已选择的上下文会使控制台仅显示所选上下文（顶部、iframe、工作器或扩展程序）的消息。

此视频介绍了如何在 Settings（设置）和 Console > Settings（控制台 > 设置）中启用此选项，以及如何在 Console（控制台）中选择上下文。

记录 XMLHttpRequest 会使控制台记录 XHR 和提取请求。

此视频展示了如何在 Settings（设置）和 Console > Settings（控制台 > 设置）中启用此选项，并将 XHR finished loading 消息记录到 Console（控制台）。

显示时间戳可让控制台在消息旁边显示时间戳。

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

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

按 Enter 键时接受自动补全建议：当您按 Enter 键时，控制台会接受自动补全下拉菜单中选定的建议。

此视频展示了在启用此选项之前和之后按 Enter 键时会发生什么情况。

在控制台中将相似消息分为一组可让控制台将相似消息分为一组。

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

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

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

即时评估功能会在您输入命令时让控制台显示输出预览。

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

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

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

换句话说，它会在评估时将 navigator.userActivation.isActive 设置为 true。您可以在控制台 > 设置中找到相同的选项。

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

自动展开 console.trace() 消息可让控制台在记录 console.trace() 消息时显示展开的消息。

Preserve log upon navigation（在导航时保留日志）会使控制台在每次导航时记录 Navigated to 消息，并保存所有页面的日志。

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

扩展程序

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

链接处理 用于设置一个选项，以便在您点击指向源文件的链接（例如在 Elements > Styles 窗格中）时打开文件。

链接处理：

• 自动。默认在来源面板中打开文件。
• 可由开发者工具扩展程序添加的任意选项。

持久性

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

启用本地替换可让开发者工具在网页加载时保留您对源代码所做的更改。

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

Debugger

本部分列出了用于控制调试程序行为的选项。

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

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

停用 JavaScript 后，Chrome 会在地址栏中显示相应的 图标，而开发者工具会在来源旁边显示警告 图标。

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

默认情况下，如果您使用的框架支持跟踪异步操作，调试程序会尝试跟踪此类操作。

如需了解详情，请参阅查看异步堆栈轨迹。

全球

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

为弹出式窗口自动打开开发者工具：当您点击会在新标签页中打开的链接时，系统会自动打开开发者工具。即所有包含 target=_blank 的链接。

此视频首先展示了如何在 *不* 使用开发者工具的情况下点击链接并打开新标签页。然后，当您启用此选项时，系统会打开一个新标签页，其中包含开发者工具。

边输入边搜索可让开发者工具在您输入搜索查询时“跳转”到第一个搜索结果。如果停用，则只有在您按 Enter 键时，开发者工具才会带您前往相应结果。

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

同步

您可以在此部分中设置设备之间的设置同步。

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

如需使用此设置，请先启用 Chrome 同步。如需了解详情，请参阅同步设置。