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

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-colorcolor)的值设置为 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 部分,以在 SummaryBottom-UpCall TreeEvent Log 标签页中查看 User Timing 测量结果。

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

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

一般来说,您现在可以选择任何部分(主线程用户时间GPUScriptStreamer 等),并在标签页中查看该部分的活动。

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

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

内存面板的屏幕截图(前后对比)。

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

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

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

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

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

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

深色主题更新

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

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

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

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

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

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

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

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

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

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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