luda 比如“为什么我的js代码没有运行？”经常听到像这样的声音。“我明明发了请求，为什么反应？”，“我的这个网站怎么加载得这么慢？”这种问题，那么问题就存在，所以要解决它，要解决它。首先，我们必须找到问题的原因，才能“对症下药”。
每个文件的加载、发送的请求也是网络交互，因此您可以在此面板中确认是否加载了所需的js文件。我们请求的接口最终返回了吗？可以知道哪些文件会减慢整个网页的加载过程吗？Netwrok面板记录应用程序的每个网络交互信息、每个交互的详细时间、HTTP请求标头和响应标头、cookie、web套接字数据等。
面板中的资源数据依赖于JavaScript中的资源计时API，并提供每个资源加载的详细同步数据。例如，清楚列出http启动请求的时间和接收最后一个字节的时间以及详细进程。另外，window。方法可以获得资源加载列表。列表中第一个对象的属性屏幕截图如下所示。
再简要回顾一下这些属性的含义(所有这些属性都是只读的)
ConnectEnd:浏览器和服务器完成搜索资源的网络连接设置的时间戳
ConnectStart:浏览器和服务器开始建立网络连接以搜索资源的时间戳
DamainLookupEnd:在浏览器中完成资源域名解析的时间戳
DamainLookupStart:在浏览器中启动资源名称解析的时间戳
Duration:从开始到结束的资源请求时差
entry type:performan centry对象的类型，将单个性能指标封装为性能表的一部分
“Frame”、“mark”、“measure”、“navigation”、“resource”、“server”。
FetchStart:浏览器开始获取资源时间戳
InitiatorType:资源文件的类型
名称：资源的URL
RedirectEnd:接收重定向资源的最后一个响应字节的时间戳
RedirectStart:启动重定向以获取资源的启动时间戳
RequestStart:浏览器从服务器请求资源的启动时间戳
ResponseEnd:浏览器接收资源的最后一个字节时间戳或关闭传输连接的时间戳
ResponseStart:浏览器收到服务器响应的第一个字节的时间戳
SecureConnectionStart:浏览器启动握手协议以保护当前连接的安全性，并开始握手的时间
开始时间：浏览器开始导入资源之前的时间戳(整个进程的开始时间)
工作器：如果当前上下文为“工作器”，则返回开始获取资源的时间戳，否则返回0(必须应用于双重通信)
回到网络，看看这个面板。
了解Network
记录按钮
启用此选项后，此面板将记录有关网络连接的信息；禁用此选项后，将不会记录。
清除记录
清除当前网络连接日志信息。
撷取萤幕快照
如下图所示，根据屏幕捕捉可见的窗口，记录加载截断页面期间某些时间点的页面渲染。
筛选标准
自定义
通过在选择框中输入过滤关键字，可以过滤资源列表，如下图所示。
还可以对指定标准执行搜索，如下图所示。
指定条件是什么？
域：资源所在的域，即URL的域名部分。如domain 3360 API . github . com
Has-response-header:不论值为何，资源是否有回应标头。如Has-response-h
eader：Access-Control-Allow-Originis：当前时间点在执行的请求。当前可用值：running
larger-than：显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K
method：使用何种HTTP请求方式。如 GET
mime-type：也写作content-type，是资源类型的标识符。如 text/html
scheme：协议规定。如 HTTPS
set-cookie-name：服务器设置的cookies名称
set-cookie-value：服务器设置的cookies的值
set-cookie-domain：服务器设置的cookies的域
status-code：HTTP响应头的状态码
按钮组
根据按钮规定的条件进行筛选，比如下图过滤出图片。
显得太高端，竟然还可以浏览图片。
按钮组有: All,XHR,JS,CSS,Img,Media,Font,Doc(Document),WS(WebSocket),Manifest,Other。
资源列表样式
资源列表详细信息和缩略信息的显示。
保存日志
在页面重新加载或者url改变时保留日志(包括资源列表和时间轴上的数据)。
是否缓存
当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。
限流控制(网速模拟)
模拟不同网速下的环境加载当前页面，直接看图就能知道怎么用了。
时间轴
图中有两条线，一条蓝色的，一条橙色的。
蓝色线代表DOM已加载完成，红色线表示页面加载完(包括资源引用)，也可以用代码对这两个事件进行监听，在这两个事件完成的时间点做对应的操作。
window.addEventListener('DOMContentLoaded',function(e){ e.cancelBubble = true; con); },true); window.addEventListener('load',function(e){ e.cancelBubble = true; con); },true);回到时间轴，来探查它给我们提供了什么信息。
配合资源列表的timeline使用，我们选中一段时间内的资源加载情况来看看。
图中截取的大致时间是5.2~5.75左右的一小截，没一条多色线代表一个资源的网络交互情况，上面的时间轴中有2个资源是刚开始进行网络连接，有3个资源已经加载完毕，还有1个资源全程都在加载过程中；然后对应资源列表中的timeline字段，能够发现情况其实和上面是一样的，并且在这里还能够明确的看到这是哪个文件及其详细信息。
然后将鼠标放到timeline中的多色线上，还能够看到资源请求的详细信息，如图所示。
可以明确的看出一条资源的列队、停滞、代理协议、初始化连接、SSL协议、发送request、等待及内容下载所耗的时间。
既然都说这么多了，就将timeline从资源列表中提取出来提前讲了吧，点击timeline列的标题，会有一些选项，这里介绍下这些选项。
Start Time：根据每个网络请求的发送时间排序，也是默认排序
Respone Time：根据每个网络请求的响应时间排序
End Time：根据每个网络请求的完成时间排序
Total Duration：根据每个网络请求的总耗时排序
Latency：根据每个网络请求的发送请求时间点和得到响应时间点的时间差排序
资源列表
资源列表展示了所有资源请求的信息，字段也是很多，在下面都会列出来，但不会每一个都进行详细探讨(以详细模式的为案例吧，缩略模式的也包含在里面)。
Name(Path)：资源的名称和url
Status(Text)：HTTP请求状态码及文字说明
Type：所请求的资源的MIME类型
Method：HTTP请求发送方式
Domain：资源所在域
Cookies：网络请求所产生的cookies的数量
Size(Content)：size是响应头和响应体相加的大小规格，content是资源解码内容的大小规格
Time(Latency)：time是整个网络交互所耗的总时间，从发送请求到接收最后一个字节，latency是响应时加载第一个字节的时间Timeline：时间轴(已介绍，略过...)
此外还有Cache-Control(缓存操作，网页缓存由 HTTP消息头中的Cache-control控制)、Connection(连接状态，如 keep-alive)、Connection Id(连接id)、Content-Encoding(连接解码，如 gzip)、Content-Length(内容长度)、ETag(Entity Tag，资源的实体标签)、Initiator(触发点)、Keep-Alive(据说功能是使客户端到服务器端的连接持续有效)、Last-Modified(最后修改时间)、Priority(优先级)、Protocol(协议)、Remote Address(远程地址)、Scheme(协议模式)、Set-Cookies(服务端设置cookies)、Vary(浏览器与服务器的编码协议规定)
以上各个知识点可自行搜索，网上资料不少哦(指的是google...)
资源的详细信息
Headers：Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等。如图所示
Preview：预览面板，用于资源的预览。
Response：响应信息面板包含资源还未进行格式处理的内容，如常见的json数据，当然，下面的截图不符合之前说的json数据，而是jsonp的...
Cookies：cookies面板显示该资源请求中所传输的所有cookies信息，并以表格形式展示。
Timing：资源请求的详细信息，上面有描述。如图
还有WebSocket面板，在需要实现双工通信的时候会有，暂时未涉及到，不是很了解，之后如有理解到再做补全。
信息归总
主要展示了一些基本的统计信息，请求总次数、传输总大小，总耗时多少、DOM加载完的时间、页面加载完的时间(包含资源)，如图
就这些吧，如有不正之处，敬请指出~ 同时欢迎交流~