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

Umar Hansa
Umar Hansa

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

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

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

复制为 CSS 路径

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

复制 CSS 路径。

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]

数据 URI 过滤

修复了 Network Timing 错误

如果您发现自己的图片需要花费 30 万年才能下载完成,我们对此深表歉意。;) 网络资源的这些错误时间现已修复。crbug.com/309570]

网络录制行为具有更强的控制力

录制网络的行为略有不同。首先,记录按钮的作用与您对 Timeline 或 CPU 配置文件的预期效果一样。而且,正如您预期的一样,如果您在开发者工具打开时重新加载页面,系统会自动开始网络录制。该功能随后会关闭,因此如果您想在网页加载后捕获网络活动,请将其开启。这样,您就可以更轻松地直观呈现广告瀑布流,而不会造成延迟的网络请求歪曲结果。crbug.com/325878]

现在可通过扩展程序使用开发者工具主题

现在,用户可以通过开发者工具实验(复选框:“允许自定义界面主题”)获取用户样式表,该复选框允许 Chrome 扩展程序将自定义样式应用到开发者工具。有关示例,请参阅 开发者工具 Theme Extension 示例crbug.com/318566]

本期的开发者工具摘要到此就结束了,如果您还不了解,请查看 11 月版。