Chrome DevTools功能简介:9大功能面板

1、Elements元素面板

这个面板可以说是最常用的,在这个面板中,我们可以检查和调整页面,调试DOM、调试CSS。

Elements元素面板

2、Network网络面板

在这个面板,我们可以抓包调试页面网络请求、了解页面静态资源分布,以及网页性能检测、查看请求耗时。

Network网络面板

3、Console控制台面板

这个面板也是一个非常常用的面板,我们可以在这里调试 JavaScript、查看Console log日志、交互式代码调试。

4、Sources源代码资源面板

我们可以利用Sources调试页面JS源代码、进行断点调试代码。

5、Application应用面板

我们可以在这个面板查看和调试客户端存储,如:Cookie、LocalStorage、SessionStorage等。

6、Performance性能面板

这个属于「高阶功能」,平时用得比较少,它可以查看页面性能细节,细粒度对网页载入进行性能优化。

7、Memory内存面板

这个也是高阶功能,JavaScript CPU分析器,内存堆分析器。

8、Security安全面板

我们可以在这里查看页面安全及证书问题。

9、Audits面板

我们可以利用这个面板,使用Google Lighthouse辅助性能分析,给出优化建议。