谷歌开发者工具之功能面板

Network 面板

用的最多的面板，可查看 Ajax 请求，页面访问时间线等等。

 

Performance 面板

查看JS性能，详情可看我的另一篇文章：《如何使用谷歌浏览器开发者工具中的Performance分析网页性能》

 

Rendering 面板

查看页面渲染，F12打开开发者面板后按 esc 退出键打开 Rendering 面板。

 

 

Coverage 面板

查看代码使用率

 Unused Bytes 就是未使用的代码率，具体选中一行，就能看到具体的代码使用情况，标红的就是没有用到的代码。在某些极限优化的情况下，可以通过 Coverage 面板删除多余代码。

 

Lighthouse 面板

查看优化建议

 

 有一些能优化，有一些虽然建议很好但是也没有多大意义改的。这个 Lighthouse 面板仅仅提供哪些点可以优化，但没说具体要怎么优化，做网站优化时可以做个参考吧。