一》
二》
三》
1.Controls 控制Network的外观和功能。
2.Filters 控制Requests Table具体显示哪些内容。
3.Overview 显示获取到资源的时间轴信息。
4.Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
5.Summary 显示总的请求数、数据传输量、加载时间信息。
NetWork面板的Requests Table 包含着HTTP请求和响应的具体信息，是比较常用的一块
Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
Status HTTP状态码。
Type 请求的资源MIME类型。
Initiator 标记请求是由哪个对象或进程发起的（请求源）。
Parser： 请求由Chrome的HTML解析器时发起的。
Redirect：请求是由HTTP页面重定向发起的。
Script：请求是由Script脚本发起的。
Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。
四 》
查看具体资源的详情
通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：
Headers 该资源的HTTP头信息。
Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
Response 显示HTTP的Response信息。
Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
针对上面4个Tab进行详细讲解一下各个功能：
⑴查看资源HTTP头信息
在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。
⑵
⑶查看资源HTTP的Response信息
⑷查看资源Cookies信息
五》
六》点击事件断点
七》开发者工具打开之后，浏览器刷新图标上右键会出现清空缓存并硬性重新加载。这一方法能够在开发者工具打开时快速清理缓存。
八》选中地址栏中的URL，Ctrl + Shift + Del 快捷键清除缓存。
九》
开发者工具==》Settings
网友评论