前言
上节我们学习了有关chrome devtools中Source、console和element面板的使用。中这节，我们将学习Network、Performance和Memory的应用。
一、用network调试网络请求
在前端开发的过程当中，网络请求是十分重要的一个部分。在开发过程当中可能会出现各种问题，这个时候就需要我们用network进行调试。
NetWork面板主要由控制器、过滤器、查找器、网络请求概览和网络请求列表组成。
1.控制器当中我们可以进行一些网络请求上的控制：
控制网络监控的开关
清空当前的网络请求列表
过滤器的开关
查找器的开关
保存控制台记录，启用的话下次刷新就不会情况列表和概览
禁用缓存
用于调整当前网速（正常、高速3G、低速3G、离线等），是很好用的一个功能，可以测试在低网速的情况下页面的渲染情况。
上传和下载
2.我们可以通过过滤器筛选我们想要的网络请求
筛选器可以根据请求的类型进行区分，比如Fetch和Img这个应该是我们比较常用的。也可以根据Name进行筛选。
最下面的三个选择分别对应下图
3.通过请求概览进行分析。
在请求概览当中，我们可以一次网络请求的整体情况做一个了解。可以得到各个请求的起止时间、先后顺序以及请求之间的串并行关系。
在一些复杂场景下，对网络请求的顺序、串并行关系会有一定要求。当这方面出现问题时，请求概览就会派上用场。
4.查找器查找信息
在查找器中，输入关键词，查找器就会帮助我们从请求中筛查出相关内容（文件名、请求名、文件内容）
目前我在实际开发中还没有使用过查找器，不过相信其在生产当中也有用武之地。
5.用请求列表对请求进行分析
在请求列表当中，我们可以看到请求的状态、类型大小等等。这些信息对我们分析请求是十分有效的。特别是标红的请求，很可能就是在开发过程中出现问题的地方。
点击某行，我们可以看到这个请求的详情
二、用Performance对应用的性能进行分析
1.用控制栏控制性能分析
启动性能分析录制
刷新页面并且进行性能分析录制（用来分析首次加载很好用）
清空录制信息
上传下载录制情况文件
2.用概览栏查看整体情况
从CPU、NET、NetWork三行概览当中我们可以大致看到CPU使用情况、渲染的情况和网络请求的情况。
3.用火焰图对性能进行分析
火焰图从FP到L的这个过程当中，定义分别如下：
FP：首次绘制 FCP：首次有内容的渲染 LCP：最大内容的渲染 FMP：首次有意义的绘制 DCL：HTML文档被完全加载和解析完成 L：页面中所有资源加载完成
三、用Memory进行内存分析
Memory的使用一般结合Source打断点进行。
首先，我们在我们要分析的代码段的两端打上断点。
刷新以后我们卡在第一个断点上。
点击小灰钮进行内存情况录制。
然后让断点进行到下一步。
此时再点一次小灰钮记录当前的内存情况。
将两段数据进行对比以后就可以得到内存情况。
在数据列表中我们就可以看到创建的数组的内存情况了。
