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

Kayce Basques
Kayce Basques

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

。

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

多客户端远程调试支持

如果您尝试过在 VS Code 或 WebStorm 等 IDE 中调试应用，可能已经 发现打开开发者工具打乱了调试会话。此外，由于该问题， 使用开发者工具调试 WebDriver 测试。

从 Chrome 63 开始，开发者工具现在默认支持多个远程调试客户端， 所需的配置

多客户端远程调试是 crbug.com 上最热门的开发者工具问题，并且 是整个 Chromium 项目的第 3 项。此外，多客户支持 将其他工具与开发者工具集成，或在新的 方法。例如：

  • 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 的基础上构建而成，增加了更实用的用户体验并改进了转译内容的自动映射 代码。此功能最初预定在 Chrome 开发者峰会结束后不久发布 (CDS) 2016，但为了解决一些问题，团队推迟了该活动。

查看“创作”（约 14:28）部分（大约 14 分 28 秒）2016 年 CDS 开发者工具讲座中介绍工作区 2.0 的实际应用。

四项新审核

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

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

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

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

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

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

  1. 转到简单推送演示。
  2. 点击启用推送通知。
  3. 当 Chrome 提示您允许通知时，点击允许。
  4. 打开开发者工具。
  5. 转到 Service Workers 窗格。

  6. 在推送文本框中输入一些内容。

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

    图 1. 通过推送文本框（位于 Service Worker 窗格

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

    模拟推送通知

    图 2. 模拟推送通知

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

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

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

触发自定义后台同步事件

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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