如何快速定位Http问题-Network面板请求与响应

最近一直有种很强的感觉，随着工作时间逐步增加，发现自己在项目完成过程中，对于新的需求的开发迭代使用现有知识能够基本满足，即使是遇到一些未曾应用过的新知识或者场景，多耗费些时间去探索，也总是会解决。这种技能可以把它称为学习能力。这里暂且把学习能力归纳为：如何使用已知关键技能，达到目标的能力。
对于学习能力虽然每个人确实存在差别，但对同一岗位上的大多数人是都能满足的，即：在某一段时间内，达到既定的目标（前提是目标合理）。学习能力可以是通过一定的科学方式方法后天培养的。比如我们经过十多年甚至20多年的校园生活，主要提高的是它。
现阶段，每次回头看/包括新做项目遇到问题时，让我越发感觉重要的是与之相辅相成的解决问题能力。这种能力是经验的积累、是知识的综合运用。大多数的教材与教程只会告诉我们某一个知识点是什么，但是结合到具体的场景，可能更需要的是我们随机应变。因此，如何快速的定位问题，并解决问题是一个更有挑战性的事情。
对于web服务来讲，浏览器为表象，所以，我决定从表象进行分析。首先知道生病的程序，它直观的反映是什么。

一、Network面板

• 控制器：控制面板的外观与功能
• 过滤器：过滤请求列表中显示的资源
• 概览：显示Http请求，按住（command/ctrl）可以同时选择多个过滤器
• 请求列表：默认时间排序，可显示选择列
• 概要：请求总数、总数据量、总花费时间

1.1 控制器

• 停/启用抓包
• 清除浏览器信息
• 是否显示过滤器
• 搜索
• 日志保留
• 停用缓存
• 节流模式：用来控制网络的网速

1.2 过滤器

过滤不同类型的请求

1.2.1 过滤栏中数据过滤

多个属性见可以通过AND 实现并列

• 实现过滤来自某个域名的过滤

domain:域名

• 显示包含指定http响应包头的资源

• is:
  可以使用is:running可以查找websocket资源，is:from-cache 可以查找缓存读出的资源

  • larger-than: 显示大于指定大小的资源(以字节为单位)。将值设置为1000，等同于将值设置为1k

• methood: 显示通过指定Http方法类型检索的资源

• mime-type: 显示指定MIME类型的资源
  

1.2.2 复制请求内容

在某一个连接上右键点击复制，可以复制不同的请求格式，供我们分析与模拟

1.2.3 某一个请求的上下游关系的查看

安装shift 键 + 鼠标悬停在某一个请求上

1.3 浏览器加载时间流程

• 浏览器解析HTML结构
• 加载外部脚本和样式表文件
• 解析并执行脚本代码 //部分脚本会阻塞浏览器的加载
• DOM树构建完成 //DomContentLoaded事件
• 加载图片等外部文件
• 页面加载完毕 // load事件

1.3.1 请求时间详细分布

• Queueing: 浏览器在以下情况下，对请求进行排队
  • 存在更高优先级的请求
  • 此资源已经打开6个TCP连接，达到限制，仅适用于HTTP1.0 / HTTP1.1
  • 浏览器正在短暂分配磁盘缓存中的空
• Stalled : 请求可能会因为Queueing中描述的任何原因停止
• DNS LookUp : 浏览器正在解析请求的IP地址
• Proxy Negotiation : 浏览器正在与代理服务器协商请求
• Request sent: 正在发送请求
• ServiceWorker Preparation: 浏览器正在启动Service Worker
• Request to ServiceWorker: 正在将请求发送到Service Worker
• Waiting(TTFB):浏览器正在等待响应的第一个字节，此时间包含1次往返延迟时间以及服务器准备响应所用的时间
• Content Download: 浏览器正在接收响应
• Receiving Push:浏览器正在通过Http/2 服务器推送接收此响应的数据
• Reading Push:浏览器正在读取之前收到的本地数据

Http的响应码

1xx: 请求已经接收，需要服务器进一步处理使用

• 100 Continue: 上传大文件前使用
• 101 Switch Protocols: 协议升级使用
• 102 Processing: 请求可能涉及文件操作的子请求，需要很长时间才能完成请求。表示服务器已经收到并正在处理请求，但是没有响应可以使用。这样可以防止客户端超时，并假设请求丢失。

2xx： 成功处理请求

• 200 ok: 成功返回响应
• 201 Created: 有新的资源在服务器端被成功创建
• 202 Accepted: 服务器接收并开始处理请求，但是还没处理完成。例如：异步、需要长时间处理的任务等
• 203 Non-Authoritative Informatiion: 代理服务器修改了 原始响应包体的时候。
• 204 No Content: 成功执行，但是没有携带响应包体，但是客户端不需要更新视图。
• 205 Reset Content: 成功执行了，但是没有携带响应包体，但是客户端需要更新视图。
• 206 Partial Content: 使用range协议时，返回部分响应内容的响应码

3xx: 重定向使用Location指向的资源或者缓存中的资源。客户端重定向次数不应超过5次，以防止死循环。

• 301 Moved Permanently: 资源永久的重定向到另一个URI中
• 302 Found: 资源临时的重定向到另一个URI中
• 303 See Other: 重定向到其他资源
• 304 Not Modified: 当客户端拥有可能过期的缓存的时候，会携带缓存的标识询问服务器缓存是否可以使用，304表示可以复用缓存。
• 307 Temporary Redirect: 类似302，但是重定向后的请求方法必须与原来的请求方法相同
• 308 Permanent Redirect: 类似301，但是重定向后的请求方法必须与原来的请求方法相同

4xx 表示客户端出现错误

• 400 Bad Request: 服务器认为客户端出现了错误，但不能明确判断哪种错误。
• 401 unauthorized: 用户认证信息缺失或者不正确
• 403 Forbidden: 服务器理解请求，但是没有权限执行请求
• 404 Not Found: 服务器没有找到对应的资源
• 405 Method Not Allowed: 服务器不支持请求行中的method方法
• 406 Not Acceptable: 对客户端指定的资源表述不存在。
• 408 Request Timeout: 服务器接收请求超时
• 407 Proxy Authenticatino Required: 对需要经由代理的请求，认证信息未通过代理服务器的验证
• 409 Conflict: 资源冲突
• 410 Gone: 服务器没找到对应的资源，并且确定该位置永久性找不到该资源。
• 411 Length Required: 如果请求含有包体并且没有携带Content-Length头部，并不属于chunk类请求

5xx 服务器端出现错误

• 500 Internal Server Error: 服务器内部错误，且不属于以下错误类型
• 501 Not Implemented: 服务器不支持实现请求所需要的功能
• 502 Bad Gateway: 代理服务器无法获取到合法响应
• 503 Service Unavailable: 服务器资源尚未准备好处理当前请求
• 504 Gateway Timeout: 代理服务器无法及时的从上游获得响应。
• 505 HTTP Version Not Supported: 请求的Http协议版本不支持。
• 507 Insufficient Storage: 服务器没有足够的空间处理请求
• 508 Loop Detected: 访问资源时检测到循环。
• 511 Network Authentication Required: 代理服务器发现客户端需要进行身份验证才能获得网络访问权限