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

保罗·巴考斯
Paul Bakaus

最新开发者工具资讯

这篇博文中的第一条新闻内容有点复杂,那就是本次更新本身!我会不时地(但至少每月一次)总结一下 Chrome 开发者工具的最新情况。

我所说的“最新”是指:我在这里要介绍一下 Chrome Canary 版中刚刚发布的新功能,所以,如果您愿意保持稳定的发布状态,那也不错。不过,如果您喜欢尝试新鲜事物,并且希望随时了解最新动态,这些帖子就是您的理想之选。除了最新功能和问题修复之外,您还可以在每个帖子的末尾找到社区检测信号部分,重点介绍您(我们尊敬的用户)做出的贡献。

言归正传,我们先来详细了解一下实际新闻。


开发者工具中的新功能

影音平台和时间轴中类似于胶片的屏幕截图

就在一周前,我们结束了实验中的一项重要新功能: 在“投放网络”和“时间轴”标签中截取网页屏幕截图的功能。

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

双击其中一个帧会显示放大的视图(然后使用向左/向右箭头进行导航),将鼠标悬停在帧上时,系统会显示面板和时间轴上的线条,以可视化确切的帧捕获时间,以便您与加载序列相关联。这样可以更轻松地调试常见的加载问题(例如阻止渲染的网页字体)。

“时间轴”面板中,您可以选中顶部工具栏中的“屏幕截图”复选框,以启用屏幕截图捕获功能。与“Network”面板相比,此面板的运作方式略有不同:在这种情况下,我们会尽可能频繁地捕获这些屏幕截图(不考虑实际绘制),以便能够按线性时间尺度(与时间轴中的其他行相关联)放置所说的屏幕截图。放大的帧会在鼠标悬停时显示预览,无需双击即可显示预览。

由于这两者在功能和用户体验方面有点不同步,我们建议您试用这些功能,并通过 crbug.com/new 工单或通过 Twitter 向 @ChromeDevTools 发送您的任何反馈。

“Network”面板中的“Network Throttling”

网络节流是我们在介绍 Device Mode 时新增的一项功能。该功能位于“网络”面板工具栏中,因此您可以集中精力优化网络。

网络节流的实际应用

不过,这个新家只是一面镜像:它在设备模式下仍然可用,因为在努力让网站具备自适应能力时,模拟网络连接状况仍然非常重要。

最后,您是否属于这些悲剧人,想知道为什么在长时间工作后,您的互联网连接断开了,却发现自己忘了停用网络节流功能?启用网络节流功能后,“网络”面板标签页现在会显示警告图标

各种趣闻


社区检测信号

使用 Chrome 开发者工具浏览网页

网络节流的实际应用

Bret Little 发布了这个有趣的小演示课程,不仅熟悉了开发者工具的基本功能,还提供了许多深入的提示和技巧。这儿提供的信息无疑非常实用,而且更多开发者工具文档毫无用处!

开发者工具 IDE...?!

网络开发者和开发者工具爱好者 Kenneth Auchenberg 在几个月前开发了一个概念验证独立开发者工具应用,他在本周发布的博文又不时开创(黑客)新闻。

将开发者工具转变为一个成熟的 IDE 是一个有趣的想法,这是我们的许多团队成员之前都梦想过的,但这也是一个比例很高的项目。


您怎么认为? 开发者工具 IDE 是一个梦想,或者您可以看到它成功吗?它应该是什么样子的?请在评论区告诉我们!

再见!
Paul Bakaus 和开发者工具团队