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

Kayce Basques

您好！以下是 Chrome 76 中 Chrome 开发者工具的新变化。

自动填充 CSS 值

向 DOM 节点添加样式声明时，有时声明值比声明名称更容易记住。例如，在将 <p> 节点设为粗体时，值 bold 可能比名称 font-weight 更容易记住。“样式”窗格的自动补全界面现在支持 CSS 值。如果您记得所需的关键字值，但不记得属性名称，请尝试输入该值，自动补全功能应会帮助您找到所需的名称。

图 1. 输入 bold 后，“样式”窗格会自动补全为 font-weight: bold。

请通过 Chromium 问题 #931145 发送对此新功能的反馈。

网络设置的新界面

以前，当开发者工具窗口较窄时，网络面板存在一个易用性问题，即无法访问节流菜单等选项。为了解决此问题并清理“网络”面板，我们已将一些不太常用的选项移至新的网络设置 窗格中。

图 2. 广告资源网设置。

以下选项已移至网络设置：使用大型请求行、按帧分组、显示概览、捕获屏幕截图。图 3 显示了旧位置与新位置的对应关系。

图 3. 将旧位置映射到新位置。

如需针对此界面变更发送反馈，请访问 Chromium 问题 #892969。

HAR 导出中的 WebSocket 消息

现在，当您从“网络”面板导出 HAR 文件以与同事分享网络日志时，您的 HAR 文件会包含 WebSocket 消息。_webSocketMessages 属性以英文下划线开头，表示这是一个自定义字段。

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

请通过 Chromium 问题 #496006 针对此新功能发送反馈。

HAR 导入和导出按钮

借助新的以 HAR 格式保存所有内容 和导入 HAR 文件 按钮，您可以更轻松地与同事分享网络日志。HAR 导入和导出功能已在开发者工具中存在一段时间。更易于发现的按钮是新变化。

图 4. 新的 HAR 按钮。

请针对此界面变更向 Chromium 问题 #904585 发送反馈。

实时总内存用量

“内存”面板现在会实时显示内存总用量。

图 5. “内存”面板底部显示，该网页总共使用了 43.4 MB 的内存。209 KB/秒表示总内存用量每秒增加 209 KB。

另请参阅性能监控器，了解如何实时跟踪内存使用情况。

请通过 Chromium 问题 #958177 发送对此新功能的反馈。

Service Worker 注册端口号

服务工作线程窗格现在在其标题中包含端口号，以便您更轻松地跟踪正在调试的服务工作线程。

图 6. Service Worker 端口。

请向 Chromium 问题 #601286 发送有关此界面变更的反馈。

检查 Background Fetch 和 Background Sync 事件

使用应用面板的新后台服务部分监控后台提取和后台同步事件。鉴于后台提取和后台同步事件发生在后台，如果开发者工具仅在打开时记录后台提取和后台同步事件，那就没什么用了。因此，一旦开始记录，即使您关闭标签页甚至关闭 Chrome，系统也会继续记录后台提取和后台同步事件。

前往应用面板，打开后台提取或后台同步标签页，然后点击记录 开始记录事件。点击活动即可查看有关该活动的更多信息。

图 7. “后台提取”窗格。Maxim Salnikov 提供的演示。

图 8. “后台同步”窗格。

请通过 Chromium 问题 #927726 发送有关这些新功能的反馈。

适用于 Firefox 的 Puppeteer

Puppeteer for Firefox 是一个新的实验性项目，可让您通过 Puppeteer API 自动执行 Firefox 操作。换句话说，您现在可以使用相同的 Node API 自动执行 Firefox 和 Chromium，如下面的视频所示。

运行 node example.js 后，Firefox 会打开，并且文本 page 会插入到 Puppeteer 文档网站的搜索框中。然后，在 Chromium 中重复执行同一任务。

观看 2019 年 Google I/O 大会上 Joel 和 Andrey 带来的 Puppeteer 主题演讲，详细了解 Puppeteer 和 Puppeteer for Firefox。Firefox 公告大约在 4:05 发布。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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