开发者工具的新变化 (Chrome 61)

Kayce Basques

Chrome 61 中的开发者工具即将发布的新功能和重大更改包括：

• 移动设备节流模拟。同时设置 CPU 和网络节流， 模拟中端或低端移动设备。
• 存储空间用量。查看源站使用了多少存储空间（按技术细分） （IndexedDB、缓存、本地、会话等）。
• 缓存时间戳。查看 Service Worker 缓存响应的时间。
• 从命令菜单启用 FPS 计量器。
• 在“性能”面板中更改鼠标滚轮和触控板行为。
• 以原生方式调试 ES6 模块。

查看下方这些版本说明的视频版本，或继续阅读以了解详情。

在 Device Mode 下模拟低端和中端移动设备

现在，默认情况下会显示 Device Mode Throttling 菜单，它让您可以模拟 点击几下就能找到我们的中低端或中端移动设备

图 1. 限制菜单

图 2. 将鼠标悬停在节流菜单上或打开拍摄设置菜单，即可查看 “中端移动设备”和“低端移动设备”的定义

查看存储空间用量

Application 面板的 Clear Storage 标签中新增的 Usage 部分展示了如何 源使用了多少存储空间，以及该源在此设备上的最大配额。

图 3. 用量部分显示 https://airhorner.com 已使用了 66.9KB 源的 15214MB 配额

查看 Service Worker 缓存响应的时间

Cache Storage 标签中新增的 Time Cached 列显示了 Service Worker 缓存的时间 响应。

图 4. 缓存时间列

从命令菜单启用 FPS 计量器

现在，您可以通过命令菜单启用 FPS 计量器。

图 5. 通过命令菜单启用 FPS 计量器

通过性能记录设置鼠标滚轮行为以执行缩放或滚动操作

打开设置，然后设置新的 Flamechart 鼠标滚轮操作设置，以更改 鼠标滚轮在 Performance 面板上的行为。

例如，当您在录制内容的主要部分使用鼠标滚轮时，或在 双指放在触控板上时，默认行为是放大或缩小。更改 滚动，此手势现在可向上或向下滚动。

图 6. Flamechart 鼠标滚轮操作设置

针对 ES6 模块的调试支持

ES6 模块以原生方式在 Chrome 61 中提供。这里没有关于 其他调试功能会按预期运行。尝试在 和 请单步浏览 TodoMVC 的 Paul Ireland 提供的 ES6-Module-implementation，进行查看。TodoMVC

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

• 请通过 crbug.com 提交建议或反馈。
• 使用更多选项报告开发者工具问题 >帮助 >在开发者工具中报告开发者工具问题。
• 请发送电子邮件至 @ChromeDevTools。
• 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

开发者工具的新变化系列涵盖所有内容的列表。