浏览器开发者工具解析

1.F12进入

2.设置：开发者工具

3.Control+shift+i

编辑元素：右键edit html

较常用的是Elements（页面）、Console（JavaScript执行）、Sources（所有元素）和Network

 

        一：Elements，称为页面元素。能查看页面的所有元素。分HTML面板和其他，可以查看DOM结构、编辑CSS样式，用于测试页面布局和设计页面。

       二：Console，控制台。在我们调试程序的时候，如果出现bug问题，通常会在此进行展示，我们根据具体问题进行解决。可以输出自己代码，能执行JavaScript脚本。

       三：Sources，称之为资源，这里是目前打开的界面所涉及的所有元素，包括图片、样式、js文件等。

        四：network，查看页面请求加载的所有信息，包括css样式，图片还有一些http响应等。展示了页面中所有的请求内容列表，分别点击这些事件，然后会看到有响应抬头（Headers表头信息、返回信息、请求基本状态）、预览（Preview返回的格式化文本信息）、响应（Response返回的原始信息）、Cookies（该请求带的cookies）、Timing（请求时间变化）等。

       如果想看XHR的请求，一般一些ajax响应，界面的url请求之类的都属于这一范畴，我们点击XHR即可，默认的是ALL，所有。

主要介绍：network网络面板

网络面板由控制器、过滤器、抓图信息、时间线、详细列表和下载信息概要这 6 个区域构成（如下图所示）。

 

1.控制器

网络面板由控制器、过滤器、抓图信息、时间线、详细列表和下载信息概要这 6 个区域构成（如下图所示）。

• 红色圆点的按钮，表示“开始 / 暂停抓包”，这个功能很常见，很容易理解。
• “全局搜索”按钮，这个功能就非常重要了，可以在所有下载资源中搜索相关内容，还可以快速定位到某几个你想要的文件上。
• Disable cache，即“禁止从 Cache 中加载资源”的功能，它在调试 Web 应用的时候非常有用，因为开启了 Cache 会影响到网络性能测试的结果。
• Online 按钮，是“模拟 2G/3G”功能，它可以限制带宽，模拟弱网情况下页面的展现情况，然后你就可以根据实际展示情况来动态调整策略，以便让 Web 应用更加适用于这些弱网。

2.过滤器

网络面板中的过滤器，主要就是起过滤功能。因为有时候一个页面有太多内容在详细列表区域中展示了，而你可能只想查看 JavaScript 文件或者 CSS 文件，这时候就可以通过过滤器模块来筛选你想要的文件类型。

3.抓图信息

抓图信息区域，可以用来分析用户等待页面加载时间内所看到的内容，分析用户实际的体验情况。比如，如果页面加载 1 秒多之后屏幕截图还是白屏状态，这时候就需要分析是网络还是代码的问题了。（勾选面板上的“Capture screenshots”即可启用屏幕截图。）

4.时间线

时间线，主要用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系，用于直观感受页面的加载过程。如果是多条竖线堆叠在一起，那说明这些资源被同时被加载。至于具体到每个文件的加载信息，还需要用到下面要讲的详细列表。

5.详细列表

这个区域是最重要的，它详细记录了每个资源从发起请求到完成请求这中间所有过程的状态，以及最终请求完成的数据信息。通过该列表，你就能很容易地去诊断一些网络问题。

6.下载信息概要

下载信息概要中，你要重点关注下 DOMContentLoaded 和 Load 两个事件，以及这两个事件的完成时间。

• DOMContentLoaded，这个事件发生后，说明页面已经构建好 DOM 了，这意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了。
• Load，说明浏览器已经加载了所有的资源（图像、样式表等）。

通过下载信息概要面板，你可以查看触发这两个事件所花费的时间