此页面由 Cloud Translation API 翻译。

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

Kayce Basques

欢迎回来！Chrome 63 中面向开发者工具推出的新功能包括：

多客户端远程调试支持。
Workspaces 2.0。
四项新审核。
使用自定义数据模拟推送通知。
使用自定义代码触发后台同步事件。

注意：您可以访问 chrome://version，检查您运行的 Chrome 版本。Chrome 大约每 6 周会自动更新到新的主要版本。

如需了解详情，请继续阅读或观看下面的视频！

多客户端远程调试支持

如果您尝试过从 VS Code 或 WebStorm 等 IDE 调试应用，那么您很可能会发现打开开发者工具打乱了调试会话。此外，此问题还导致无法使用开发者工具调试 WebDriver 测试。

从 Chrome 63 开始，开发者工具现在默认支持多个远程调试客户端，无需进行任何配置。

多客户端远程调试是 crbug.com 上最受欢迎的开发者工具问题，也是整个 Chromium 项目中的第三大问题。此外，多客户端支持还为将其他工具与开发者工具集成或以新方式使用这些工具提供了许多有趣的机会。例如：

现在，协议客户端（例如 ChromeDriver 或适用于 VS Code 和 Webstorm 的 Chrome 调试扩展程序）以及 WebSocket 客户端（例如 Puppeteer）可以与开发者工具同时运行。
现在，两个单独的 WebSocket 协议客户端（例如 Puppeteer 或 chrome-remote-interface）可以同时连接到同一标签页。
使用 chrome.debugger API 的 Chrome 扩展程序现在可以与开发者工具同时运行。
现在，多个不同的 Chrome 扩展程序可以同时在同一标签页上使用 chrome.debugger API。

工作区 2.0

工作区在开发者工具中已经存在了一段时间。借助此功能，您可以将开发者工具用作 IDE。您在开发者工具中对源代码进行一些更改，所做的更改将保存到文件系统的本地版本中。

工作区 2.0 在 1.0 的基础上构建而成，增加了更实用的用户体验并改进了转译代码的自动映射。此功能原定于 2016 年 Chrome 开发者峰会 (CDS) 后不久发布，但我们的团队为了解决一些问题而推迟了发布。

观看 CDS 2016 上的开发者工具讲座的“制作”部分（大约 14:28），了解工作区 2.0 的实际应用。

四项新审核

在 Chrome 63 中，Audits 面板新增了 4 项审计：

以 WebP 格式提供图片。
使用具有适当宽高比的图片。
避免使用存在已知安全漏洞的前端 JavaScript 库。
浏览器错误会记录到控制台中。

如需了解如何使用 Audits 面板提高网页质量，请参阅在 Chrome 开发者工具中运行 Lighthouse。

如需详细了解支持 Audits 面板的项目，请参阅 Lighthouse。

使用自定义数据模拟推送通知

已在开发者工具中模拟推送通知已有一段时间，但有一个限制：您无法发送自定义数据。不过，现在借助 Chrome 63 中 Service Worker 窗格中的新 Push 文本框，您可以实现这一点。立即试用：

转到简单推送演示。
点击启用推送通知。
当 Chrome 提示您允许通知时，点击允许。
打开开发者工具。
转到 Service Workers 窗格。
在推送文本框中输入一些内容。

图 1. 通过 Service Worker 窗格中的 Push 文本框使用自定义数据模拟推送通知
点击推送以发送通知。

图 2. 模拟推送通知

使用自定义代码触发后台同步事件

触发后台同步事件的功能在 Service Workers 窗格中也已有一段时间，但现在您可以发送自定义代码：

打开开发者工具。
转到 Service Workers 窗格。
在同步文本框中输入一些文字。
点击同步。

触发自定义后台同步事件

图 3. 点击 Sync 后，开发者工具会向 Service Worker 发送一个包含自定义标记 update-content 的后台同步事件。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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