返回

解锁Chrome 63中开发者面板(Devtools)的神秘功能

前端

一、直击痛点！新版本里的惊喜

作为一名网页开发者，您经常会遇到各种各样的问题，需要花费大量的时间来排查和解决。在Chrome 63中，开发者面板(Devtools)新增了一些功能，可以帮助您更轻松、更有效地解决这些问题：

  1. 网络面板(Network panel)中的资源过滤器(Resource Filter)

如果您正在开发一个大型项目，您需要能够快速地找到并隔离特定类型的网络请求。在Chrome 63中，网络面板(Network panel)新增了资源过滤器(Resource Filter)，您可以使用它来过滤特定的请求类型、状态码或其他参数。

  1. 性能面板(Performance panel)中的火焰图(Flame Chart)

火焰图(Flame Chart)是一种可视化工具，可以帮助您了解程序的运行时间分布。在Chrome 63中，性能面板(Performance panel)新增了火焰图(Flame Chart)，您可以使用它来分析网页的性能瓶颈。

  1. 内存面板(Memory panel)中的内存分配图(Memory Allocation Map)

内存分配图(Memory Allocation Map)是一种可视化工具，可以帮助您了解网页的内存使用情况。在Chrome 63中，内存面板(Memory panel)新增了内存分配图(Memory Allocation Map)，您可以使用它来分析网页的内存泄漏问题。

二、更上一层楼！探索世界的新大门

除了上面提到的这些新功能之外，Chrome 63中的开发者面板(Devtools)还有一些其他改进，这些改进可以让您更加轻松地进行网页开发和调试：

  1. 重新设计的用户界面

Chrome 63中的开发者面板(Devtools)的用户界面经过了重新设计，现在更加简洁直观。您可以在更短的时间内找到您需要的信息。

  1. 增强的可访问性

Chrome 63中的开发者面板(Devtools)现在更加容易被残障人士访问。例如，您可以使用键盘快捷键来控制开发者面板(Devtools)，并且您可以使用屏幕阅读器来阅读开发者面板(Devtools)中的信息。

三、更多新功能，尽在Chrome 63！

除了以上提到的这些新功能之外，Chrome 63中的开发者面板(Devtools)还有一些其他改进，这些改进可以让您更加轻松地进行网页开发和调试：

  • 支持多线程调试
  • 改进了对前端框架(如React和Angular)的支持
  • 改进了对CSS网格布局(CSS Grid Layout)的支持
  • 改进了对WebGL的支持

赶快升级到Chrome 63，体验这些令人兴奋的新功能吧！