Web Inspector 的现状
去年，Safari 6 对 Web Inspector 进行了重新构想，使其设计和用户体验与 Xcode 4 对齐。这种设计虽然 Mac 和 iOS 开发者很熟悉，但却让一些习惯旧版 Web Inspector 的 Web 开发者感到疏远。在过去的一年里，我们倾听了大家的意见，并将所有反馈铭记在心。
我们很高兴地宣布 Web Inspector 的下一版本，本周在 WWDC 2013 作为 开发者预览版 发布。如果您经常使用 WebKit nightly 版本，那么您会对这个 Web Inspector 很熟悉，因为我们已经将其作为早期开发者预览版在 nightly 版本中捆绑了一段时间了。尽管新的 Web Inspector 一直包含在 WebKit nightly 构建中，但其源代码此前并非 WebKit 开源项目的一部分——直到现在。
布局 #
Web Inspector 主要分为五个部分——工具栏、导航侧边栏、内容浏览器、快速控制台和详情侧边栏。除了可折叠的快速控制台外，Web Inspector 的主要内容被分为三个垂直部分，呈主-详情关系。从左到右，信息会变得更加具体。左侧导航侧边栏面板中的选择控制着中间内容浏览器中显示的视图。内容浏览器中的视图和选择控制着右侧详情侧边栏面板的可用性和信息。这种层级关系在内容浏览器上方的导航栏中得到进一步体现。

有时，内容浏览器中的内容可以通过多种方式呈现或具有相关内容——这些不同的视图可以通过导航栏访问。您可以点击导航栏中标有双箭头的组件，以获取一个弹出菜单，其中列出了可用的不同视图。主要示例是帧资源，它们包含 DOM 树和源代码。视图选择器组件并非导航栏中唯一可点击的组件——任何组件都是可点击的，并且会显示同级组件的弹出菜单。这在您需要切换资源或 DOM 节点而无需前往 Web Inspector 其他位置时非常方便。

工具栏 #
新版 Web Inspector 的一个关键焦点是其重新设计的工具栏，带有活动查看器。位于工具栏正中央的是活动查看器，它提供关于您的网页资源、加载时间、日志、错误和警告的信息。无论您在 Web Inspector 的哪个位置，您都能一目了然地看到页面的关键统计信息以及是否有控制台活动正在发生。点击日志、错误或警告项将带您到控制台并设置实时过滤器，只显示这些类型的消息。再次点击同一项将切换回显示所有控制台消息。
最左侧的工具栏项用于切换三个导航侧边栏，它们是 Web Inspector 中所有可用内容的起点。右侧的工具栏项用于切换详情侧边栏，这些侧边栏基于内容浏览器中当前显示的视图和选择。控制台工具栏项用于切换全视图控制台（再次点击它将带您回到之前查看的内容）。点击检查（Inspect）工具栏项会将页面置于检查模式，在该模式下，鼠标悬停会高亮显示 DOM 元素，点击则会在 DOM 树中显示它（这在 iOS 设备上特别方便，您可以用手指轻触元素）。
在窗口模式下，停靠控件位于窗口的右上角，您可以将 Web Inspector 停靠到页面的底部或右侧。停靠后，控件位于工具栏的左侧。按住 ⌥ 键将切换取消停靠按钮，让您可以根据当前的停靠位置，将其停靠到右侧或底部。
默认情况下，工具栏项目带有标签，便于识别。如果您希望工具栏外观更简洁，可以在上下文菜单中找到一些自定义选项（包括标签可见性和图标大小）。您选择的选项会根据停靠模式记住——因此您可以为所有三种模式设置不同的工具栏配置。

图层 #
Web Inspector 新增了图层详情侧边栏，提供关于 WebKit 如何合成页面元素的信息。所选 DOM 元素（如果存在图层）以及后代元素的图层信息都会显示。查看页面中所有图层最简单的方法是检查 <body> 元素并查看子图层表格。然后，您可以深入检查更深层的后代元素，缩小列表范围。除了侧边栏之外，您还可以启用合成边框（
 在 DOM 树导航栏中）叠加在页面上，以便从空间上直观地查看图层及其重绘次数。
WebKit 创建图层的原因多种多样，并非所有原因都直接由页面的样式或内容控制。在侧边栏中选择一个图层将显示一个弹出框，其中列出了创建该图层的原因。如果该图层不是必需的，合成原因应该能为您提供需要进行哪些更改的指导。消除不必要的图层是减少页面内存占用的一种直接方法。

样式 #
Web Inspector 新增了一个全新的样式详情侧边栏，让您调整样式规则变得更加轻松。您不再需要双击来编辑属性或值——只需点击即可开始输入。然而，与之前不同的是，编辑时您不再局限于单个字段——整个规则体就是一个迷你文本编辑器。进行选区、用键盘移动光标、全选、复制、粘贴、智能自动完成——所有这些功能都已具备——就像您在文本编辑器中所期望的那样。您还会看到评论按原样出现在您的样式规则中，任何看起来像属性的评论前面都会显示一个切换复选框。由于箭头键控制键盘光标导航，以前用于递增和递减数字的键绑定不得不改变。现在，⌥↑ 和 ⌥↓ 用于按 1 进行递增/递减（在 -1 到 1 之间时按 0.1），⌥⇧↑ 和 ⌥⇧↓ 用于按 10 进行递增/递减。
样式详情侧边栏顶部有复选框，用于强制所选元素的伪状态。默认情况下，这些复选框会滚动到列表顶部以外，因此如果您看不到它们，只需向上滚动。选择一个复选框将强制元素的该状态，并更新匹配规则以显示与新状态匹配的规则。强制状态会一直保持活动，直到您关闭 Web Inspector。
您在样式详情侧边栏中进行的任何编辑都会反映在资源中，反之亦然。因此，如果您喜欢在资源视图编辑器中进行大量工作，您将获得与侧边栏中同样出色的属性和关键字自动完成以及实时更新功能。
如果您喜欢使用众多 CSS 预处理器中的一个，例如 Sass，那么您会很高兴看到对 CSS 源映射 的支持。如果您的页面引用了一个可通过网络或文件系统访问的源映射，Web Inspector 将加载它并显示您的样式规则的原始位置。这些映射位置会以斜体显示，以告知您这不是 WebKit 使用的原始位置，但它可能是您在本地编辑时更关心的位置。点击链接将带您到映射的资源。如果您想查看原始资源，可以在悬停链接时按住 ⌘ 键，它将指向 WebKit 正在使用的 CSS 资源。一些预处理器允许混入（mix-ins）和其他高级功能，使您的工作更轻松，但这同时也意味着单个规则位置可能不足以跳转到您感兴趣的属性。要跳转到映射资源中属性的实际位置，您可以再次按住 ⌘ 键并点击属性或值，即可直接跳转到声明该属性的源代码行。

控制台 #
从表面上看，控制台似乎没有太大变化；然而，在底层，有一些重要的增强。最显著的变化可能是带有更智能自动完成功能的语法高亮提示符。现在，自动完成在更多情况下提供，并且与您正在输入的上下文更相关。自动完成不再仅限于您在表达式末尾输入时可用——您可以自由地在复杂的、多行表达式中移动，并持续获得相关的建议。
延续智能主题，回车键现在更智能了。当您在表达式末尾输入时，按下回车键现在会考虑该表达式是否已准备好进行求值，或者继续输入是否能完成表达式。如果可以输入更多内容以创建有效表达式，回车键将插入换行符而不是对表达式求值——这对于输入多行函数声明很方便。如果您在有效表达式或不可恢复的无效表达式后按下回车键，它将被求值，并显示结果或语法错误。一如既往，在表达式末尾以外的任何地方按下回车键都会对其求值。您可以使用 ⌘⏎ 在任何地方强制求值，或使用 ⌥⏎ 强制插入换行符。
处理控制台输出时，您现在可以选择按文本和消息类型进行实时过滤。任何进入的消息都将对照过滤器进行评估，并且只会显示匹配的消息。用户输入及其结果不会经过过滤器，而是始终显示。
为了改进控制台消息的导出，现在单击一条消息将进行整行选择。典型的行选择规则适用，允许使用 ⇧ 和 ⌘ 修改键进行多行选择。选中行后，您可以使用 ⌘C 复制并在其他地方粘贴为纯文本。全视图控制台还支持使用 ⌘S 将整个日志导出为文本文件。现在，我们认识到行选择并不总是很有用。有时您只需要结果的一小段来复制粘贴。对于这些情况，普通文本范围选择仍然可以在单个消息边界内工作。一旦您将拖动范围超出单个消息边界，它就会变为行选择并开始选择多行。
现在在调试器暂停时也支持严格模式（Strict mode）。

源代码 #
Web Inspector 许多出色新功能的核心是一个优秀的开源代码编辑组件——CodeMirror。CodeMirror 使我们能够专注于构建出色的功能，而不是实现又一个代码编辑器。
编辑是 Web Inspector 的核心部分，因此在浏览器中进行所有编辑是一种自然的需求。不得不跳回您的文本编辑器应用程序进行编辑至少可以说是麻烦的。这就是为什么 Web Inspector 允许编辑从文件 URL 加载的任何资源，而不仅仅是 CSS 资源。当您将其与通过 ⌘S 实现的新保存支持结合使用时——您现在可以调整、保存和重新加载，而无需离开浏览器。
有些源代码难以阅读？现在 JavaScript 和 CSS 支持美化打印（Pretty printing）。如果 Web Inspector 检测到某个资源可能被压缩（minified），那么源代码会自动为您进行美化打印。当资源被美化打印后，任何带有行号和列号的源代码链接将以斜体显示（就像源映射资源一样），表明这不是原始位置，而是美化打印后的位置。您可以在悬停链接时按住 ⌘ 键，链接会改变以显示原始行号和列号。
由于 源映射 可以引入除标准 CSS 和 JavaScript 之外的各种资源类型，Web Inspector 现在支持对少量其他语言进行语法高亮显示。这些语言包括：Clojure、CoffeeScript、LESS、LiveScript、Sass 和 TypeScript。

演示 #
在 WWDC 2013 大会上，我们举办了两个内容丰富的 Web Inspector 演示环节——了解 Web Inspector 和 充分利用 Web Inspector。我们鼓励大家查看这些环节，以详细了解新版 Web Inspector 的功能。

贡献 #
现在新版 Web Inspector 已 开源，并作为 WebKit 的一部分可供今日获取，我们欢迎像您一样的开发者做出贡献。一如既往，Web Inspector 本身主要由 HTML、JavaScript 和 CSS 构成，这意味着您已经具备了参与并贡献错误修复、增强功能或新特性所需的技能。如果您有兴趣贡献或有任何问题，请到 #webkit-inspector IRC 频道交流。