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

Kayce Basques

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

控制台现在支持重复声明 let 和 class 语句。无法重新声明 是 Web 开发者经常遇到的一个烦恼，他们使用控制台来试验新的 JavaScript 代码。

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

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

现在，控制台允许重复声明：

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

Chromium 问题 #1004193

改进了 WebAssembly 调试功能

开发者工具已开始支持 DWARF 调试标准，这意味着将增强对 单步调试代码、设置断点，以及以您的源语言解析堆栈轨迹， 开发者工具。如需了解完整详情，请参阅改进了 Chrome 开发者工具中的 WebAssembly 调试功能。

由 DWARF 提供支持的新 WebAssembly 调试的屏幕截图。

“网络”面板更新

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

您现在可以以嵌套列表的形式查看网络请求的发起者和依赖项。这可以 可帮助您了解请求资源的原因，或特定资源（例如 脚本的形式）导致的。

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

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

  • 检查的资源以粗体显示。在上方的屏幕截图中，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

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

点击网络资源进行检查后，“网络”面板现在会显示蓝色边框 概览中有关该资源的详细信息。这有助于您检测网络请求 发生时间比预期早或晚

“Overview”窗格的屏幕截图，其中突出显示了所检查的资源。

Chromium 问题 #988253

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

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

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

右键点击广告瀑布流表格标题，然后选择路径或网址以显示新列。

Chromium 问题 #993366

已更新用户代理字符串

DevTools 支持通过 Network Conditions 标签页设置自定义用户代理字符串。通过 用户代理字符串会影响附加到网络资源的 User-Agent HTTP 标头，以及 值为 navigator.userAgent。

预定义的用户代理字符串已更新，以反映现代浏览器版本。

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

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

Chromium 问题 #1029031

审核面板更新

新的配置界面

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

新的配置界面。

“覆盖率”标签页更新

每个函数或每个块覆盖模式

“覆盖率”标签页包含一个新的下拉菜单，可让您指定代码覆盖率数据 应按函数或块进行收集。每个块的覆盖范围更加详细， 但收集成本也要高得多。现在，在默认情况下，DevTools 使用按函数覆盖率。

覆盖率模式下拉菜单。

现在必须通过重新加载网页来启动覆盖范围

已移除在不重新加载网页的情况下切换代码覆盖率的功能，因为覆盖率数据 不可靠。例如，如果函数在很久以前才执行，则可能会被报告为未使用 V8 的垃圾回收器已经将其清理干净。

Chromium 问题 #1004203

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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