Цветущие вишневые деревья в провинции Цзянсу

百度 “不少评估表彰活动组织轰轰烈烈，验收草草收场，学校参与就发一块铜牌。

Kayce Basques

Google 用户调研。

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

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

支持多客户端远程调试

如果您曾尝试从 VS Code 或 WebStorm 等 IDE 调试应用，您可能已经发现，打开开发者工具会扰乱调试会话。此问题还导致无法使用 DevTools 调试 WebDriver 测试。

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

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

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

工作区 2.0

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

Workspaces 2.0 基于 1.0 版本构建，添加了更实用的用户体验，并改进了转译代码的自动映射功能。此功能原计划在 2016 年 Chrome 开发者峰会 (CDS) 后不久发布，但团队为了解决一些问题而推迟了发布时间。

观看 CDS 2016 上 DevTools 讲座的“创作”部分（大约在 14:28），了解工作区 2.0 的实际应用。

四项新审核

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

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

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

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

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

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

  1. 前往 Simple Push Demo。
  2. 点击启用推送通知。
  3. 当 Chrome 提示您允许显示通知时，点击允许。
  4. 打开开发者工具。
  5. 前往服务工作线程窗格。

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

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

    图 1. 通过服务工作线程窗格中的推送文本框模拟包含自定义数据的推送通知

  7. 点击推送即可发送通知。

    模拟推送通知

    图 2. 模拟推送通知

使用自定义标记触发后台同步事件

触发后台同步事件已在 Service Workers 窗格中存在一段时间，但现在您可以发送自定义标记：

  1. 打开开发者工具。
  2. 前往服务工作线程窗格。
  3. 在 Sync 文本框中输入一些文本。
  4. 点击同步。

触发自定义后台同步事件

图 3. 点击同步后，DevTools 会向服务工作线程发送一个带有自定义标记 update-content 的后台同步事件

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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