多图预警，种草 DevTools 新特性（Chrome 80）

今天，我将为您隆重揭晓 Chrome 80 中 DevTools 的一些新特性，这些特性将帮助您更有针对性的解决前端调试问题。现在，让我们赶紧进入正题！

控制台支持 Let 和 Class 语句的重新声明

在使用控制台调试 JavaScript 代码时，我们经常会遇到一个问题：对于已通过 let 或 class 声明的变量或类，无法再次声明。

举个例子，假设我们有一个名为 foo 的变量，我们想在控制台中重新声明它：

let foo = 10;
foo = 20; // 重新声明

这时，控制台会报错：

Uncaught SyntaxError: Identifier 'foo' has already been declared

这是因为 JavaScript 变量只能声明一次。为了解决这个问题，我们可以使用 const 声明变量，但这样一来，变量就无法被重新赋值了。

现在，DevTools 已经支持 let 和 class 语句的重新声明。这意味着，您可以在控制台中重新声明已通过 let 或 class 声明的变量或类，而不会报错。

例如，我们现在可以这样重新声明 foo 变量：

let foo = 10;
foo = 20; // 重新声明
console.log(foo); // 输出 20

DevTools 开始支持 DWARF 调试标准

DevTools 已经开始支持 DWARF 调试标准。DWARF 是一个用于调试信息的标准，它可以帮助调试器更准确地定位问题。

现在，如果您在 Chrome 中调试一个使用 DWARF 调试信息的 JavaScript 代码段，DevTools 将能够更准确地显示代码段的执行情况。

例如，如果您在一个使用 DWARF 调试信息的 JavaScript 代码段中设置了一个断点，DevTools 将能够更准确地定位到代码段中引发错误的行。

全局 EventListeners 面板

DevTools 中新增了一个名为 EventListeners 的面板，该面板可以帮助您查看和管理页面上所有的事件监听器。

使用 EventListeners 面板，您可以：

• 查看所有事件监听器的类型、目标元素、处理程序和来源。
• 禁用或启用事件监听器。
• 搜索事件监听器。
• 过滤事件监听器。

针对 React 和 Vue 的调试改进

除了上述特性之外，DevTools 还针对 React 和 Vue 做了一些调试改进。

在 React 中，DevTools 现在可以显示组件的 props 和 state，以及组件生命周期的各个阶段。

在 Vue 中，DevTools 现在可以显示组件的 data 和 methods，以及组件的生命周期的各个阶段。

结语

以上就是 Chrome 80 中 DevTools 的一些新特性。这些特性将帮助您更有针对性的解决前端调试问题。

如果您是一名前端开发人员，我强烈建议您升级到 Chrome 80 并体验这些新特性。

感谢阅读，让我们一起探索 DevTools 的新世界！