推出 Web Inspector

我想介绍一个 WebKit 的新成员——Web Inspector。Web Inspector 让你可以在紧凑的 HUD 风格窗口中浏览实时 DOM 层级结构，满足了 Web 开发人员和 WebKit 黑客的需求。

当在层级结构中选中某个节点时，Web Inspector 会高亮显示页面上的该节点。你还可以通过节点名称、ID 和 CSS 类名来搜索节点。

Inspector 的独特功能之一是，通过双击一个节点可以将其设为 DOM 层级结构的根节点，从而深入探查。这让你能够轻松管理大型嵌套页面，并且只专注于特定的子树，同时保持最小的缩进。

在样式面板下，我们显示了所有适用于当前选中节点的 CSS 规则。这些规则按级联顺序排列，被覆盖的属性会以删除线显示——让你真正看到层叠样式表如何影响页面布局。所有简写属性都有一个展开/折叠三角形，用于显示和隐藏由简写创建的扩展属性。

所以，更新你的代码树或下载每夜构建版，然后试试新的 Web Inspector 吧。每夜构建版总是默认启用 Web Inspector。但是，要为你自己的构建启用 Inspector，你需要一次性在终端中输入以下内容：

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

然后你会在任何网页上看到一个新的“检查元素”上下文菜单项。这将打开 Web Inspector 并重新聚焦到你的光标下的节点。

我们已在 Bugzilla 中添加了一个新的“Web Inspector”组件，用于跟踪你可能遇到的任何问题或功能请求。

我要向 Dave Hyatt 表达由衷的感谢，感谢他提供的所有底层支持和设计理念，同时也要感谢 Geoff Garen 和 Maciej 帮助我们集思广益，设计出了出色的用户界面。