Web Inspector 参考Web Inspector 设置

目录

• 通用
• 元素
• 来源
• 控制台
• 黑盒
• 实验性

开发者通常有不同的偏好或工作流程，这些可能会显著影响他们的生产力。

Web Inspector 有多种设置，用于控制界面和工作流程的不同方面，所有这些设置在 Web Inspector 会话之间都会保留。

这些设置可以通过设置标签页进行更改

设置标签页本身又进一步划分为多个面板，每个面板都包含“类别”设置的输入。

通用

此面板包含在整个界面中使用的设置。

• 外观控制 Web Inspector 界面的外观。
• 首选缩进方式控制文本区域用于缩进的字符（空格 vs 制表符）。
• 制表符宽度控制制表符的宽度，以在等宽字体中渲染相同大小所需的空格数来衡量。这与 tab-size CSS 属性具有相同的效果。
• 缩进宽度决定每个缩进级别在等宽字体中渲染相同大小所需的空格数。
• 换行包含与文本区域中的换行相关的设置。
• 行宽自动换行控制行长于文本区域宽度时是水平溢出“屏幕外”（从而允许水平滚动）还是自动换行以防止溢出。
• 显示包含与文本区域中某些内容的显示方式相关的设置。
• 空白字符控制是否在文本区域中显示空白字符（每个空格显示 ·，每个制表符显示 —）。
• 不可见字符控制是否在文本区域中显示不可打印字符（例如回车符，即 \r 和/或 ↵）。
• 搜索包含与 Web Inspector 中搜索/过滤内容方式相关的设置。
• 区分大小写控制给定的搜索字符串是否区分大小写。
• 正则表达式控制给定的搜索字符串是否应解释为正则表达式。
• 从选中内容 ⇧⌘F控制当通过 ⇧ ⌘ F 调用时，全局搜索是否由当前选定的文本填充。
• 缩放控制 Web Inspector 界面的放大倍数。

元素

此面板包含与 DOM 调试和元素标签页相关的特定设置。

• DOM 树包含与DOM 树相关的设置。
• 弱化未渲染的节点控制检查页面中未实际渲染的 DOM 节点是否以灰色显示。
• 元素选择包含与使用页面覆盖进行元素选择相关的设置。
• 显示页面标尺和节点边框线控制在元素选择期间是否显示页面标尺和节点边框线。
• 详情侧边栏包含与详情侧边栏相关的设置。
• 显示独立的样式侧边栏控制样式面板是否显示为单独的列。
• CSS包含与 CSS 自省和调试工具相关的设置。
• 仅显示选定节点的更改控制详情侧边栏中的更改面板是显示使用 Web Inspector 对任何 CSS 规则所做的修改，还是仅显示与DOM 树中当前选定 DOM 节点匹配的修改。
• 在文档弹出窗口中显示属性语法控制在查看 CSS 属性文档时是否显示语法。

来源

此面板包含与 Web Inspector 处理资源方式相关的设置，以及影响资源调试工作流程的设置。

• 调试包含与资源（例如 JavaScript 和 CSS）调试体验相关的设置。
• 暂停时显示作用域链控制来源标签页中详情侧边栏中的作用域链面板是否在JavaScript 执行暂停时自动显示。
• 源映射包含与源映射相关的设置。
• 启用源映射控制 Web Inspector 是否自动为其知道的资源获取源映射。
• 图像包含与图像在 Web Inspector 中如何显示相关的设置。
• 显示透明度网格控制 Web Inspector 是否在图像后面绘制棋盘格背景，以帮助可视化透明内容。

控制台

此面板包含与控制台相关的设置，以及控制是否将某些类型的信息从被检查目标记录到控制台的控件。

• 保存结果别名允许您为控制台中保存的值设置备用前缀。
• 跟踪包含与 console.trace 相关的设置。
• 自动展开决定 console.trace 消息在控制台中首次显示时是否应自动展开。
• WebRTC 日志控制 WebKit 记录到控制台中与 WebRTC 相关的信息量。
• 媒体日志控制 WebKit 记录到控制台中与媒体内容（如 <video>）相关的信息量。
• MSE 日志控制 WebKit 记录到控制台中与媒体源扩展（Media Source Extensions）相关的信息量。

黑盒

此面板包含与脚本黑盒化相关的设置，黑盒化是指能够指示 JavaScript 调试器永远不要在任何给定脚本中暂停 JavaScript 执行。

欲了解更多信息，请阅读脚本黑盒化。

实验性

此面板包含控制开发中功能的设置，通常包括：

• 对整体界面的通用更改
• 全新的功能或工作流程，通常在自己的标签页或侧边栏面板中
• 重新设计的系统或调试工具，与现有工具并存或作为现有工具的增强

请记住，这些功能是实验性的，即使在Safari 技术预览的后续版本之间也可能发生变化。