偏好设置

Sofia Emelianova

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

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

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

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

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

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

外观

本部分列出了用于自定义 DevTools 外观的选项。

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

主题：

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

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

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

面板布局：

• 横向
• 类别
• 自动

语言 用于设置 DevTools 界面的语言区域。

如需应用此设置，请重新加载 DevTools。

语言：

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

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

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

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

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

来源

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

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

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

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

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

启用 JavaScript 源代码映射可让 DevTools 找到生成的或缩减的 JavaScript 文件的来源。

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

启用 Tab 键移动焦点可让 Tab 键在开发者工具中移动焦点，而不是在 Editor 中插入 Tab 字符。

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

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

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

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

需要重新加载 DevTools。

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

该视频首先展示了默认缩进（8 个空格）。然后，当您启用此选项时，它会替换默认的缩进，改为使用源文件的缩进。

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

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

自动中括号关闭功能会在您输入左括号或标记时自动添加右括号或标记。

此视频展示了在启用自动括号闭合功能之前和之后输入左括号的情况。

括号匹配会在编辑器中以浅红色突出显示方括号、花括号或圆括号（不含成对的括号）。

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

需要重新加载 DevTools。

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

显示空格字符 会在编辑器中显示空格字符。

需要重新加载 DevTools。选项的作用如下：

• 全部会将所有空白字符标记为圆点 (...)。此外，编辑器会将制表符字符标记为线条 (—)。
• 跟踪以浅红色突出显示行尾的空白字符。

显示空格字符：

• 无
• 全部（... 个）
• 跟踪

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

触发断点时聚焦来源面板会在暂停执行的断点所在的行打开 Sources > Editor。

这段视频首先展示了在断点处暂停时 Sources 面板失焦。然后，当您启用此选项时，DevTools 会在 Sources 面板中打开 Editor，并显示包含断点的代码行。

自动美化缩减过大小的源代码，使这些源代码可读。

美化后，编辑器可能会将单个长代码行显示为多行代码，并在前面加上 - 以指明它是代码行续接。

启用 CSS 源映射可让 DevTools 查找生成的 CSS 文件的来源（例如 .scss），并将其显示给您。

要点：只有在源映射可用时，此选项才可用。

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

允许滚动范围超出文件末尾可让您在编辑器中滚动到最后一行以外的位置。

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

允许 DevTools 从远程文件路径加载资源（比如源映射关系）。出于安全考虑，此功能默认处于停用状态。

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

如果此政策已停用，开发者工具会记录到与以下内容类似的控制台消息中：

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

要点： 检测缩进会替换此设置，并将缩进设置为源文件的缩进。需要重新加载开发者工具。 启用通过 Tab 键移动焦点功能会替换 Tab 键。它会移动焦点，而不是插入字符。 显示空格字符：全部：您可以将空格字符显示为圆点 (...)，将制表符显示为线条 (—)。

默认缩进：

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

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

元素

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

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

换行会在 DOM 树中换行长行，并将其换行到下一行。

显示 HTML 注释：可在 DOM 树中显示 HTML 注释。

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

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

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

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

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

点击了解详情链接可前往该属性的 MDN CSS 参考文档。

网络

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

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

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

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

启用网络请求屏蔽会屏蔽与网络请求屏蔽抽屉中的模式匹配的请求。

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

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

允许生成包含敏感数据的 HAR 会在下载 导出 HAR 按钮中添加选项，以便您选择是否导出敏感数据（经过脱敏处理）。

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

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

按框架将网络日志分组与网络面板中的按帧分组相同。此选项将由内嵌框架发起的请求分组。

在此网站上强制屏蔽广告：当开发者工具处于打开状态时，系统会阻止在网页上检测到检测到的广告。

性能

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

火焰图鼠标滚轮操作 用于在您浏览火焰图时将滚动或缩放操作分配给鼠标滚轮。

火焰图鼠标滚轮操作：

• 滚动
• 缩放

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

控制台

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

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

此视频介绍了如何在 设置和管理中心设置中使用此选项隐藏网络消息。

仅指定上下文可让控制台仅显示所选上下文（顶部、iframe、工作器或扩展程序）的消息。

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

记录 XMLHttpRequest 会使 Console 记录 XHR 和提取请求。

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

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

根据历史记录自动补全会在您输入内容时，让控制台提供您之前运行的命令建议。

您可以在管理中心 > 设置中找到相同的选项。

按 Enter 键时接受自动补全建议：启用此设置后，当您按 Enter 键时，控制台会接受自动补全下拉菜单中所选的建议。

此视频展示了在启用此选项前后按 Enter 键的效果。

在控制台中对相似消息进行分组会让控制台将相似消息归为一组。

您可以在管理中心 > 设置中找到相同的选项。

在控制台中显示 CORS 错误会使控制台显示其记录的 CORS 错误。

您可以在管理中心 > 设置中找到相同的选项。

提前评估会让 Console 在您输入命令时显示输出的预览。

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

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

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

也就是说，它会在求值时将 navigator.userActivation.isActive 设置为 true。您也可以在控制台 > 设置中找到相同的选项。

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

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

导航时保留日志可让 Console 在每次导航时记录一条 Navigated to 消息，并在所有页面中保存日志。

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

扩展程序

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

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

链接处理：

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

持久性

本部分列出了用于控制 DevTools 如何保存您所做的更改的选项。

启用本地替换后，开发者工具会在页面加载过程中保留您对来源所做的更改。

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

Debugger

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

通过停用 JavaScript，您可以查看停用 JavaScript 后网页的外观和行为。

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

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

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

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

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

全球

本部分列出了在 DevTools 中具有全局影响的选项。

为弹出式窗口自动打开 DevTools：当您点击会打开新标签页的链接时，系统会打开 DevTools。即与 target=_blank 相关的所有链接。

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

边输入边搜索：当您输入搜索查询时，DevTools 会“跳转”到第一个搜索结果。如果停用此政策，开发者工具只会在您按 Enter 键时转到结果。

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

同步

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

启用设置同步可让您在多部设备上同步 DevTools 设置。

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