了解 DevTools 如何通过始终开启的全新简化版 Device Mode 以移动设备为先。使用颜色按钮可快速为选择器添加颜色，并了解即将在 DevTools 中推出的功能。
一窥创作未来
我们刚刚从 Chrome 开发者大会回来，在那里，我向大家展示了开发者工具目前和未来的使用方式。我通常不会在此数据总结中提及仍处于实验阶段或处于开发阶段的任何功能，但这次是个例外。如果您没有时间观看完整演讲，可以参阅以下要点：
设备模式版本 2
我们仍在努力改进这项大胆创新的设备模式，但希望让所有人都有机会试用，因此今天已在您的 Canary 版中启用该模式。通过这些变更，我们将 DevTools 推向以移动设备为先的未来，其中移动开发是默认选项，桌面开发是“附加项”。我们预计会在未来几周内进行更多迭代，完成后会发布一篇详细的博文。
强大的动画检查功能
我们正在开发的动画检查功能可让您全面详细地了解任何移动内容的运行情况。我们添加了一些启发词语，用于对复杂的动画进行分组，以便您能专注于所看到的所有内容，而不是一次只显示一个元素的转换效果。请观看视频。正式发布后，我们会发布一篇更详细的独立博文。
布局模式（抢先体验）
新版布局模式虽然还不太成熟，但前景非常广阔，我迫不及待地想看到它全面完善。布局模式为 DevTools 添加了针对网页上任何元素的 WYSIWYG 编辑功能。目前，您可以在上下文中修改高度、宽度、内边距和外边距。我们还需要一些时间才能让您试用，但我们会及时通知您最新动态。
使用更新后的“时间轴”面板进行性能分析
为了大力推广新的 RAIL 性能模型，我们对时间轴面板进行了数百项大大小小的更改，这些更改共同改变和改进了性能性能分析流程。因此，我们的 Paul Irish 并未单独展示每项更改，而是在现场演示了如何正确调试网站（在本例中为 Hotel Tonight 的移动网站）的性能。新发布的功能包括加载和性能影片条、包含的广告联盟广告瀑布流、树状视图摘要，以及按网域和文件查看性能开销。
轻松为任何元素添加前景色和背景色
每当您想要为元素添加 background-color 或 color 属性时，都不能仅仅打开颜色选择器。相反，大多数人每次都会输入“background: red;”之类的代码，以便系统显示颜色选择器图标，然后选择所需的实际颜色。
我们认为可以简化这一过程。我们添加了两个实用按钮，当您将光标悬停在选择器的右下角时，这两个按钮就会显示，让您只需点击一下即可添加颜色并调出选择器：
其他优秀选手
- 之前，我们在“样式”面板中显示了通用媒体类型，因此浪费了大量空间。现在，如果这些内容没有异常，我们会在选择器前面将其隐藏起来！
- 现在，您可以在“样式”面板中将鼠标悬停在 CSS 选择器上，查看它应用于网页上的元素数量。
- 还没有放弃打印？打印媒体模拟功能仍然可用，可用于查看网页的打印效果。我们只是将其移到了“呈现设置”中。
- 现在，选择要检查的元素时，我们会自动展开和关闭相关的 DOM 子树。很难解释，眼见为实。
与往常一样，您可以通过 Twitter 或下方的评论与我们分享您的想法，并通过 crbug.com/new 提交 bug。
下个月见！
Paul Bakaus 和 DevTools 团队