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

Kayce Basques

欢迎回来！Chrome 63 中将推出的 DevTools 新功能包括：

请继续阅读或观看下方视频，了解详情！

多客户端远程调试支持

如果您曾尝试通过 VS Code 或 WebStorm 等 IDE 调试应用，可能发现打开 DevTools 会破坏调试会话。此问题还导致无法使用 DevTools 调试 WebDriver 测试。

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

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

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

Workspaces 2.0

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

Workspaces 2.0 基于 1.0 构建，增强了用户体验，并改进了转译后的代码的自动映射。此功能原定于 2016 年 Chrome 开发者峰会 (CDS) 后不久发布，但该团队推迟了发布时间，以解决一些问题。

请观看 2016 年 CDS 大会上 DevTools 演讲的“Authoring”（创作）部分（大约 14:28 处），了解 Workspaces 2.0 的实际运作方式。

四项新审核

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

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

请参阅在 Chrome 开发者工具中运行 Lighthouse，了解如何使用审核面板来改进网页质量。

如需详细了解为审核面板提供支持的项目，请参阅 Lighthouse。

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

模拟推送通知在 DevTools 中已经存在一段时间了，但有一个限制：您无法发送自定义数据。不过，现在您可以通过 Chrome 63 中服务工作器窗格中的新 Push 文本框来实现这一点。立即尝试：

  1. 前往简单推送演示。
  2. 点击启用推送通知。
  3. 当 Chrome 提示您允许显示通知时，点击允许。
  4. 打开 DevTools。
  5. 前往 Service Workers 窗格。

  6. 在 Push 文本框中写入内容。

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

    图 1. 通过 Service Worker 窗格中的 Push 文本框模拟包含自定义数据的推送通知

  7. 点击推送以发送通知。

    模拟的推送通知

    图 2. 模拟的推送通知

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

触发后台同步事件也已在服务工件窗格中存在一段时间了，但现在您可以发送自定义代码：

  1. 打开 DevTools。
  2. 前往 Service Workers 窗格。
  3. 在同步文本框中输入一些文本。
  4. 点击同步。

触发自定义后台同步事件

图 3. 点击同步后，DevTools 会向 Service Worker 发送包含自定义标记 update-content 的后台同步事件

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。