开发者工具摘要,2016 年 8 月

您好!我是 DevTools 的技术编辑 Kayce,今天将向您介绍 DevTools 领域的最新动态。

“资源”面板现已更名为“应用”面板

从 Chrome 52 开始,我们不再提供“资源”面板!该部分已重命名为“应用”面板。资源面板的所有旧功能仍然可用,此外还有许多新功能可帮助您调试渐进式 Web 应用。现在,您也可以体验调试服务工件生命周期和缓存时间问题的乐趣了。

请参阅由我撰写的新指南,详细了解这些新功能:调试渐进式 Web 应用

ChromeLens

Chrome 镜头。

ChromeLens 是一款出色的新扩展程序,可帮助您让网站更易于视障人士访问。

(附注)Rob Dodson 刚刚推出了有关无障碍功能的新视频系列 a11ycasts

Canary 中现已推出新功能

Canary 目前是 Chrome 54。因此,对于日后阅读本文的读者,如果您使用的是 Chrome 54 或更高版本,则可以使用这些功能!

颜色选择器位于“来源”面板中。

“来源”面板中的颜色选择器。

右键点击“网络”面板中的“资源”窗格,然后您可以复制一串 c网址 请求以下载您的所有资源。

以 curl 格式复制全部内容。

您可以通过命令菜单停用 JavaScript。此功能以前只能在“设置”中使用。

停用 JavaScript。

console.warn() 现在包含堆栈轨迹。

console.warn() 堆栈轨迹。

最后一个功能已经推出几个月了,但值得再次提及。启用“JS 性能分析”选项后,创建时间轴记录,然后您就可以在“来源”面板中按函数查看执行时间明细。

“来源”面板中的函数执行时间。

社区的新想法

以下是社区提供的一些新想法,这些想法可能会在未来的“附近的开发者工具”中推出。

  • @matthewcp:通过显示不断增长的对象的简单列表,加快内存泄露调试速度。
  • @jonathanbingram:使用递增 / 递减键盘快捷键来增加 / 减少 font-weight 值。
  • @_bl4de:修改 Cookie(这其实是一个由来已久的请求,感谢您再次提出)。有传言称 @kdzwinel 正在处理一个 PR。
  • @kienzle_s:向“广告网络”面板过滤条件中添加了“或”过滤条件。

有新想法?我们非常期待收到您的反馈。欢迎在 Twitter 上与我们联系 (@ChromeDevTools),告诉我们您遇到的问题。

顺便提一下,如果有任何文档需要修正或有任何功能需要说明,欢迎随时在文档代码库中创建问题

下个月见!