Web Inspector 重新设计

自我们上次更新 Web Inspector 以来，已经过去了九个月，我们有很多很酷的事情可以聊聊。如果您勤奋地使用夜间构建版本中的 Web Inspector，您可能已经看到了一些改进，而其他一些细微的变化可能没有被注意到。

Web Inspector 的一些改进是由 WebKit 社区成员贡献的。我们真诚地希望让整个社区参与进来，将它打造成最好的 Web 开发工具。记住，Web Inspector 的大部分是用 HTML、JavaScript 和 CSS 编写的，因此很容易开始进行修改和改进。

重新设计的界面

首先也是最重要的一点，Web Inspector 现在采用了新的设计，将信息组织成面向任务的分组——由工具栏中的图标表示。工具栏项目（元素、资源、脚本、性能和数据库）以您将在相应面板中处理的基本项目命名。

控制台

现在可以从任何面板访问控制台。与其他面板不同，控制台不只用于一项任务——它可能在检查 DOM、调试 JavaScript 或分析 HTML 解析错误时使用。控制台切换按钮位于状态栏中，点击它会使控制台从 Web Inspector 底部动画进出。控制台也可以通过 Escape 键切换。

错误和警告计数现在显示在状态栏的右下角。点击这些计数也会打开控制台。

除了控制台的视觉变化之外，我们还通过添加自动补全和 Tab 补全大大提高了可用性。当您输入表达式时，会自动建议属性名。如果存在多个具有相同前缀的属性，按 Tab 键将在它们之间循环。按右箭头键将接受当前建议。如果只有一个匹配的属性，按 Tab 键也会接受当前建议。

Keishi Hattori (服部慶士)，东京大学（東京大学）的一名学生，将此领域作为暑期项目来攻克，他极大地改善了我们与 Firebug 命令行和 window.console API 的兼容性。

元素面板

元素面板在很大程度上与之前的 DOM 视图相同——至少在视觉上是这样。在底层，我们进行了许多更改，并将所有内容统一到一个 DOM 树中。

• 深入子文档——展开框架或对象元素将显示该元素内部文档的 DOM 树。
• 自动更新——当被检查页面中添加或移除节点时，DOM 树将自动更新。
• 检查点击的元素——启用新的检查模式，您可以悬停在页面上找到要检查的节点。点击页面中的节点将在元素面板中将其聚焦并关闭检查模式。此功能由 Matt Lilek 贡献。
• 临时禁用样式属性——将鼠标悬停在可编辑的样式规则上将显示复选框，允许您禁用单个属性。

  

• 样式属性编辑——双击编辑样式属性。删除所有文本将删除该属性。输入或粘贴多个属性将添加新属性。
• 数字样式值步进——编辑带有数字的样式属性值时，您可以使用向上或向下箭头键增加或减小数字。按住 Alt/Option 键将以 0.1 为步长，而按住 Shift 键将以 10 为步长。

  

• DOM 属性编辑——双击编辑 DOM 元素属性。输入或粘贴多个属性将添加新属性。删除所有文本将删除该属性。
• DOM 属性编辑——双击在属性窗格中编辑 DOM 属性。如果允许，删除所有文本将删除该属性。
• 指标编辑——双击编辑任何 CSS 盒模型指标。
• 位置指标——指标窗格现在包含绝对、相对和固定定位元素的位置信息。

资源面板

资源面板是之前网络面板的增强版。它有一个类似时间线瀑布图的视图，但为了使其更实用，我们做了很多工作。

• 按大小排序——点击侧边栏中的“大小”以快速查看下载的最大资源。
• 多种排序选项——时间图表提供了多种排序方法，包括延迟和持续时间。
• 延迟条——时间图表现在使用较浅的颜色显示条形图中的延迟。这是从发起请求到服务器首次响应之间的时间。
• 统一资源视图——点击侧边栏中的资源将显示从网络拉取的数据（不会再次下载），包括请求和响应头。
• 查看 XHR——时间和大小图表也显示 XMLHttpRequests。在侧边栏中选择 XHR 资源将显示 XHR 数据和头。

脚本面板

之前的独立 Drosera JavaScript 调试器 已被集成到 Web Inspector 中的新 JavaScript 调试器取代。新的集成 JavaScript 调试器比 Drosera 快得多，并且应该更加方便。

在脚本面板中，您可以查看被检查页面的所有脚本资源。点击脚本的行号区域将为该行代码设置一个断点。提供了标准的暂停、恢复和单步执行代码的控制。暂停时，您将在右侧侧边栏中看到当前的调用堆栈和作用域内变量。

Web Inspector 在作用域内变量方面有一个独特的功能：它可以单独显示闭包、“with”语句和事件相关的作用域对象。这让您可以更清楚地了解变量的来源以及为什么可能会出错（甚至意外地正常工作）。

性能分析面板

性能分析面板中全新的 JavaScript 性能分析器可帮助您确定页面 JavaScript 函数中的执行时间花费在哪里。左侧的侧边栏列出了所有记录的性能分析结果，右侧的树状视图显示了所选性能分析结果收集的信息。名称相同的性能分析结果在侧边栏中可折叠项下按顺序运行分组。

有两种查看性能分析结果的方式：自底向上（重度）或自顶向下（树状）。每种视图都有其优点。重度视图使您能够了解哪些函数对性能影响最大以及调用这些函数的路径。树状视图为您提供脚本调用结构的整体图，从调用堆栈顶部开始。

在性能分析结果下方有一些数据挖掘控件，以便于剖析性能分析信息。聚焦按钮（眼睛符号）将过滤性能分析结果，仅显示选定的函数及其调用者。排除按钮（X 符号）将从整个性能分析结果中移除选定的函数，并将其总时间计入其调用者。当这些数据挖掘功能中的任何一个处于活动状态时，会提供一个重新加载按钮，可以将性能分析结果恢复到原始状态。

WebKit 的 JavaScript 性能分析器与 Firebug 的 console.profile() 和 console.profileEnd() API 完全兼容，但如果您正在记录多个性能分析结果，您也可以在 console.profileEnd() 中指定一个标题来停止特定的性能分析。您也可以使用性能分析面板中的“开始/停止性能分析”按钮来记录性能分析结果。

数据库面板

数据库面板允许您与 HTML 5 数据库存储 交互。您可以检查页面所有已打开数据库的内容，并对它们执行 SQL 查询。每个数据库都显示在侧边栏中。展开数据库的展开三角将显示数据库的表。选择数据库表将显示一个数据网格，其中包含该表的所有列和行。

在侧边栏中选择数据库将显示一个交互式控制台，用于评估 SQL 查询。此控制台的输入具有常见 SQL 单词和短语以及数据库表名的自动补全和 Tab 补全功能。

搜索

伴随着面向任务的重组，工具栏中的搜索字段现在搜索当前面板，并在面板上下文中高亮显示结果。将搜索目标定为当前面板，使得每个面板都能支持适合显示的信息类型的专用查询。支持专用查询的面板是元素面板和性能分析面板。

元素面板除了支持纯文本搜索外，还支持 XPath 和 CSS 选择器作为查询。您执行的任何搜索都将尝试作为纯文本搜索、使用 document.evaluate() 的 XPath 查询以及使用 document.querySelectorAll() 的 CSS 选择器。所有搜索结果将在 DOM 树中高亮显示，并显示和选中第一个匹配项。

性能分析面板支持对函数名和资源 URL 进行纯文本搜索。还支持数字搜索，匹配性能分析结果中“自身”、“总计”和“调用次数”列中的行。为了便于强大的数字搜索，有一些运算符和单位可以扩展或限制您的结果。例如，您可以搜索“> 2.5ms”来查找所有执行时间超过 2.5 毫秒的函数。除了“ms”，还支持其他单位：“s”表示秒，“%”表示时间百分比。其他支持的运算符包括“<”、“<=”、“>=”和“=”。未指定单位时，搜索“调用次数”列。

在所有面板中，在搜索字段中按 Enter 键或 ⌘G（在 Windows 和 Linux 上为 Ctrl+G）将显示下一个结果。按 ⇧⌘G（在 Windows 和 Linux 上为 Ctrl+Shift+G）将显示上一个结果。在资源、脚本和性能分析面板中，搜索将首先在可见视图上执行，并且只有在可见视图中存在匹配项时才会自动跳转到第一个结果。

可用性和贡献

所有这些功能现已在 Mac 和 Windows 的夜间构建版本中提供。今天就试试它们，并告诉我们您喜欢（或不喜欢）什么。

如果您想贡献，Web Inspector bug 和增强功能列表中有一些非常有趣的任务，并且 #webkit 聊天室中的其他贡献者几乎总是乐于提供帮助和建议。