Web Inspector 更新

2009 年 11 月 3 日

作者：Joseph Pecoraro

自上次更新以来，Web Inspector 中添加了许多令人兴奋的新功能。今天我们想重点介绍其中一些功能！感谢服部慶士 (Keishi Hattori)，本文也提供日文版 (日本語)。

如果您想尝试这些功能中的大部分，您需要运行最新的 WebKit Nightly 版本。下载后，请确保在“偏好设置”的“高级”选项卡下勾选“在菜单栏中显示‘开发’菜单”以启用 Web Inspector。

Enabling the Inspector in Preferences

编辑元素属性和样式属性 #

编辑元素属性和样式属性变得更加简单和对开发者友好。现在，编辑属性的界面支持使用 Tab 键在项目之间移动，并轻松创建新项目。

除了使用 Tab 键，您还可以为节点添加新属性。将鼠标悬停在“元素树层次结构”中的节点上，稍等片刻后，一个可点击的新属性模板将出现。

Edit Element Attributes

相关 Bug 报告：添加元素属性、Tab 键导航 和 改进的用户界面。

创建和修改 CSS 规则及选择器 #

Web Inspector 中一项强大的新功能允许您创建新或修改现有 CSS 规则和选择器。我们预计开发者和设计师在尝试新想法或调整现有设计时都会发现这非常有用。

用于处理选择器的界面始于“样式侧边栏”中的新齿轮菜单。选择“新建样式规则”，将为您创建一个新部分，并根据“元素树层次结构”中的选择自动填充一个智能选择器。双击可激活选择器编辑。同样，使用 Tab 键可以在选择器及其属性之间导航。

编辑选择器时，如果您创建或修改的选择器不影响“元素树层次结构”中的选定节点，会有视觉反馈。此指示器有助于在进行更改时检测错误。

Create and Modify CSS Selectors

“样式面板”的另一个调整是，总会有一个部分用于所选节点的 `style` 属性。这允许您像往常一样通过“样式面板”轻松地向节点添加样式信息，而不是编辑或创建“style”属性。由于 CSS 特异性（specificity）的工作方式，此部分几乎总是位于顶部。

相关 Bug 报告：选择器支持 和 移至齿轮菜单。

CSS 颜色表示 #

“样式面板”中的颜色可以显示为其任何可能的表示形式。对于简单颜色，这包括短十六进制、完整十六进制、rgb、hsl 和可能的一个别名。对于高级颜色，这包括 rgba 和 hsla。例如，颜色“白色”可以表示为：#FFF、#FFFFFF、rgb(255, 255, 255)、hsl(0, 100%, 100%) 和 white。

您可以使用“样式面板”的齿轮菜单来设置您偏好的表示形式。但是，如果您想循环显示单个颜色的不同表示形式，可以通过点击其关联的色板来实现。

Mutiple Color Representations

相关 Bug 报告：颜色表示、偏好设置和齿轮菜单，以及 用户界面改进。

DOM 存储 #

“存储面板”（前身为“数据库面板”）现在允许您在一个熟悉的数据网格中监控 DOM 存储区域，例如 localStorage 和 sessionStorage。DOM 存储数据网格实时显示更新，因此无需手动刷新视图即可监控更改。

此外，熟悉的新建和编辑技术也适用于数据网格。要添加新的键/值对，只需在任意空白区域双击，或双击现有项开始编辑。Tab 键操作一如既往。

Observing DOM Storage Key/Value Pairs

相关 Bug 报告：DOM 存储支持、实时更新、创建新项，以及 Tab 键导航。

键盘快捷键 #

开发者总是喜欢键盘快捷键。它们可能难以发现，所以这里有一个完整列表，以下是最近添加的一些快捷键：

  • 切换面板 — 在 Mac 上使用 Command-[ 和 Command-]，在其他平台上使用 Control-[ 和 Control-]。
  • 删除树形结构中的节点 — 使用 Delete 或 Backspace 键即可。
  • 树形结构中的快速编辑 — 在树形结构中的节点上按 Enter 或 Return 键会进入该类型节点的编辑模式。对于文本节点，您将开始编辑其内容。对于元素节点，您将开始编辑第一个属性，或者为了方便起见，将为您添加一个新属性。

脚本调试器已更新，支持一些常用的键盘快捷键：

  • 继续 — 在 Mac 上使用 F8 或 Command-/，在其他平台上使用 Control-/。
  • 步过 — 在 Mac 上使用 F10 或 Command-‘，在其他平台上使用 Control-‘。
  • 步入 — 在 Mac 上使用 F11 或 Command-;，在其他平台上使用 Control-;。
  • 步出 — 在 Mac 上使用 Shift-F11 或 Shift-Command-;，在其他平台上使用 Shift-Control-;。
  • 下一个调用帧 — 所有平台上使用 Control-.。
  • 上一个调用帧 — 所有平台上使用 Control-,。
  • 在断点处评估选中内容 — 在 Mac 上使用 Shift-Command-E，在其他平台上使用 Shift-Control-E。

相关 Bug 报告：切换面板、 删除节点、 快速编辑、 通用调试器快捷键 和 评估选中内容。

Cookie #

现在可以在“存储面板”下查看 Cookie 信息。受支持的平台会显示被检查页面上访问的所有域的所有 Cookie 及其隐藏信息。Cookie 信息包括名称、值、路径、过期日期、http-only 标志和 secure (https) 标志。受支持的平台还可以删除 Cookie。

如果您的平台不完全支持，您也不会一无所知。您仍然能够看到被检查页面上可通过 JavaScript 访问的 Cookie 的键和值。

Inspect Hidden Cookie Information

相关 Bug 报告：初始支持、隐藏数据 1 和 2、子资源 Cookie，以及 用户界面改进

事件监听器 #

“元素面板”中新增了一个侧边栏，用于显示选定节点的注册事件监听器。为选定节点显示的事件监听器按它们在捕获和冒泡阶段中触发的精确顺序排列。这为开发者提供了最准确和最有用的信息。

用户界面按类型显示注册的事件监听器。如果一个节点同时有“onclick”和“onmouseover”监听器，它们将自然地出现在不同的部分。您还可以使用齿轮菜单设置您的过滤偏好。您可以选择只查看在选定节点上注册的监听器，或查看整个事件流。

Inspect Registered Event Listeners

我们正在积极寻求此区域的用户界面改进。因此，如果您有任何想法或反馈，请随时通过此 Bug 报告告诉我们！

相关 Bug 报告：事件监听器。

语法高亮 #

语法高亮增强了可读性，使代码调试更容易，并且看起来非常棒。Web Inspector 现在包含了对 JSON 和 CSS 的语法高亮支持。

CSS Syntax Highlighting

CSS 语法高亮甚至适用于更复杂的“at-rules”，例如 @import、@media 和 @font-face。除了在“资源面板”中支持语法高亮外，“元素树层次结构”中的内联脚本和样式也支持语法高亮！

Inline JavaScript and CSS Syntax Highlighting

相关 Bug 报告：JSON 高亮、CSS 高亮，以及 内联高亮。

断点和观察表达式 #

脚本调试器正变得越来越强大和有用。我们已经提到了上面的键盘快捷键，但还有许多其他增强功能。

新增了一个“断点侧边栏”，让您可以轻松监控和处理所有文件中的断点，而无需费力查找。每个侧边栏条目都会显示源代码行，并包含一个复选框，允许您直接启用或禁用断点。点击该条目将直接跳转到源文件中的高亮行。最后，通过点击“蓝色标签”断点指示器，删除断点变得更加容易。该标签将在活动、非活动和已移除三种状态之间循环。

调试器中添加了一个强大的功能，即条件断点。设置断点后，右键点击“蓝色标签”断点指示器，您将弹出一个窗口，要求输入该断点的条件语句。只需提供一个表达式，此后断点将仅在条件为真时暂停。

Breakpoints and other Debugging Improvements

调试器中的另一个新功能是观察表达式。在这个新的侧边栏中，您可以添加任意数量的表达式，它们在全局作用域中正常评估，但在调试器暂停时在局部作用域中评估。添加后，您将获得每个表达式值的完整对象属性树视图。这些观察表达式在调试器暂停时会自动刷新。它们还会在页面加载之间保持不变。

Watched Expressions in Action

相关 Bug 报告：断点侧边栏、 观察表达式、 断点处评估、 条件断点，以及 删除断点。

调试 AJAX #

对于使用 AJAX 的开发者来说，一个极其有价值的功能是能够查看 XMLHttpRequest 发送的精确参数和负载。

在单个资源视图中，新增了用于查看提交的表单数据、查询字符串参数和请求负载（如果适用）的部分。您可以双击以切换查看未编码（默认）和编码形式的信息。

还有一个名为“HTTP 信息”的新部分，其中包含请求方法（GET、POST 等）和状态码（200、404 等）。此外，它在请求的 URL 旁边添加了一个彩色点来显示状态（绿色表示成功，橙色表示重定向，红色表示错误）。

View Submitted Form Data and HTTP Information

相关 Bug 报告：HTTP 状态码 和 数据、参数和负载

资源和控制台范围栏 #

为了过滤资源或控制台消息，Web Inspector 现在配备了一些熟悉的范围栏。这在“资源面板”中已被证明非常有用，可以轻松查看特定类型的所有资源。

Quick Filtering Scope Bars for Resources Types and Console Message Types

相关 Bug 报告：资源范围栏 和 控制台范围栏。

资源时间轴 #

Web Inspector 现在在时间轴中明确显示 DOMContentLoaded 和 Load 事件何时触发。这有助于弄清页面加载所需的时间，并帮助您缩短网站加载时间。

DOMContent Ready Event and Page's Load Event Indicators

相关 Bug 报告：显示加载线

资源交互性 #

几项新功能允许您更直接地从 Web Inspector 内部访问单个资源。现在，您无需手动复制其 URL 并打开新标签页，而是可以双击侧边栏中的资源，直接在新窗口中打开它。或者，您可以使用 HTML5 拖放事件拖放资源！

相关 Bug 报告：直接打开资源 和 拖放。

控制台改进 #

Web Inspector 控制台中的属性现在以更自然、更有用的方式排序。通过按字母数字排序键，包含十个以上元素的数组更易于操作。

Alphanumeric Sorting

另一个调整是，NodeLists 和 HTMLCollections 等集合现在像数组一样显示。这意味着它们的内容直接显示在控制台中，不再需要任何额外的样板代码。

More Descriptive Nodelists

相关 Bug 报告：排序 和 NodeLists。

Firebug 命令行 API 改进 #

为了支持更多 Firebug 命令行 API，我们进行了更多改进。Web Inspector 现在支持 inspect() 函数，该函数可以接受 Element、Database 或 Storage 区域，并自动跳转到包含信息的相应面板。此外，$0–$4 变量包含“元素树层次结构”中当前和之前选定的节点。

这些命令行 API 可以在 Web Inspector 的控制台中使用。为了使使用这些 API 更加方便，它们现在显示在控制台的自动补全中。

相关 Bug 报告：$# 变量、inspect() 函数，以及 自动补全。

您如何贡献 #

这些新功能中有许多是由开源社区成员添加的。我们鼓励您也做出贡献！由于 Web Inspector 本身主要由 HTML、JavaScript 和 CSS 组成，这意味着您已经拥有加入所需的技能！感兴趣吗？现在就通过检查检查器本身来玩玩看吧！

Work on the Web Inspector using the Web Inspector!

如果您有兴趣做出贡献并有任何疑问，请访问 #webkit-inspector IRC 频道！为了鼓励开发者，上面每个部分的末尾都包含了使这些功能得以实现的核心 Bug 报告。

最后，如果您有新功能想法、任何改进，或者您偶然发现了 Bug，请不要犹豫，创建 Bug 报告。此链接已预填充了大部分字段，因此您只需填写“摘要”和“描述”。一如既往，您应该首先快速搜索现有检查器 Bug。

注意：从Web Inspector 参考文档了解更多关于 Web Inspector 的信息。