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

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

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

多客户端远程调试支持

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

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

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

  • ChromeDriver 等协议客户端或适用于 VS Code 和 Webstorm 的 Chrome 调试扩展程序; 和 WebSocket 客户端(如 Puppeteer)现在可以与开发者工具同时运行。
  • 两个单独的 WebSocket 协议客户端(如 Puppeteerchrome-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 视频发表评论。

开发者工具的新变化

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