此页面由 Cloud Translation API 翻译。

开发者工具摘要，2013 年 12 月

Umar Hansa

最近，Chrome 开发者工具中已引入了许多更新的功能，有些功能有些小，有些大。首先介绍“元素”面板的更新，然后介绍控制台、时间轴等。

已停用的样式规则副本为已被注释掉

现在，在“Styles”窗格中复制整个 CSS 规则时，将会包含您已关闭的样式，它们将以注释掉形式存在于剪贴板中。[crbug.com/316532]

复制为 CSS 路径

现在，“元素复制为 CSS 路径”作为 DOM 节点的菜单项在“元素”面板中提供（类似于“复制 XPath”菜单项）。

CSS 选择器的生成不必仅限于样式表/JavaScript，它们也可以用作 WebDriver 测试中的定位工具策略的替代方案。[crbug.com/277286]

查看 Shadow DOM 元素样式

现在，您可以检查影子根的子元素的样式。[crbug.com/279390]

控制台的 copy() 适用于对象

Command Line API 中的 copy() 方法现在适用于对象。接下来，在“Console”面板中尝试执行 copy({foo:'bar'})，您会发现剪贴板中现在是对象的字符串化和格式化版本。[crbug.com/289348]

控制台的正则表达式过滤条件

在“控制台”面板中使用正则表达式过滤控制台消息。crbug.com/318308]

轻松移除事件监听器

尝试在 Console 面板中使用 getEventListeners(document).mousewheel[0]; 检索文档上的第一个鼠标滚轮事件监听器。在此之后，请尝试 $_.remove()；移除该事件监听器（$_ = 最近评估的表达式的值）。crbug.com/309524]

移除了 CSS 警告

您之前可能看到的“CSS 属性值无效”样式警告现已移除。我们不断努力使实现更加稳健，从而抵御现实中的 CSS，包括浏览器黑客攻击。crbug.com/309982]

以饼图形式汇总时间轴操作

“时间轴”面板的“详细信息”窗格中现在包含一个饼图，该饼图会直观地显示渲染费用的来源，有助于您一目了然地发现瓶颈。

您会发现，以前显示在弹出式窗口中的大部分信息现在都被提升到了其专属的窗格中。要查看、启动时间轴记录并选择帧，请注意新的“详细信息”窗格，其中包含一个饼图。在“Frames”视图中，您会获得一些有趣的统计数据，例如所选帧的平均 FPS (1000ms/frame duration)。[crbug.com/247786]

图片大小调整事件详细信息

“时间轴”面板中的图片大小调整和解码事件现在包含指向“元素”面板中 DOM 节点的链接。

图片网址链接会将您引导至“资源”面板中的相应资源。crbug.com/244159]

GPU 框架

GPU 上出现的帧现在显示在顶部，位于主线程上的帧上方。crbug.com/305863]

在 popstate 监听器上中断

'popstate' 现已作为事件监听器断点显示在“Sources”面板边栏中。[crbug.com/88112]

抽屉式导航栏中提供的渲染设置

现在，打开抽屉式导航栏会显示多个窗格，其中一个是“渲染”面板，它用于显示矩形绘制、FPS 计量器等。您可以在“设置”>“在控制台抽屉式导航栏中显示‘渲染’视图”中默认启用此功能

以数据网址的形式复制图片

现在，您可以将“资源”面板中的图片素材资源的内容复制为数据 URI (data:image/png;base64,iVBO...)。

如需尝试此操作，请在“框架”>“[资源]”>“图片”中找到图片资源，右键点击图片预览以访问上下文菜单，然后选择“将图片复制为数据网址”。crbug.com/321132]

数据 URI 过滤

您可能从未想到过数据 URI 应该存在，现在可以从“网络”标签页中滤除 Data URI。选择过滤器图标

查看其他资源过滤器类型。crbug.com/313845]