此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

在所有广告网络标头中搜索
在 Styles 窗格中预览 CSS 变量值
以抓取方式复制
新审核、桌面配置选项和查看跟踪记录
停止无限循环
“Performance”标签页中的“User Timing”
内存面板中明确列出的 JavaScript 虚拟机实例
Sources 面板中的 Network 标签页已重命名为 Page 标签页
深色主题更新
安全性面板中的证书透明度信息
性能面板中的网站隔离功能

版本说明的视频版本：

注意：您可以在 chrome://version 中查看您正在运行的 Chrome 版本。如果您运行的是早期版本，这些功能将不存在。如果您运行的是更高版本，这些功能可能已更改。Chrome 大约每 6 周会自动更新到新的主要版本。

在所有网络标头和响应中进行搜索

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

使用新的“Network Search”窗格搜索“cache-control”文字。

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

点击匹配大小写 即可让查询区分大小写。点击使用正则表达式 以显示与您提供的模式匹配的任何结果。您无需使用正斜线封装正则表达式。

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

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

搜索窗格界面更新

全局搜索窗格的界面现在与新网络搜索窗格的界面一致。现在，它还可以美观输出结果，以帮助提高可扫描性。

新旧界面。

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

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

Styles 窗格中的 CSS 变量值预览

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

CSS 变量颜色值示例。

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

以抓取方式复制

右键点击某个网络请求，然后依次选择 Copy > Copy as Fetch，将该请求的等效代码 (fetch()) 复制到剪贴板。

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

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

开发者工具会生成如下代码：

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 项审核，包括：

预加载密钥请求。预加载请求可以通过提示浏览器尽快下载对关键呈现路径至关重要的资源，从而缩短网页加载时间。
避免加载网页字体时看到不可见的文本。确保文本在加载网页字体时可见，可以加快网页对用户的实用性。

新的配置选项

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

保留桌面视口和用户代理设置。换言之，您可以禁止审核面板模拟移动设备。
停用网络和 CPU 节流。
跨审核保留存储空间，例如 LocalStorage 和 IndexedDB。

新增审核配置选项。

图 6. 新增审核配置选项

查看跟踪记录

审核网页后，点击 View Trace 可在 Performance 面板中查看您的审核所依据的加载性能数据。

图 7. View Trace 按钮

停止无限循环

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

打开来源面板。
点击暂停。该按钮将更改为 Resume Script Execution 图标。
按住 Resume Script Execution 图标，然后选择 Stop Current JavaScript Call（停止当前 JavaScript 调用）。

在上面的视频中，时钟通过 setInterval() 计时器进行更新。点击 Start Infinite Loop 即会运行一个永不停止的 do...while 循环。间隔会恢复，因为在选择 Stop Current JavaScript Call（停止当前 JavaScript 调用）时，它未运行。

“性能”标签页中的“用户计时”

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

在“Bottom-Up”标签页中查看 User Timing 测量值。

图 8. 在 Bottom-Up 标签页中查看 User Timing 测量值。用户计时部分左侧的蓝条表示已选择该选项。

一般情况下，您现在可以选择任何部分（Main Thread、User Timing、GPU、ScriptStreamer 等），并在标签页中查看该部分的活动。

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

Memory 面板现在会明确列出与页面关联的所有 JavaScript 虚拟机实例，而不是像以前一样将它们隐藏在 Target 下拉菜单后面。

“内存”面板之前和之后的屏幕截图。

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

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

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

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

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

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

深色主题更新

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

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

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

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

现在，Security 面板会报告证书透明度信息。

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

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

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

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

“Performance”记录中的按进程火焰图。

图 13. Performance 记录中按进程的火焰图

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。