一、在控制台中支持 let 和 class 重新声明
控制台现在支持 let 和 class 语句的重新声明，当我们在使用控制台调试 JavaScript 代码代码段时，对于已通过 let 或 class 声明的，无法再次声明是一个普遍的烦恼。
在控制台外部或单个控制台输入的脚本中，重新声明 let 或 class 语句仍然会导致 SyntaxError 。
例如，当 x 已被 let 声明，当再次使用 let 声明这个局部变量时，控制台将抛出一个错误：
现在，控制台允许重新声明：
二、改进WebAssembly调试
DevTools 已经开始支持 DWARF 调试标准，这意味着在 DevTools 中增加了对代码步进、设置断点和解析源语言中的堆栈跟踪的支持。在 Chrome DevTools 中查看改进的 WebAssembly 调试的完整事件。
三、Network 更新
1. 在启动程序选项卡中请求启动程序链
现在，你可以将网络请求的启动器和依赖项作为嵌套列表查看，这可以帮助你理解为什么要请求某个资源，或者某个资源(例如脚本)导致了什么网络活动。
在网络面板中记录网络活动之后，单击资源，然后转到Initiator选项卡查看其请求引发程序链：
- 检查的资源是粗体。在上面的截图中，web.dev/default-627… 是被检查的资源；
- 被检查资源之上的资源是发起者。在上面的截图中，web.dev/bootstrap.j… 是 web.dev/default-627… 的发起人，换句话说，是 web.dev/bootstrap.j… 引起了 web.dev/default-627… 的网络请求；
- 被检查资源下面的资源是依赖关系。在上面的截图中，web.dev/chunk-f34f9… 是 web.dev/default-627… 的属地换句话说，是 web.dev/default-627… 引起了 web.dev/chunk-f34f9… 的网络请求；
还可以通过按住Shift并将鼠标悬停在网络资源上来访问启动程序和依赖项信息。
2. 在 Overview 中突出显示选中的网络请求
在单击网络资源以便对其进行检查之后，Network 面板现在在 Overview 中在该资源周围放置了一个蓝色框。 这可以帮助你检测网络请求是否比预期的发生得早或更晚。
3. Network 面板中显示 Url 列 和 Path 列
使用 Network 面板中新的 Path 列和 Url 列查看每个网络资源的绝对路径或完整URL。
4. 更新了 User-Agent 字符串
DevTools支持通过Network Conditions 选项卡设置自定义 User-Agent 字符串，User-Agent 字符串会影响连接到网络资源的 User-Agent HTTP 标头以及 navigator.userAgent 的值。
预定义的 User-Agent 字符串已更新，以反映现代浏览器版本。
你还可以在 Device 模式下设置 User-Agent 字符串。
四、Audits 更新
新的配置界面
配置 UI 采用了新的响应式设计，并且节流配置选项也得到了简化。查看 Audits Panel Throttling 了解更多变更信息。
五、覆盖标签更新
1. 按功能或按块覆盖模式
Coverage 选项卡有一个新的下拉菜单，允许你指定应该为每个函数还是每个块收集代码覆盖率数据。每个块的覆盖范围更详细，但收集起来也更昂贵。DevTools现在默认使用每个函数覆盖。
在HTML文件中，你可能会看到较大的代码覆盖率差异，具体取决于你是按功能使用还是按块模式使用。 使用按功能模式时，HTML文件中的内联脚本被视为功能。 如果脚本完全执行，则DevTools会将整个脚本标记为已使用的代码。 只有脚本完全不执行时，DevTools才会将该脚本标记为未使用的代码。
2. 必须通过页面重新加载来启动覆盖率
由于覆盖率数据不可靠，在不重载页面的情况下切换代码覆盖率已经被移除。例如，如果一个函数的执行时间很长，并且V8的垃圾收集器已经清理了它，那么这个函数可以被报告为未使用。
六、往期精彩系列
是时候抛弃Postman了，试试 VS Code 自带神器插件👏👏👏
想看往期更过系列文章，点击前往 github 博客主页
本文翻译自What's New In DevTools (Chrome 80)
如果觉得不错，就点个赞吧！👍👍👍
六、走在最后
-
❤️玩得开心，不断学习，并始终保持编码。👨💻
-
如有任何问题或更独特的见解，欢迎评论或直接联系瓶子君（扫码关注公众号回复 123 即可）！👀👇
-
👇欢迎关注：前端瓶子君，每日更新！👇
