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

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

使用 CSS 值自动补全

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

输入“粗体”后,样式窗格会自动补全为“font-weight: bold”。

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

如需针对此新功能发送反馈,请参阅 Chromium 问题 #931145

网络设置的新界面

网络面板之前存在可用性问题,当 DevTools 窗口较窄时,无法访问节流菜单等选项。为了解决此问题并简化“网络”面板,我们将一些不太常用的选项移到了新的网络设置 “Network Settings”(网络设置)按钮 窗格后面。

广告联盟设置

图 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 导入和导出功能在 DevTools 中已经存在一段时间了。更易于发现的按钮是此次更新的新变化。

新的 HAR 按钮。

图 4. 新的 HAR 按钮。

如需针对此界面变更发送反馈,请参阅 Chromium 问题 #904585

实时总内存用量

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

实时总内存用量。

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

另请参阅性能监视器,以实时跟踪内存用量。

如需针对此新功能提供反馈,请发送 Chromium 问题 #958177

Service Worker 注册端口号

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

Service Worker 端口。

图 6. Service Worker 端口。

如需针对此界面变更发送反馈,请参阅 Chromium 问题 601286

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

您可以使用应用面板中新增的后台服务部分来监控后台提取后台同步事件。鉴于后台提取和后台同步事件发生在后台,如果开发者工具仅在开发者工具处于打开状态时记录后台提取和后台同步事件,则不会很有用。因此,一旦您开始录制,系统将继续记录后台提取和后台同步事件,即使您关闭标签页,甚至关闭 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 中重复相同的任务。

观看 JoelAndrey 在 2019 年 Google I/O 大会上关于 Puppeteer 的演讲,详细了解 Puppeteer 和 Puppeteer for Firefox。Firefox 公告大约在 4:05 播出。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。