开发者工具的新变化 (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。您在开发者工具中对源代码进行一些更改,这些更改将保留在文件系统上的项目本地版本中。

Workspace 2.0 以 1.0 为基础,增加了更实用的用户体验并改进了转译代码的自动映射功能。此功能原定于 2016 年 Chrome 开发者峰会 (CDS) 后不久发布,但为了解决一些问题,该团队将其推迟了。

请查看 CDS 2016 上开发者工具演讲的“创作”部分(14 分 28 秒左右),了解工作区 2.0 的实际运用。

四项新审核

在 Chrome 63 中,审核面板新增了 4 项审核:

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

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

如需详细了解支持审核面板的项目,请参阅 Lighthouse

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

模拟推送通知在开发者工具中已经推出一段时间了,但有一项限制:您无法发送自定义数据。不过,随着 Chrome 63 中的 Service Worker 窗格即将推出新的 Push 文本框,您现在可以做到这一点。立即试用:

  1. 转到简单推送演示
  2. 点击 Enable Push Notifications
  3. 当 Chrome 提示您允许通知时,请点击允许
  4. 打开开发者工具。
  5. 转到 Service Workers 窗格。
  6. Push 文本框中,添加代码。

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

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

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

    模拟推送通知

    图 2. 模拟推送通知

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

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

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

触发自定义后台同步事件

图 3. 点击 Sync 后,DevTools 会向 Service Worker 发送一个带有自定义标记 update-content 的后台同步事件

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59