最新的开发者工具资讯
本帖子中的第一条新闻有点 meta,它就是这篇更新本身!我会不定期(至少每月一次)总结 Chrome 开发者工具领域的最新动态。
我说新功能,就是新功能:我将介绍刚刚在 Chrome Canary 中推出的新功能,因此,如果您更喜欢使用稳定版,那也无妨。不过,如果您喜欢冒险,并希望掌握最新动态,请参阅以下文章。除了最新的功能和 bug 修复之外,每篇博文的末尾还有社区检测信号部分,其中重点介绍了您(我们亲爱的用户)所贡献的最重要内容。
言归正传,我们来看看最新动态。
DevTools 中的新功能
“Network”(网络)和“Timeline”(时间轴)中显示类似于胶片条的屏幕截图
就在一周前,我们推出了一项重要的新功能,该功能已脱离实验阶段:在“网络”和“时间轴”标签页中截取网页屏幕截图。
在“网络”面板中,点击小相机图标以启用帧捕获功能,然后重新加载页面以触发捕获。除了使用 WebPageTest 等其他工具捕获的屏幕截图,我们目前仅显示实际来自绘制的帧。
双击某个帧可显示放大视图(然后使用向左/向右箭头进行导航),将鼠标悬停在帧上会在面板和时间轴上显示线条,以直观显示帧的确切捕获时间,以便您与加载顺序相关联。这样一来,调试常见的加载问题(例如呈现阻塞的 Web 字体)会变得更加简单。
在 Timeline 面板中,您可以通过切换顶部工具栏中的“屏幕截图”复选框来启用屏幕截图功能。与“网络”面板相比,此处的工作方式略有不同:在这种情况下,我们会尽可能频繁地截取屏幕截图(无论实际绘制次数如何),以便将这些屏幕截图放置在与时间轴中的其他行相关联的线性时间轴上。用户无需双击即可显示预览,只需将鼠标悬停在相应帧上即可。
由于这两种工具在功能和用户体验方面略有不同,我们建议您试用这些功能,并通过 crbug.com/new 提交工单或向 @ChromeDevTools 发推文提供任何反馈。
“网络”面板中的网络节流
网络节流是我们在推出设备模式时添加的一项功能,现在它又在“网络”面板工具栏中找到了第二个家,这样您就可以在一个位置集中优化网络。
不过,这个新家只是一面镜子:在 Device Mode 模式下仍然可以使用它,因为在设法使您的网站具备自适应能力时,模拟网络连接不佳这一问题仍然非常重要。
最后,您是否曾有过这样的困扰?那就是,在长时间工作一天后,自己的互联网连接中断了,却发现自己忘了停用网络节流功能。现在,启用网络节流后,“Network”面板标签页会显示一个警告图标。
各种小知识
- 你是否厌倦了网络时间轴上的那些奇怪的圈子?我们也是。这些是(新幻灯影片中)拍摄帧的时间点。现在,当您悬停鼠标时,它们会以线条显示。
- 设备模式 现在会在您在设备之间切换时保留屏幕方向
社区动态
利用 Chrome 开发者工具深入了解
Bret Little 发布了此精彩的小型演示课程,不仅向您介绍了基本 DevTools 功能,还提供了许多深入的技巧和窍门。其中肯定有实用的信息,多看一些 DevTools 文档总是没错!
开发者工具 IDE…?!
Web 开发者和开发者工具爱好者 Kenneth Auchenberg 在几个月前开发了一款概念验证型独立开发者工具应用,他在博文本周再次发布了(黑客)新闻。
将开发者工具转变为成熟的 IDE 是一个有趣的想法,我们的许多团队成员以前都梦想过,但这也是一个庞大的项目。
您怎么认为? 开发者工具 IDE 是天方夜谭,还是有实现的可能?它应该是什么样的?请在评论区告诉我们!
再见!
Paul Bakaus 和开发者工具团队