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

大家好,我叫 Kayce,是 DevTools 的技术文档工程师,在这里为大家介绍开发者工具平台的最新动态。

“资源”面板现为“应用”面板

从 Chrome 52 开始,“资源”面板将不再显示!它已重命名为“Application”面板。“Resources”面板的所有旧功能仍然可用,并且还有许多新功能可帮助您调试 Progressive Web App。现在,您也可以体验调试 Service Worker 生命周期和缓存时间问题带来的快乐。

请参阅我们由您自己编写的新指南,详细了解新功能:调试 Progressive Web App

ChromeLens

Chrome 镜头。

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

附注:Rob Dodson 刚刚发布了关于无障碍功能的新视频系列:a11ycasts

Canary 中现已提供新功能

Canary 版目前为 Chrome 54。因此,面向未来的读者 如果您使用的是 Chrome 54 或更高版本,则可以使用这些功能!

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

“Sources”面板颜色选择器。

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

以 curl 格式复制全部内容。

可以通过“命令”菜单停用 JavaScript。以前,只能通过“设置”获取。

停用 JavaScript。

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

console.warn() 堆栈轨迹。

最后一个功能已经推出几个月了,但值得再次提及。在启用“JS 配置文件”选项的情况下创建 Timeline 记录,您可以在“Sources”面板中查看每个函数的执行时间明细。

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

来自社区的新点子

以下是来自社区的一些新想法,这些想法可能会在您身边的未来开发者工具中推出。

  • @matthewcp:通过显示一个简单的增长对象列表来加快内存泄漏调试。
  • @jonathanbingram:使用递增 / 递减键盘快捷键增加 / 减少 font-weight 值。
  • @_bl4de:修改 Cookie(实际上是一个长期请求,但感谢您再次提出请求)。有传闻说 @kdzwinel 已经在设计 PR。
  • @kienzle_s:向“Network”面板过滤条件添加 OR 过滤条件。

有新想法?我们希望了解您的想法。欢迎在 Twitter 上通过 @ChromeDevTools 与我们联系,告诉我们您遇到了什么问题。

我们已收到您的注意,但如有任何文档需要修正或需要说明的功能,请随时在文档代码库中提交问题

下个月再见吧!