此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

使用 CSS 值自动补全

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

输入“bold”后，“Styles”窗格会自动填充为“font-weight: bold”。

图 1. 输入 bold 后，“Styles”窗格会自动填充为 font-weight: bold。

请将有关这项新功能的反馈发送到 Chromium 问题 931145。

用于广告联盟设置的新界面

“Network”面板之前存在一个易用性问题，即当开发者工具窗口变窄时，无法使用限制菜单等选项。为了解决此问题并使“网络”面板井然有序，一些不太常用的选项已移至新的网络设置 窗格。

投放网络设置

图 2. 广告网络设置。

以下选项已移至广告联盟设置：Use Large Request Rows、Group By Frame、Show Overview、Capture Screenshots。图 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 导入和导出按钮

使用新的 Export All As HAR With Content 和 Import HAR File 按钮，更轻松地与同事共享网络日志。HAR 导入和导出功能在开发者工具中已存在一段时间。更易发现的按钮进行了新的更改。

新的 HAR 按钮。

图 4. 新的 HAR 按钮。

请将有关此界面更改的反馈发送到 Chromium 问题 904585。

实时总内存用量

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

实时总内存用量。

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

另请参阅 Performance Monitor，以实时跟踪内存使用情况。

请将有关这项新功能的反馈发送到 Chromium 问题 958177。

Service Worker 注册端口号

现在，Service Workers 窗格的标题中会包含端口号，以便您更轻松地跟踪正在调试的 Service Worker。

Service Worker 端口。

图 6. Service Worker 端口。

请将有关此界面更改的反馈发送到 Chromium 问题 601286。

检查后台提取和后台同步事件

您可以使用 Application 面板的 Background Services 部分来监控后台提取和后台同步事件。鉴于后台提取和后台同步事件发生在后台，因此如果开发者工具仅在开发者工具打开时记录后台提取和后台同步事件，则不会有太大的用处。因此，一旦您开始记录，系统将继续记录“后台提取”和“后台同步”事件，即便在您关闭标签页后，甚至在关闭 Chrome 后也是如此。

转到 Application 面板，打开 Background Fetch 或 Background Sync 标签页，然后点击 Record 以开始记录事件。点击某个活动即可查看其详细信息。

“Background Fetch”窗格。

图 7. “Background Fetch”窗格。演示：Maxim Salnikov。

“Background Sync”窗格。

图 8. “Background Sync”窗格。

请将这些新功能的反馈发送给 Chromium 问题 927726。

适用于 Firefox 的 Puppeteer

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

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

观看 2019 年 Google I/O 大会上 Joel 和 Andrey 发表的 Puppeteer 演讲，以详细了解适用于 Firefox 的 Puppeteer 和 Puppeteer。Firefox 会在 4:05 左右公布公告。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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