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

在控制台中支持 letclass 声明

控制台现在支持重复声明 letclass 语句。无法重新声明 是 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.jshttps://web.dev/default-627898b5.js 的发起者。在其他 字词,https://web.dev/bootstrap.js 导致了 https://web.dev/default-627898b5.js
  • 所检查的资源下面的资源是依赖项。dependencies在上面的屏幕截图中, https://web.dev/chunk-f34f99f7.jshttps://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 视频发表评论。

开发者工具的新变化

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