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

Kayce Basques

Chrome 67 中的开发者工具即将发布的新功能和重大更改包括：

版本说明的视频版本：

打开网络面板，然后按 Command+F (Mac) 或 Ctrl+F （Windows、Linux、ChromeOS）打开新的网络搜索窗格。开发者工具会搜索标头 针对您提供的查询的所有网络请求及正文。

搜索文本“cache-control”新的“网络搜索”窗格

图 1. 使用新的“网络搜索”窗格搜索文字“cache-control”

点击 Match Case（匹配大小写）图标 匹配大小写，以进行查询 区分大小写。点击使用正则表达式 按 使用正则表达式 可显示所有匹配的结果 您提供的格式您无需使用正斜线将正则表达式括起来。

“网络搜索”窗格中的正则表达式查询。

图 2. “网络搜索”窗格中的正则表达式查询。

现在，Global Search 窗格的界面与新的 Network Search 窗格的界面一致。现在 还会美观输出结果，以提高可读性。

新旧界面。

图 3. 左侧是旧版界面，右侧是新版界面

按 Command + Option + F (Mac) 或 Ctrl + Shift + F（Windows、Linux、ChromeOS）以打开全局 搜索。也可以通过命令菜单打开该命令。

Styles 窗格中的 CSS 变量值预览

将 CSS 颜色属性的值（例如 background-color 或 color）设置为 CSS 时 变量，开发者工具现在会显示该颜色的预览。

CSS 变量颜色值示例。

图 4. 在左侧的旧版界面中， color: var(--main-color)，而在右侧的新界面中，

以提取形式复制

右键点击网络请求，然后选择复制 >点击提取时复制即可复制 与 fetch() 等效的代码，用于将该请求发送到您的剪贴板。

为请求复制与 fetch()等效的代码。

图 5. 为请求复制与 fetch() 等效的代码

DevTools 会生成如下代码：

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

审核面板更新

新审核

Audits 面板新增了 2 项审核，包括：

新的配置选项

您现在可以将 Audits 面板配置为：

  • 保留桌面视口和用户代理设置。也就是说，您可以阻止审核 来模拟移动设备
  • 停用网络和 CPU 节流。
  • 在所有审核中保留存储空间（例如 LocalStorage 和 IndexedDB）。

新的审核配置选项。

图 6. 新审核配置选项

查看跟踪记录

审核页面后，点击 View Trace 即可查看审核的加载性能数据 效果面板中的基准数据。

“View Trace”按钮。

图 7. View Trace 按钮

停止无限循环

如果您经常使用 for 循环、do...while 循环或递归，那么您可能已执行 无限循环。如需停止无限循环，您现在可以：

  1. 打开来源面板。
  2. 点击暂停图标 暂停。该按钮将变为继续 脚本执行 继续。
  3. 按住继续执行脚本 继续，然后选择停止 当前 JavaScript 调用 停止。

在上面的视频中，通过 setInterval() 计时器更新时钟。点击开始 无限循环会运行永不停止的 do...while 循环。此间隔会恢复，因为它并没有 在停止当前 JavaScript 调用 停止 时运行 已选择。

“效果”标签页中的“用户计时”

查看效果记录时，点击用户计时部分可查看用户计时 在 Summary、Bottom-Up、Call Tree 和 Event Log 标签页中进行衡量。

在“自下而上”(Bottom-Up) 标签页中查看用户计时衡量标准。

图 8. 在“Bottom-Up”标签页中查看用户计时指标。该规则左侧的蓝色条 User Timing 部分指明已选中该单元。

通常，您现在可以选择任何部分（主线程、用户计时、GPU、 ScriptStreamer 等），然后在标签页中查看该部分的活动。

在“内存”面板中选择 JavaScript 虚拟机实例

内存面板现在会明确列出与网页关联的所有 JavaScript 虚拟机实例， 而不是像之前那样将它们隐藏在目标下拉菜单后面。

Memory 面板前后的屏幕截图。

图 9. 在左侧的旧版界面中，JavaScript 虚拟机实例隐藏在 目标下拉菜单，而在右侧的新界面中，目标显示在选择 JavaScript 虚拟机实例表

developers.google.com 实例旁边有 2 个值：8.7 MB 和 13.3 MB。左侧 value 表示因 JavaScript 而分配的内存。正确的值表示所有操作系统内存 分配的任何实例数。右侧值包含左侧值。 在 Chrome 的任务管理器中，左边的值对应 JavaScript Memory，右边的值 对应于 Memory Footprint。

“网络”标签页已重命名为“网页”标签页

在来源面板上，网络标签页现已更名为网页标签页。

两个并排的开发者工具窗口，演示名称更改。

图 10. 在左侧的旧版界面中，显示页面资源的标签页称为 网络，而在右侧的新界面中，则称为网页

深色主题更新

Chrome 67 对深色主题的配色方案进行了一些细微更改。例如， 断点图标和当前执行行现在为绿色。

新断点图标和当前执行配色方案行的屏幕截图。

图 11. 新断点图标和当前执行配色方案行的屏幕截图

“安全性”面板中的证书透明度政策

安全性面板现在会报告证书透明度信息。

“安全性”面板中的证书透明度信息。

图 12. “安全性”面板中的认证透明度信息

“性能”面板中的网站隔离

如果您已启用网站隔离，现在性能面板会为以下各项提供火焰图： 这样您就能看到每个进程引发的总工作量。

性能记录中的各进程火焰图。

图 13. 性能记录中的各进程火焰图

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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