此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

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

注意：您可以在 chrome://version 中查看您正在运行的 Chrome 版本。Chrome 大约每 6 周会自动更新到新的主要版本。

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

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

设备模式节流菜单现已默认显示，现在您只需点击几下，即可模拟低端或中端移动设备。

图 1. 限制菜单

图 2. 将鼠标悬停在限制菜单上或打开捕获设置菜单，即可查看中端移动设备和低端移动设备的定义

查看存储空间用量

Application 面板的 Clear Storage 标签页中新增的 Usage 部分显示了“源”目前使用的存储空间大小，以及此设备上源的最大配额。

“使用情况”部分

图 3. 用量部分显示，https://airhorner.com 占用了 66.9KB 的空间（原配额为 15214MB）。

查看 Service Worker 缓存响应的时间

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

“缓存时间”列

图 4. 缓存时间列

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

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

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

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

设置鼠标滚轮行为，以通过性能记录进行缩放或滚动

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

例如，当您在录音的“Main”部分使用鼠标滚轮，或者在触控板上用两根手指滑动时，默认行为是放大或缩小。现在，当您将设置更改为 Scroll 时，此手势将向上或向下滚动。

“Flamechart 鼠标滚轮操作”设置

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

对 ES6 模块的调试支持

ES6 模块在 Chrome 61 中以原生方式提供。就开发者工具而言，这里介绍的不是很多，只是调试工作方式与您所期望的一样。不妨尝试在 TodoMVC 的 Paul Irish 的 ES6-Module-implementation 中设置一些断点，并逐步完成这些断点，以便亲自了解相关信息。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。