快速认识和使用浏览器跟踪Http服务及Http服务调试工具

蔚落 2022-08-21 11:36 343阅读 0赞

HTTP（Hyper Text Transfer Protocol）即超文本传输协议，是目前互联网行业使用最为广泛的一种网络协议，采用请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URI、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，相应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。HTTP服务默认端口是80，HTTPs默认端口是443。图1为HTTP服务简单的处理图。

![图片描述][20160427161316272]

图1 HTTP服务流程

本篇文章不会针对HTTP协议原理、底层进行大张旗鼓的分析，仅以HTTP开发者的角度进行讲解，目的是为刚开始接触HTTP服务开发或者接触不久的同学提供帮助。在开发互联网应用的过程中对HTTP的跟踪极为重要，通过对HTTP通信的跟踪我们可以知道client传递了哪些数据，什么类型什么格式的数据，以及与HTTP相关的一些参数，响应等等，通过这些数据来诊断通信的健康状况，进行故障排除。HTTP在通信的过程中将传输的数据分为两部分header和body，Header又包括general header、request header、response header、entity header。那么我们通过什么方式来跟踪这些数据呢？很幸运，Chrome、firefox、IE等主流浏览器给开发者提供了这样的工具。下面是作者结合自己的使用经验进行的总结，将以Chrome为例进行讲解，并且主要以network面板为主。  
打开Chrome浏览器，点击F12键调出开发者工具，如图2、图3（两个旅行网站）

![图片描述][20160427163447021]

图2 火车票查询(post请求)

![图片描述][20160427163521459]

图3 机票查询(get 请求)

点击搜索按钮，在network面板中展示当前操作从请求到响应整个过程的调用链，单击面板左侧任意一个请求连接，右侧将显示该请求client-server通信过程中的所有数据。我们一一开看下。

### Headers页签 ###

General

*  Request URL ：Client请求地址
 *  Request Method：请求类型 get、post、put、delete等
 *  Status Code：响应状态码 200、404、503等
 *  Remote Address：域名对应的真实ip:port

Request header

*  Accept：客户端/发送端能够接收的数据类型 text/html,application/xhtml+xml,application/xml； Accept-Encoding：浏览器可以支持的- web服务器返回内容压缩编码类型 gzip, deflate
 *  Accept-Language：浏览器可接收的语言 zh-CN,zh;q=0.8
 *  Cache-Control：请求和响应遵循的缓存机制，当前请求的Cache-Control不会影响另一个请求的缓存处理。private(默认)、no-cache、must-revalidate、max-age。这个参数有几种不同的使用场景：  
    
    
     *  打开一个新的窗口。private、no-cache、must-revalidate会重新请求服务器; max-age在超过时间年龄值时才会重新请求。
     *  地址栏回车。private、must-revalidate只有第一次时会请求服务器; no-cache每次都会请求；max-age在超过时间年龄值时才会重新请求。
     *  后退按钮。只有no-cache每次都重新请求服务器。
     *  刷新。全部重新请求服务器
 *  Connection: 是否保持与服务器的tcp长连接。keep-alive(默认)、close。Keep-alive代表服务会保留当前连接一段时间被其他请求重复使用；close代表请求之后关闭连接。
 *  Content-Length: 请求体的长度
 *  Content-Type: 请求内容的格式/类型 application/x-www-form-urlencoded application/json
 *  Cookie: 客户端缓存的Cookie，在请求发送时会发送到服务端
 *  Host: 请求的服务器域名
 *  Referer: 当前请求的来源
 *  User-Agent: 发出请求的客户端信息 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36

Form data(post)

这个版块是在Request Method为post请求类型时显示的post表单数据。

例如：

stationQuery.fromStation:北京  
stationQuery.toStation:天津  
`stationQuery.date: 2016-04-23`

Query String Parameter(get)

这个版块是在Request Method为get请求类型时向服务端传递的请求参数。

例如：

*  type:inbound
 *  depCityCode:BJS
 *  depCity:北京
 *  arrCityCode:SYX
 *  arrCity:三亚
 *  depDate:2016-04-30
 *  arrDate:2016-05-03

Response header

*  Cache-Control：请求和响应遵循的缓存机制
 *  Connection：是否保持与服务器的tcp长连接。keep-alive(默认)、close。Keep-alive代表服务会保留当前连接一段时间被其他请求重复使用；close代表请求之后关闭连接。
 *  Content-Type：响应内容的格式/类型text/html;charset=UTF-8标识返回的内容是文本类型，html格式。
 *  Content-Encoding：web服务器支持的返回内容压缩编码类型 gzip
 *  Content-Language：响应体的语言
 *  Content-Length：响应体的长度
 *  Date: 消息发出时间(GMT) Sat, 23 Apr 2016 07:47:54 GMT GMT+8=北京时间
 *  Expires: 响应过期时间  
    Transfer-Encoding：文件传输编码chunked标识传输内容长度不确定，如果以gzip方式输出时，就不必申请一个很大的字节数组了，可以一块一块的输出，更科学，占用资源更少。
 *  Vary: 提示使用缓存响应还是从原始服务器请求，即当缓存中存在一个未过期的响应是否能被后续的请求服用，Accept-Encoding、User-Agent。如果vary的值中返回了User-Agent，那么通过不同的浏览器打开相同的页面都会重新请求服务器；如果Vary中没返回User-Agent，那么客户端缓存把它看成是相同的页面，相同的请求，直接给用户返回缓存的内容；如果返回的值是Accept-Encoding，将请求头信息中的Accept-encoding字段的值（gzip等）作为缓存的key;如果vary的值为\*表示缓存不会去做判断；

Preview页签

Preview页签展示请求响应后的预览。

Response页签

Response页签显示响应的具体内容。

Cookie页签

Cookie页签以key-value形式展示客户端所有的Cookie信息。

Timing页签

Timing页签展示的是从请求开始到响应结束整个过程每个阶段经历的时间或者说耗时。

到这里就基本介绍完了Chrome network面板的所有属性（其他浏览器大同小异），掌握了这些知识点在开发调试HTTP应用的过程中会非常的得心应手。

好记性不如烂笔头，下面是我记录的一些常见HTTP服务错误代码：

1.  400 网页不存在或请求参数语法有误
2.  401 账户无访问权限
3.  403 网站没有绑定默认首页或者绑定默认首页错误
4.  404 访问的资源不存在，服务宕机
5.  500 服务器内部错误
6.  502 网关错误，服务宕机
7.  503 由于临时过载或维护，服务器无法处理请求

HTTP应用问题处理的步骤一般是检查URL是否写错、网络是否正常、DNS是否解析正确、应用自身代码问题。

接下来介绍两款比较不错HTTP服务测试工具，firefox的RESTClient和Chrome的Postman。

先来看下firefox的RESTClient。RESTClient是由中国人开发的基于浏览器的测试工具，是firefox的一个插件，操作简单，用户可以方便的根据需求创建和测试HTTP请求。

#### 一、安装 ####

打开firefox浏览器，在附件组件中搜索RESTClient，在查询列表中点击安装按钮，安装完需要重启浏览器。图4 显示的RESTClient快捷键位置。

![图片描述][20160427164052477]

图4 RESTClient快捷键

#### 二、使用 ####

点击图4 RESTClient快捷键，打开工具面板如图5，

![图片描述][20160427164115794]

图5 RESTClient面板

在面板中我们可以配置request headers、request method、request url、body等等，最后点击SEND按钮发送请求，响应结果将显示则Response页签，如图6。

![图片描述][20160427164146216]

图6 请求参数配置

在主面板我们还可以配置Content-type为application/x-www-form-urlencoded;charset=UTF-8，此时Body格式为msg=\{“name”:”张三”,”timestamp”:”2015-08-13”\}；我们还可以处理get请求、配置请求权限、通过Favorite Requests保持常用请求等等。

另外一个优秀的HTTP服务测试工具是Chrome的Postman。Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件，是一个API针对性较强的桌面可视化测试工具。

#### 一、安装 ####

打开Chrome浏览器，在工具栏的扩展工具中搜索Postman，在查询列表中进行安装操作。安装完后需要在扩展程序中启用Postman，设置后会在桌面显示快捷方式(如图7)

![图片描述][20160427164252649]

图7 Postman快捷方式

#### 二、使用 ####

双击快捷方式，进入Postman主界面，如图8

![图片描述][20160427164333009]

图8 Postman主界面

在Postman主界面，左侧是保存的测试用例列表，右侧为请求参数配置、响应结果面板。请求参数配置如图9。

![图片描述][20160427164353822]

图9 请求参数配置

在请求参数配置页签，我们还可以配置get请求、通过Authorization配置权限、配置任意Headers、设置body格式(application/x-www-form-urlencoded、application/json等)、通过save按钮将请求实例保存到左侧测试用例列表。

RESTClient和Postman需要大家去发现他们更好、更多的功能，将它们的优势发挥到最大，使用问题可以和我交流。

通过这篇文章，我们了解到了如何使用浏览器开发者工具跟踪HTTP服务，故障排除，以及介绍了两款优秀的HTTP测试工具，希望能给大家带来帮助（送人玫瑰，手留余香）。

[20160427161316272]: /images/20220724/a5a0d65ab238477fb15347e2528b9c38.png
[20160427163447021]: /images/20220724/8d7c67d22ebb491885872bbafd59efc3.png
[20160427163521459]: /images/20220724/2e3c3937ddaa4d3daed5dd505b112def.png
[20160427164052477]: /images/20220724/d3bf3c5fe22d4271a0524b6c9164f86a.png
[20160427164115794]: /images/20220724/fe91144fa06a483b80d3d5df1c7339d8.png
[20160427164146216]: /images/20220724/9240929fbfc940819ae81fa9af3d3873.png
[20160427164252649]: /images/20220724/3ff59ebe56a241f39663e562dfc80d00.png
[20160427164333009]: /images/20220724/9736e5d8edda4b99b4909907b646fcb2.png
[20160427164353822]: /images/20220724/e4b57dd58b59442198ee9445a54ec21f.png