web开发浏览器抓包分析

在webb开发里, 调试极为重要, 学会对页面代码进行调试, 能够迅速找出开发环节中的各类问题, WEB通讯经各种代码与形式, 最终构建出一段含有目标主机、请求文件路径以及请求内容等诸多信息的字符串，此即所谓的请求报文, 接着把这个字符串送往目标主机予以处理, 目标主机随后又向客户端, 这里通常指的是浏览器, 返回一段字符串, 此即响应报文。

有的工具能帮我们监听路过的请求报文, 然后把它们记录下来, 一般浏览器会呈现一份监听成效, 就好比在浏览器开发者工具的不同选项页面里, 差不多全部的请求都被它罗列显示出来了, 当点击请求记载时, 这个请求的报文内容会在内容的右边呈现出来。

f12 打开开发者工具

或者

一个比常用的面板如下

但此处所呈现的请求内容以及响应内容并非原本的那种样子, 乃是已被其进行过分解的, 举例来说, 请求报文中不存在请求行（当然实际上概要当中有相关的信息）, 若你想要查看原样的报文, 那还是得借助别的工具。

在通常情形之下, 运用浏览器的开发者工具往往便已足够, 它能够抓取HTTP的请求数据包, 还能够抓取HTTP的响应数据包, 进而供你进行分析呢。

在上图里, 左边存在着诸多请求记录, 那些呈现为红色的, 便是出现了错误的, 未能成功请求到结果的, 从地址方面去看, 它理应是请求的片js代码下来, 然而失败之后, 应该会致使某部分UI功能缺失, 从命名来看它是.min.js, 所以估计移动端访问会明显受到影响。

在这儿分享一下, 我于该方面调试之际, 常常会碰到的响应报文状态码, 此状态码对应着上图里请求概况的 Code。

200

请求成功,这个大部分人都认得了

304

这个状态码下在选项卡里面是不会有响应报文内容的.

它意味着文件未曾被修改, 通常而言, 于请求JS、CSS以及图片这般的静态资源的情况的时候, 容易碰到这个。

请求之际, 浏览器发觉自身缓存之中曾请求过一回此JS文件, 随后便先行告知服务器, “我存有这个文件, 乃是XXXX时候发送给予我的”。

服务器拿着这个时间, 去比较了一下, 服务器上文件的最后修改时间, 然后回复说, 这个文件在 XXXX 时间点之前已修改, 在 XXXX 之后未修改到, 所以你的文件是最新的, 大概如此这般一个互相通讯的过程。

浏览器之所以决定从自身缓存中取出该文件, 仅仅是为了避免服务器重新读取整个JS文件, 之后再将一大片JS代码发送回客户端。

如此一来, 便节省了数据传输量, 并且, 服务器能够以更快的速度结束此次会话, 进而去迎接下一个请求。

500

服务端出现了错误情况, 这种出错的情形实际上颇为抽象, 它仅仅表明是服务端出错, 然而经验不够丰富的程序员通常会觉得是诸如/nginx之类的服务器出现了错误, 其实呢, 也有可能是正在运行的程序出现了错误, 像PHP、ASP.NET、Java以及Ruby这些存在出错状况时都能够出现500错误, 具体情况在此不做详细解释。

302

重定向, 此状态码下不会存有响应报文内容, 它仅返回了一坨响应头过来, 响应头内指定了一个网址, 要求客户端朝着该地址转向请求, 然而需留意, AJAX请求并不会自动进行重定向, 而是得自行编写代码去判断状态码是否为301, 若是则去请求……

301

同样是重定向, 然而它属于永久重定向, 服务端返回这个状态码, 通常所表达的意思相当于, “从今往后这件事情便不要再基于我这个网址来找了, 你只需去找另一个网址就行, 本网址马上就要作废了”其中所蕴含的意思。

其实遇到的频率也不会很高

这里并不是要具体讲HTTP协议的内容

请求分类筛选