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

Google 用户调研。

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

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

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

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

Chromium 问题 #1004193

改进了 WebAssembly 调试

开发者工具已开始支持 DWARF 调试标准，这意味着开发者工具将更全面地支持在源代码语言中单步执行代码、设置断点和解析堆栈轨迹。如需了解完整详情，请参阅 Chrome 开发者工具中改进的 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

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

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

右键点击瀑布图表头，然后选择路径或 网址 以显示新列。

Chromium 问题 #993366

更新了用户代理字符串

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

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

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

Chromium 问题 #1029031

“审核”面板更新

新配置界面

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

“覆盖面”标签页更新

按功能或按块覆盖模式

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

现在必须通过重新加载网页来启动覆盖率检测

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

Chromium 问题 #1004203

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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