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

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-colorcolor)设置为 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 调用 停止 时运行 已选择。

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

查看效果记录时,点击用户计时部分可查看用户计时SummaryBottom-UpCall TreeEvent Log 标签页中进行衡量。

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

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

通常,您现在可以选择任何部分(主线程用户计时GPUScriptStreamer 等),然后在标签页中查看该部分的活动。

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

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

Memory 面板前后的屏幕截图。

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

developers.google.com 实例旁边有 2 个值:8.7 MB13.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 视频发表评论。

开发者工具的新变化

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