Chrome Devtools谷歌开发者工具功能介绍
Chrome Devtools有9大功能面板
1）Elements页面源代码面板：可以检查调整页面，调试DOM，调试CSS样式等
2）Console控制台输出面板：调试JavaScript、查看Console Log日志，交互式代码调试，修改JavaScript中声明的变量值等
3）Sources源代码资源面板：断点调试javaScript页面源代码
4）Network网络面板：可以调试请求，了解页面静态资源分布情况，查看请求数据和返回数据以及时间占比、Cookies等
5）performance性能面板：查看页面性能数据
6）Memory内存面板：javascript cpu分析器
7）Application面板：查看调试客户端存储，如cookie、LocalStorage、SessionStorage等
8）Security安全面板：查看页面安全及证书，辅助其他使用时可导出证书使用
9）Audits面板：使用Google Lighthouse辅助性能分析，给出优化建议；
在Performance的Opportunities Lighthouse会给出可以加快页面加载速度的优化建议。