了解开发者工具如何通过经过简化的新 Device Mode（始终开启）实现移动优先。使用颜色按钮可快速向选择器添加颜色，并了解开发者工具即将推出的功能。
艺术创作的未来概览
我们刚刚参加 Chrome 开发者峰会，在那里，我向大家展示了现在和将来如何使用开发者工具。在本摘要中，我通常不会提任何仍处于实验阶段或大量进展的功能，但这次我将破例允许发布。如果您没有时间观看完整的演讲，不妨参阅以下要点：
Device Mode 版本 2
我们仍在大力开发这种大胆创新的设备模式版本，但想让所有人有机会一试，因此我们已在您的 Canary 版中启用了此功能。随着这些变更，我们正在将开发者工具推向一个移动优先的未来，移动开发是默认移动开发，桌面开发成为“插件”。预计未来几周会有更多迭代机会，我们会在完成后再发布一篇博文。
强大的动画检查功能
进行中的动画检查可让您全面、详细地了解任何移动物体上的情况。我们添加了将复杂动画分组的启发法，让你可以专注于查看的所有内容，而不是一次显示一个元素的转场效果。看看这个视频在功能全面推出后，我们会发布一篇篇幅更长、独立的博文。
布局模式（快速预览）
虽然还不是正式的正式时间，但新的布局模式非常有前景，这款新布局模式已推出，我迫不及待想看到其全面推出。布局模式为 DevTools 为页面中的任何元素添加了 WYSIWYG 编辑功能。目前，高度、宽度、内边距和外边距可在上下文中进行修改。我们还需要一段时间才能让您试用，但我们会及时通知您。
通过更新后的 Timeline 面板进行性能分析
在引入新 RAIL 性能模型的过程中，我们又对 Timeline 面板进行了数百处小而大的变化，而这些变化相辅相成，可以显著改变和改善性能分析故事。因此，我们自己的 Paul Ireland 并未单独展示各项更改，而是展示了如何在场景中正确调试网站（在本例中为 Hotel Tonight 移动网站）的性能。新发布的功能包括加载和性能视频短片、包含的网络瀑布、树状视图摘要以及查看按网域和文件划分的性能费用的功能。
轻松为任何元素添加前景色和背景色
每当您想要为元素添加背景颜色或颜色属性时，都不能直接打开颜色选择器，相反，大多数用户会在每次输入“background: red”之类的内容时输入内容，这样颜色选择器图标就会显示，然后选择想要的实际颜色。
我们认为可以简化这一流程。我们添加了两个非常好用的按钮，将鼠标悬停在选择器右下角时就会显示这些按钮，这样，您就可以添加颜色，只需点击一下即可调出选择器：
其他精选游戏
- 通过显示通用媒体类型，我们在“样式”面板中浪费了大量空间。现在，如果这些内容很正常，我们会在您的选择器之前隐藏这些内容！
- 现在，您可以在“样式”面板中将鼠标指针悬停在 CSS 选择器上，查看该选择器适用于页面上的元素数量。
- 还没有放弃打印？我们仍然提供了打印媒体模拟功能，您可以通过此功能查看网页的打印效果，只需将其移至“呈现设置”中即可。
- 在选择要检查的元素时，我们现在会自动展开并关闭相关的 DOM 子树。难以解释，眼见为实。
与往常一样，请通过 Twitter 告诉我们您的想法或进行下面的评论，并前往 crbug.com/new 提交 bug。
下个月再见！
Paul Bakaus 和开发者工具团队