偏好设置

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

外观

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

主题: 将 DevTools 主题从系统偏好设置更改为深色主题,再更改为浅色主题。
  • 系统偏好设置
  • 浅色
  • 深色

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

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

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

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

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

来源

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

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

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

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

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

需要重新加载 DevTools。

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

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

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

需要重新加载 DevTools。

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

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

  • 全部会将所有空白字符标记为圆点 (...)。此外,编辑器会将制表符字符标记为线条 ()。
  • 跟踪浅红色突出显示行尾的空白字符。
显示空格字符: 所选选项:“全部”和“尾随”。
  • 全部(... 个)
  • 跟踪

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

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

“来源”面板中美化输出的代码。
Sources 面板会在导航树的“Authored”(已编写)部分显示 .scss 文件。“Elements”面板中的“Styles”窗格会在 CSS 规则旁边显示指向 .scss 源的链接。

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

控制台中会显示一条消息,通知您出于安全考虑,禁止从远程文件路径加载。
默认缩进: 停用了替换选项,并将默认缩进从两个空格更改为八个空格,然后更改为 Tab 键。
  • 2 个空格
  • 4 个空格
  • 8 个空格
  • 制表符

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

元素

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

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

网络

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

保留日志相同。跨页面加载保存请求。

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

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

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

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

按帧分组相同。此选项将由内嵌框架发起的请求分组。

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

性能

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

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

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

控制台

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

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

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

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

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

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

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

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

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

扩展程序

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

链接处理: 选择要用来打开链接的选项。
  • 自动。默认情况下,在来源面板中打开文件。
  • 可以通过开发者工具扩展程序添加的任意选项。

持久性

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

Debugger

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

停用 JavaScript 后网页的外观和行为。

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

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

地址栏中的图标,以及开发者工具中的“Sources”旁边的警告图标。

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

调用堆栈中的异步操作。

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

全球

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

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

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

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

同步

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