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

Kayce Basques

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

使用 CSS 值自动补全

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

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

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

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

新的投放网络设置界面

之前，“网络”面板存在易用性问题，即节流菜单等选项 在开发者工具窗口较窄时无法访问。若要解决此问题并使“Network”面板整洁有序 将一些不太常用的选项移到了新的广告联盟设置下 “广告联盟设置”按钮 窗格。

投放网络设置

图 2. 广告联盟设置。

以下选项已移至网络设置：使用大型请求行、分组依据 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，更轻松地与同事共享网络日志 导出 和导入 HAR 文件 导入 按钮。HAR 导入和导出 在开发者工具中已存在一段时间。新更改让更容易发现的按钮。

新的 HAR 按钮。

图 4. 新的 HAR 按钮。

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

实时内存总用量

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

实时总内存用量。

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

另请参阅性能监视器以实时跟踪内存使用情况。

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

Service Worker 注册端口号

现在，Service Workers 窗格的标题中包含端口号，可让您更轻松地进行跟踪 您正在调试哪个 Service Worker。

Service Worker 端口。

图 6. Service Worker 端口。

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

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

您可以使用 Application 面板中新增的 Background Services 部分来监控后台 Fetch 和后台同步事件。鉴于后台提取和后台同步事件 发生在后台，如果开发者工具只记录背景，那就没什么用了 开发者工具打开时的 Fetch 和 Background Sync 事件。开始录制后，背景 系统仍会继续记录抓取和后台同步事件，即使在您关闭该标签页后也是如此，并且 即使您关闭了 Chrome 也无妨

转至应用面板，打开后台提取或后台同步标签页，然后 点击 Record 录制 以开始记录日志。 事件。点击某个活动即可查看其详细信息。

“后台提取”窗格。

图 7. “后台提取”窗格。演示，作者：Maxim Salniov。

“Background Sync”窗格。

图 8. “Background Sync”窗格。

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

适用于 Firefox 的 Puppeteer

Puppeteer for Firefox 是一个新的实验性项目，可让您通过 Puppeteer API。换句话说，您现在可以使用相同的 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、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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