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

Kayce Basques

支持在控制台中重新声明 let 和 class

控制台现在支持重新声明 let 和 class 语句。对于使用控制台试验新 JavaScript 代码的 Web 开发者来说，无法重新声明是常见的烦恼。

例如，以前，使用 let 重新声明局部变量时，控制台会抛出错误：

Chrome 78 中控制台的屏幕截图，显示 let 重新声明失败。

现在，Play 管理中心允许重新声明：

Chrome 80 中控制台的屏幕截图，显示 let 重新声明成功。

Chromium 问题 #1004193

改进了 WebAssembly 调试

开发者工具已开始支持 DWARF 调试标准，这意味着在开发者工具中，对在源语言中跳过代码、设置断点和解析堆栈轨迹的支持更为完善。如需了解完整故事，请参阅Chrome 开发者工具中改进的 WebAssembly 调试功能。

使用 DWARF 的新型 WebAssembly 调试功能的屏幕截图。

“网络”面板更新

在“启动器”标签页中请求启动器链

现在，您可以将网络请求的发起者和依赖项视为嵌套列表。这有助于您了解请求资源的原因，或某个资源（例如脚本）导致了哪些网络活动。

“启动器”标签页中请求启动器链的屏幕截图

在“网络”面板中记录网络活动后，点击相应资源，然后前往发起者标签页查看其请求发起者链：

  • 受检查的资源会以粗体显示。在上面的屏幕截图中，https://web.dev/default-627898b5.js 是被检查的资源。
  • 被检查资源上方的资源是发起者。在上面的屏幕截图中，https://web.dev/bootstrap.js 是 https://web.dev/default-627898b5.js 的发起者。换句话说，https://web.dev/bootstrap.js 导致了对 https://web.dev/default-627898b5.js 的网络请求。
  • 被检查资源下方的资源是依赖项。在上面的屏幕截图中，https://web.dev/chunk-f34f99f7.js 是 https://web.dev/default-627898b5.js 的依赖项。换句话说，https://web.dev/default-627898b5.js 导致了对 https://web.dev/chunk-f34f99f7.js 的网络请求。

Chromium 问题 #842488

在“概览”中突出显示所选网络请求

现在，点击某个网络资源以便进行检查后，概览中的该资源会在“网络”面板中带有蓝色边框。这有助于您检测网络请求是否提前或延后于预期。

突出显示已检查资源的“概览”窗格的屏幕截图。

Chromium 问题 #988253

“Network”面板中的“网址”和“路径”列

使用网络面板中新增的路径和网址列，查看每个网络资源的绝对路径或完整网址。

网络面板中新增的“路径”和“网址”列的屏幕截图。

右键点击 Waterfall 表格标题，然后选择 Path 或 网址 以显示新列。

Chromium 问题 #993366

更新了用户代理字符串

开发者工具支持通过网络状况标签页设置自定义 User-Agent 字符串。User-Agent 字符串会影响附加到网络资源的 User-Agent HTTP 标头，以及 navigator.userAgent 的值。

预定义的 User-Agent 字符串已更新，以反映现代浏览器版本。

“网络条件”标签页中的“用户代理”菜单的屏幕截图。

如需访问网络状况，请打开命令菜单并运行 Show Network Conditions 命令。

Chromium 问题 #1029031

“审核”面板更新

新的配置界面

配置界面采用了全新的自适应设计，并且简化了节流配置选项。如需详细了解节流界面变更，请参阅审核面板节流。

新的配置界面。

“覆盖面”标签页更新

按函数或按代码块的覆盖率模式

“覆盖率”标签页中新增了一个下拉菜单，可让您指定应按函数还是代码块收集代码覆盖率数据。按分块覆盖率更详细，但收集成本也更高。DevTools 现在默认使用按函数的覆盖率。

覆盖率模式下拉菜单。

现在，必须通过页面重新加载来启动覆盖率

由于覆盖率数据不可靠，因此移除了在不重新加载网页的情况下切换代码覆盖率的功能。例如，如果某个函数的执行时间已很久，并且 V8 的垃圾回收器已将其清理掉，则该函数可能会被报告为未使用。

Chromium 问题 #1004203

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。