chrome中开发工具(一)network

《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: 图形化显示资源加载过程中各阶段花费的时间。
    原文作者:福尔摩洋
    原文地址: https://www.jianshu.com/p/092f931dcd26
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞