chrome中开发工具（一）network

请求的资源

** Name/Path: 资源名称以及URL路径；
Method: HTTP请求方法；
Status/Text: HTTP状态码/文字解释；
Type: 请求资源的MIME类型；
Initiator解释请求是怎么发起的，有四种可能的值：**

1. Parser：请求是由页面的HTML解析时发送的；
2. Redirect：请求是由页面重定向发送的；
3. Script：请求是由script脚本处理发送的；
4. Other：请求是由其他过程发送的，比如页面里的link链接点击，在地址栏输入URL地址。

Size/Content: Size是响应头部和响应体结合起来的大小，Content是请求内容解码后的大小。进一步了解可以看这里Chrome Dev Tools - “Size” vs “Content”；

Time/Latency: Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间；

Timeline: 显示网络请求的可视化瀑布流
，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。

以上是默认显示的列，不过我们可以在瀑布流的顶部右键，这样就可以选择显示或者隐藏更多的列，比如Cache-Control, Connection, Cookies, Domain等。
我们可以按照上面任意一项来给资源请求排序，只需要单击相应的名字即可。Timeline排序比较复杂，单击Timeline后，需要选择根据Start Time、Response Time、End Time、Duration、Latency中的一项来排序。
红色区块2中，一共有6个小功能：
Record Network Log: 红色表示此时正在记录资源请求信息；

Clear: 清空所有的资源请求信息；

Filter: 过滤资源请求信息；

Use small resource raws: 每一行显示更少的内容；

Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；

Disable cache: 不允许缓存的话，所有资源均重新加载。

选择Filter后，就会出现如红色区块3所显示的过滤条件，当我们点击某一内容类型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只显示该特定类型的资源。在XHR请求中，可以在一个请求上右键选择“Replay XHR”来重新运行一个XHR请求。

资源的详细内容有以下几个：

• HTTP request and response headers
• Resource preview: 可行时进行资源预览；
• HTTP response: 未处理过的资源内容；
• Cookie names and values: HTTP请求以及返回中传输的所有Cookies；
• WebSocket messages: 通过WebSocket发送和接收到的信息；
• Resource network timing: 图形化显示资源加载过程中各阶段花费的时间。