开发者工具摘要(CDS 版本):一窥未来和 RAIL 分析

保罗·巴考斯
Paul Bakaus

了解开发者工具如何通过全新的简化版 Device Mode(始终处于启用状态)打造首选移动设备体验。使用颜色按钮可快速为选择器添加颜色,并了解开发者工具即将推出的新功能。

内容创作的未来概览

我们刚刚在 Chrome 开发者峰会上回来了,我向大家展示了现在和未来如何使用开发者工具。在本摘要中,我通常不会提及任何仍处于实验阶段或仍在不断完善工作的功能,但这次我破例例外。如果您没有时间观看整个演讲,以下是要点:

设备模式版本 2

我们仍在努力完善设备模式这一粗体的新迭代版本,但希望让每个人都有机会试用,因此我们今天在 Canary 版中启用了该模式。经过这些变更,我们正将开发者工具推向移动优先的未来,届时将默认移动开发,桌面开发成为“插件”。预计在未来几周内,我们会通过一篇更长的博文进行更多迭代。

强大的动画检查

借助正在进行的动画检查,您可以全面、详细地了解任何移动过程中发生的情况。我们添加了启发式算法,将复杂的动画组合在一起,以便您专注于所看到的内容,而不是一次显示一个元素过渡的过渡。看看视频吧。正式发布后,我们会提供篇幅更长的独立博文。

布局模式(先睹为快)

新的布局模式尚不完善,但前景可观,我迫不及待地想看到这一功能已全面推出。布局模式会针对页面上的任何元素,向开发者工具添加所见即所得编辑功能。到目前为止,可以在上下文中修改高度、宽度、内边距和外边距。距离您完成试用还有一段时间,我们会及时通知您。

使用更新后的“时间轴”面板进行性能分析

我们大力推进引入新的 RAIL 性能模型,在此过程中,我们对 Timeline 面板进行了数百项细微的、较大的更改,并且它们共同转变了性能分析,并在很大程度上改进了性能分析过程。因此,我们自己的 Paul Irish 并没有单独展示各项变更,而是向我们展示了如何正确调试网站的性能,在本例中,“Hotel Tonight”的移动网站在舞台上上线。新发布的功能包括:加载画面和性能影片画面包含的广告联盟瀑布流树状视图摘要以及按网域和文件查看性能费用的功能。

轻松为任何元素添加前景颜色和背景颜色

每当您想要向元素添加背景颜色或颜色属性时,都不能只打开颜色选择器。而是每次都输入“background: red;”之类的内容,以显示颜色选择器图标,然后选择您所需的实际颜色。

我们以为可以简化这个过程。我们添加了两个小巧的按钮,它们将鼠标悬停在选择器的右下角时显示,以便您添加颜色,并且只需点击一下即可调出选择器:

其他精华

  • 我们通过显示通用媒体类型浪费了之前在“样式”面板中的许多画面区域。现在,如果这不正常,我们会在选择器之前将其隐藏!
  • 现在,您可以在“样式”面板中将鼠标悬停在某个 CSS 选择器上,查看该选择器应用到了页面上的多少个元素。
  • 还没有放弃打印?我们仍然提供了打印媒体模拟功能,以便了解网页的打印效果。我们刚刚将该网页移到了“渲染设置”部分。
  • 现在,在选择要检查的元素时,我们会自动展开并关闭相关的 DOM 子树。很难解释,眼见为实

与往常一样,请通过 Twitter 或下方的评论告诉我们您的想法,并将错误提交到 crbug.com/new

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