深入挖掘 Chrome 85 中的 DevTools 新功能，探索优化 Web 开发

## Chrome 85 中的 DevTools 新功能

作为一名孜孜不倦的 Web 开发者，我们每天都会与 DevTools 打交道，它就像我们忠实的助手，帮助我们调试代码、分析性能、修复 bug，以及优化 Web 应用程序的质量。在最新发布的 Chrome 85 中，DevTools 迎来了诸多激动人心的新功能，进一步提升了我们开发和测试 Web 应用程序的效率和能力。

### 控制台设置中的 Group similar 切换适用于重复的消息

在 Chrome 85 之前，控制台中的 Group similar 切换仅适用于 console.group() 和 console.groupEnd() 函数，这意味着重复的消息不会被分组。这使得在控制台中查找和跟踪特定消息变得非常困难，尤其是当我们处理大量重复的消息时。

现在，在 Chrome 85 中，Group similar 切换适用于所有重复的消息，无论它们是由 console.group() 和 console.groupEnd() 函数生成，还是由其他函数生成。这意味着我们可以轻松地将重复的消息分组，以便更轻松地阅读和分析它们。

### 内存分析中的火焰图支持调用堆栈

在 Chrome 85 中，内存分析工具增加了对调用堆栈的支持，这使得我们能够更轻松地识别导致内存泄漏的函数和代码路径。

当我们使用内存分析工具时，我们可以选择一个分配事件，然后查看调用堆栈，以了解该分配是如何发生的。这可以帮助我们快速找到导致内存泄漏的代码，并采取措施来修复它。

### 网络请求查看中的瀑布图支持请求详细信息

在 Chrome 85 中，网络请求查看工具增加了对瀑布图的支持，这使得我们能够更直观地查看每个网络请求的详细信息。

当我们使用网络请求查看工具时，我们可以选择一个请求，然后查看瀑布图，以了解该请求的详细信息，包括请求头、响应头、请求和响应的大小、请求和响应的时间线等。这可以帮助我们快速分析网络请求的性能问题，并采取措施来优化它们。

### 安全审计中的跨源请求伪造 (CSRF) 检测

在 Chrome 85 中，安全审计工具增加了对跨源请求伪造 (CSRF) 的检测，这使得我们能够更轻松地发现和修复 CSRF 漏洞。

当我们使用安全审计工具时，它会自动扫描 Web 应用程序，以查找潜在的 CSRF 漏洞。如果发现任何 CSRF 漏洞，它会向我们发出警告，并提供有关如何修复漏洞的建议。这可以帮助我们提高 Web 应用程序的安全性，并防止 CSRF 攻击。

### 代码覆盖率工具支持 JavaScript 和 WebAssembly

在 Chrome 85 中，代码覆盖率工具增加了对 JavaScript 和 WebAssembly 的支持，这使得我们能够更轻松地测量和分析 JavaScript 和 WebAssembly 代码的覆盖率。

当我们使用代码覆盖率工具时，我们可以选择一个 JavaScript 或 WebAssembly 文件，然后运行代码覆盖率工具，以生成覆盖率报告。覆盖率报告显示了哪些代码行已被执行，哪些代码行尚未被执行。这可以帮助我们找到代码中的死角，并采取措施来提高代码的覆盖率。

## 结语

Chrome 85 中的 DevTools 新功能进一步提升了我们开发和测试 Web 应用程序的效率和能力。这些新功能包括：控制台设置中的 Group similar 切换适用于重复的消息、内存分析中的火焰图支持调用堆栈、网络请求查看中的瀑布图支持请求详细信息、安全审计中的跨源请求伪造 (CSRF) 检测，以及代码覆盖率工具支持 JavaScript 和 WebAssembly。这些新功能使我们能够更轻松地调试代码、分析性能、修复 bug，以及优化 Web 应用程序的质量。作为一名 Web 开发者，我们应该充分利用这些新功能，以提高我们的开发效率和应用程序质量。