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

Kayce Basques

Chrome 67 中的开发者工具将推出以下新功能和重大变更：

视频版版本说明：

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

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

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

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

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

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

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

旧版和新版界面。

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

按 Command+Option+F（Mac）或 Control+Shift+F（Windows、Linux、ChromeOS）即可打开全局搜索。您也可以通过命令菜单打开它。

Styles 窗格中的 CSS 变量值预览

现在，当 CSS 颜色属性（例如 background-color 或 color）的值设置为 CSS 变量时，DevTools 会显示该颜色的预览。

CSS 变量颜色值示例。

图 4. 在左侧的旧版界面中，color: var(--main-color) 旁边没有颜色预览，而在右侧的新版界面中，则有

以提取形式复制

右键点击网络请求，然后依次选择 Copy > Copy As Fetch，将该请求的 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"
});

“审核”面板更新

新审核

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

新的配置选项

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

  • 保留桌面视口和用户代理设置。换句话说，您可以阻止 Audits 面板模拟移动设备。
  • 停用网络和 CPU 节流功能。
  • 在每次审核中保留存储空间（例如 LocalStorage 和 IndexedDB）。

新的审核配置选项。

图 6. 新的审核配置选项

查看跟踪记录

对网页进行审核后，点击查看轨迹，在性能面板中查看审核依据的加载性能数据。

“查看轨迹”按钮。

图 7. 查看跟踪记录按钮

停止无限循环

如果您经常使用 for 循环、do...while 循环或递归，那么您在开发网站时可能无意中执行了无限循环。如需停止无限循环，您现在可以执行以下操作：

  1. 打开 Sources 面板。
  2. 点击暂停 暂停。该按钮会更改为继续脚本执行 继续。
  3. 按住继续执行脚本 继续，然后选择停止当前 JavaScript 调用 停止。

在上面的视频中，时钟是通过 setInterval() 计时器更新的。点击启动无限循环会运行一个永不停止的 do...while 循环。由于在选择 Stop Current JavaScript Call 停止 时，该间隔时间未在运行，因此系统会恢复该间隔时间。

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

查看效果记录时，点击 User Timing 部分，以在 Summary、Bottom-Up、Call Tree 和 Event Log 标签页中查看 User Timing 测量结果。

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

图 8. 在自下而上标签页中查看用户时间测算指标。用户时间部分左侧的蓝色条形表示该部分处于选中状态。

一般来说，您现在可以选择任何部分（主线程、用户时间、GPU、ScriptStreamer 等），并在标签页中查看该部分的活动。

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

内存面板现在会清晰地列出与网页关联的所有 JavaScript VM 实例，而不是像以前那样将它们隐藏在 Target 下拉菜单后面。

内存面板的屏幕截图（前后对比）。

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

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

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

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

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

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

深色主题更新

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

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

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

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

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

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

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

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

如果您已启用网站隔离，性能面板现在会为每个进程提供一个火焰图，以便您查看每个进程所产生的工作量总和。

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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