这篇文字的宗旨的教会大家使用谷歌浏览器开发者工具，快速定位问题解决问题以及完成代码调试、接口查看等；

开发者工具 九大功能面板：

  1. Elements元素面板：检查调整调试页面，调试DOM，调试CSS；
  2. NetWork网络面板：调试请求，了解页面静态资源分布，网页性能检测；
  3. Console控制台面板：调试JavaScript，查看Console log日志，交互式代码调试；
    1. Sources源代码资源面板：调试JavaScript页面源代码，进行断点调试代码；
  4. Application应用面板：查看&调试客户端存储，如Cookie、LocalStorage、sessionStorage等；
  5. Performance性能面板：查看页面性能细节，细粒度对网页载入进行性能优化；
  6. Memory内存面板：JavaScript CPU分析器，内存堆分析器；
  7. Security安全面板：查看页面安全及证书问题；
  8. Audits面板：使用GoogleLightHouse辅助性能分析，给出优化建议；

Chrome DevTools 开发者工具调试 使用手册之NetWork网络面板 - 图1

接下来我们采用 3W（what/why/how）法来分析这些面板 在哪里做，怎么做，为什么做

NetWork网络面板能做什么？

2.1 面板功能分布 Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。该面板主要包括5大块窗格：

Controls 控制Network的外观和功能。
Filters 控制Requests Table具体显示哪些内容。
Overview 显示获取到资源的时间轴信息。
Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
Summary 显示总的请求数、数据传输量、加载时间信息。
2.2 请求资源面板
Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
Status HTTP状态码。
Type 请求的资源MIME类型。
Initiator 标记请求是由哪个对象或进程发起的（请求源）。
Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
Watefall显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。
2.3 捕获屏幕
Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器，视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

  1. 以捕获屏幕为例，点击摄像机按钮（捕获屏幕），重新加载页面即可捕获屏幕。
  3. 双击其中的截屏可以放大显示，在放大的图下方可以点击跳转到上一帧或者下一帧。单击则可以查看该帧被捕获时的网络请求信息，并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

2.4 查看DOMContentLoaded和load事件信息
DOMContentLoaded和Load这两个事件会高亮显示。

DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。

load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

DOMContentLoaded事件在Overview上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。

Load事件同样会在Overview和RequestsTable上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。

2.5 查看具体资源的详情
通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

Headers 该资源的HTTP头信息。
Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
Response 显示HTTP的Response信息。
Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
针对上面4个Tab进行详细讲解一下各个功能：

2.5.1 查看资源HTTP头信息
在Headers标签里面可以看到HTTP Request、URL、HTTP Method、Status Code、Remote Address 等基本信息和详细的Response Headers、RequestHeaders以及Query String Parameters或者FormData等信息。

2.5.2 查看资源预览信息
在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

2.5.3 查看资源HTTP的Response信息
在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

2.5.4 查看资源Cookies信息
如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。

2.5.5 分析资源在请求的生命周期内各部分时间花费信息
在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

· Queuing ：排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.

· Stalled ：从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。

· Proxy Negotiation ：与代理服务器连接的时间花费。

· DNS Lookup ：执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。

· Initial Connection / Connecting ：建立连接的时间花费，包含了TCP握手及重试时间。

· SSL ：完成SSL握手的时间花费。

· Request sent ：发起请求的时间。

· Waiting (Time to first byte(TTFB)) ：是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了。

· Content Download： 获取Response响应数据的时间花费。

2.6 查看资源的发起者(请求源)和依赖项
通过按住Shfit并且把光标移到资源名称上，可以查看该资源是由哪个对象或进程发起的（请求源）和对该资源的请求过程中引发了哪些资源（依赖资源）。

在该资源的上方第一个标记为绿色的资源就是该资源的发起者（请求源），有可能会有第二个标记为绿色的资源是该资源的发起者的发起者，以此类推。

在该资源的下方标记为红色的资源是该资源的依赖资源。