开发者工具摘要 - 幻灯影片和一个新的节流空间

Paul Bakaus
Paul Bakaus

最新的开发者工具资讯

本帖子中的第一条新闻有点 meta,它就是这篇更新本身!我会不定期(至少每月一次)总结 Chrome 开发者工具领域的最新动态。

我说新功能,就是新功能:我将介绍刚刚在 Chrome Canary 中推出的新功能,因此,如果您更喜欢使用稳定版,那也无妨。不过,如果您喜欢冒险,并希望掌握最新动态,请参阅以下文章。除了最新功能和 bug 修复之外,您还会在每篇文章的末尾看到社区动态部分,其中会重点介绍您(我们心爱的用户)做出的卓越贡献。

言归正传,我们来看看最新动态。


DevTools 中的新功能

“Network”(网络)和“Timeline”(时间轴)中显示类似于胶片条的屏幕截图

就在一周前,我们推出了一项重要的新功能,该功能已不再处于实验阶段:在“网络”和“时间轴”标签页中截取网页屏幕截图。

“网络”面板中,点击小相机图标以启用帧捕获功能,然后重新加载页面以触发捕获。除了使用 WebPageTest 等其他工具截取的屏幕截图外,我们目前仅显示实际来自绘制操作的帧。

双击某个帧会显示放大视图(然后使用向左/向右箭头进行导航),将光标悬停在帧上会在面板和时间轴上显示线条,以直观显示帧的确切捕获时间,以便您与加载顺序相关联。这样,调试常见的加载问题(例如呈现阻塞的 Web 字体)会变得更加简单。

时间轴面板中,您可以通过切换顶部工具栏中的“屏幕截图”复选框来启用屏幕截图功能。与“网络”面板相比,此处的工作原理略有不同:在这种情况下,我们会尽可能频繁地截取屏幕截图(无论实际绘制次数如何),以便将这些屏幕截图放置在与时间轴中的其他行相关联的线性时间轴上。用户无需双击即可显示预览,只需将鼠标悬停在相应帧上即可。

由于这两种工具在功能和用户体验方面略有不同,我们建议您试用这些功能,并通过 crbug.com/new 创建工单或向 @ChromeDevTools 发推文提供任何反馈。

“网络”面板中的“网络节流”

网络节流是我们在推出设备模式时添加的一项功能,现在它又在“网络”面板工具栏中找到了第二个家,这样您就可以在一个位置集中优化网络。

网络节流功能的运作方式

不过,这个新首页只是一个镜像:在设备模式下,您仍然可以使用它,因为在提高网站响应能力时,模拟网络连接不佳仍然非常重要。

最后,您是否也曾是这些可怜的用户之一,在一天辛苦工作后,却发现自己的互联网连接已中断,最后才发现自己忘记了停用网络节流?现在,当启用网络节流功能时,“网络”面板标签页会显示警告图标

各种小知识


社区动态

深入了解 Chrome 开发者工具

网络节流功能的运作方式

Bret Little 发布了此精彩的小型演示课程,不仅向您介绍了基本开发者工具功能,还提供了许多深入的技巧和窍门。其中肯定有实用的信息,多看一些开发者工具文档总是没错!

开发者工具 IDE…?!

Web 开发者和开发者工具爱好者 Kenneth Auchenberg 几个月前开发了一款概念验证型独立开发者工具应用,不知为何,他的博文本周又登上了(黑客)新闻。

将 DevTools 转变为一个完整的 IDE 是一个有趣的想法,我们的许多团队成员之前就曾梦想过这样做,但这也是一个规模宏大的项目。


您怎么认为? 开发者工具 IDE 是天方夜谭,还是有实现的可能?它应该是什么样的?请在评论区告诉我们!

再见!
Paul Bakaus 和 DevTools 团队