HTTP（Hyper Text Transfer Protocol）即超文本傳輸協(xié)議勾怒，是目前互聯(lián)網(wǎng)行業(yè)使用最為廣泛的一種網(wǎng)絡(luò)協(xié)議刀诬，采用請求/響應(yīng)模型∽昝铮客戶端向服務(wù)器發(fā)送一個請求倔约，請求頭包含請求的方法秃殉、URI、協(xié)議版本、以及包含請求修飾符钾军、客戶信息和內(nèi)容的類似于MIME的消息結(jié)構(gòu)鳄袍。服務(wù)器以一個狀態(tài)行作為響應(yīng)，相應(yīng)的內(nèi)容包括消息協(xié)議的版本吏恭，成功或者錯誤編碼加上包含服務(wù)器信息拗小、實體元信息以及可能的實體內(nèi)容。HTTP服務(wù)默認(rèn)端口是80砸泛，HTTPs默認(rèn)端口是443十籍。圖1為HTTP服務(wù)簡單的處理圖。
圖1 HTTP服務(wù)流程
本篇文章不會針對HTTP協(xié)議原理唇礁、底層進行大張旗鼓的分析勾栗，僅以HTTP開發(fā)者的角度進行講解，目的是為剛開始接觸HTTP服務(wù)開發(fā)或者接觸不久的同學(xué)提供幫助盏筐。在開發(fā)互聯(lián)網(wǎng)應(yīng)用的過程中對HTTP的跟蹤極為重要围俘，通過對HTTP通信的跟蹤我們可以知道client傳遞了哪些數(shù)據(jù)，什么類型什么格式的數(shù)據(jù)琢融，以及與HTTP相關(guān)的一些參數(shù)界牡，響應(yīng)等等，通過這些數(shù)據(jù)來診斷通信的健康狀況漾抬，進行故障排除宿亡。HTTP在通信的過程中將傳輸?shù)臄?shù)據(jù)分為兩部分header和body，Header又包括general header纳令、request header挽荠、response header、entity header平绩。那么我們通過什么方式來跟蹤這些數(shù)據(jù)呢圈匆？很幸運，Chrome捏雌、firefox跃赚、IE等主流瀏覽器給開發(fā)者提供了這樣的工具。下面是作者結(jié)合自己的使用經(jīng)驗進行的總結(jié)性湿，將以Chrome為例進行講解纬傲，并且主要以network面板為主。 打開Chrome瀏覽器肤频，點擊F12鍵調(diào)出開發(fā)者工具嘹锁，如圖2、圖3（兩個旅行網(wǎng)站）
[圖片上傳中着裹。。。（2）]
圖2 火車票查詢(post請求)
圖3 機票查詢(get 請求)
點擊搜索按鈕骇扇，在network面板中展示當(dāng)前操作從請求到響應(yīng)整個過程的調(diào)用鏈摔竿，單擊面板左側(cè)任意一個請求連接，右側(cè)將顯示該請求client-server通信過程中的所有數(shù)據(jù)少孝。我們一一開看下继低。
Headers頁簽
General
Request URL ：Client請求地址
Request Method：請求類型 get、post稍走、put袁翁、delete等
Status Code：響應(yīng)狀態(tài)碼 200、404婿脸、503等
Remote Address：域名對應(yīng)的真實ip:port
Request header
Accept：客戶端/發(fā)送端能夠接收的數(shù)據(jù)類型 text/html,application/xhtml+xml,application/xml粱胜； Accept-Encoding：瀏覽器可以支持的- web服務(wù)器返回內(nèi)容壓縮編碼類型 gzip, deflate
Accept-Language：瀏覽器可接收的語言 zh-CN,zh;q=0.8
Cache-Control：請求和響應(yīng)遵循的緩存機制，當(dāng)前請求的Cache-Control不會影響另一個請求的緩存處理狐树。private(默認(rèn))焙压、no-cache、must-revalidate抑钟、max-age涯曲。這個參數(shù)有幾種不同的使用場景： 打開一個新的窗口。private在塔、no-cache幻件、must-revalidate會重新請求服務(wù)器; max-age在超過時間年齡值時才會重新請求。
地址欄回車蛔溃。private绰沥、must-revalidate只有第一次時會請求服務(wù)器; no-cache每次都會請求；max-age在超過時間年齡值時才會重新請求城榛。
后退按鈕揪利。只有no-cache每次都重新請求服務(wù)器。
刷新狠持。全部重新請求服務(wù)器
Connection: 是否保持與服務(wù)器的tcp長連接疟位。keep-alive(默認(rèn))、close喘垂。Keep-alive代表服務(wù)會保留當(dāng)前連接一段時間被其他請求重復(fù)使用甜刻；close代表請求之后關(guān)閉連接。
Content-Length: 請求體的長度
Content-Type: 請求內(nèi)容的格式/類型 application/x-www-form-urlencoded application/json
Cookie: 客戶端緩存的Cookie正勒，在請求發(fā)送時會發(fā)送到服務(wù)端
Host: 請求的服務(wù)器域名
Referer: 當(dāng)前請求的來源
User-Agent: 發(fā)出請求的客戶端信息 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表單數(shù)據(jù)得院。
例如：
stationQuery.fromStation:北京 stationQuery.toStation:天津 stationQuery.date: 2016-04-23
Query String Parameter(get)
這個版塊是在Request Method為get請求類型時向服務(wù)端傳遞的請求參數(shù)。
例如：
type:inbound
depCityCode:BJS
depCity:北京
arrCityCode:SYX
arrCity:三亞
depDate:2016-04-30
arrDate:2016-05-03
Response header
Cache-Control：請求和響應(yīng)遵循的緩存機制
Connection：是否保持與服務(wù)器的tcp長連接章贞。keep-alive(默認(rèn))祥绞、close。Keep-alive代表服務(wù)會保留當(dāng)前連接一段時間被其他請求重復(fù)使用；close代表請求之后關(guān)閉連接蜕径。
Content-Type：響應(yīng)內(nèi)容的格式/類型text/html;charset=UTF-8標(biāo)識返回的內(nèi)容是文本類型两踏，html格式。
Content-Encoding：web服務(wù)器支持的返回內(nèi)容壓縮編碼類型 gzip
Content-Language：響應(yīng)體的語言
Content-Length：響應(yīng)體的長度
Date: 消息發(fā)出時間(GMT) Sat, 23 Apr 2016 07:47:54 GMT GMT+8=北京時間
Expires: 響應(yīng)過期時間 Transfer-Encoding：文件傳輸編碼chunked標(biāo)識傳輸內(nèi)容長度不確定兜喻，如果以gzip方式輸出時梦染，就不必申請一個很大的字節(jié)數(shù)組了，可以一塊一塊的輸出朴皆，更科學(xué)帕识，占用資源更少。
Vary: 提示使用緩存響應(yīng)還是從原始服務(wù)器請求遂铡，即當(dāng)緩存中存在一個未過期的響應(yīng)是否能被后續(xù)的請求服用肮疗，Accept-Encoding、User-Agent忧便。如果vary的值中返回了User-Agent族吻，那么通過不同的瀏覽器打開相同的頁面都會重新請求服務(wù)器；如果Vary中沒返回User-Agent珠增，那么客戶端緩存把它看成是相同的頁面超歌，相同的請求，直接給用戶返回緩存的內(nèi)容蒂教；如果返回的值是Accept-Encoding巍举，將請求頭信息中的Accept-encoding字段的值（gzip等）作為緩存的key;如果vary的值為*表示緩存不會去做判斷；
Preview頁簽
Preview頁簽展示請求響應(yīng)后的預(yù)覽凝垛。
Response頁簽
Response頁簽顯示響應(yīng)的具體內(nèi)容懊悯。
Cookie頁簽
Cookie頁簽以key-value形式展示客戶端所有的Cookie信息。
Timing頁簽
Timing頁簽展示的是從請求開始到響應(yīng)結(jié)束整個過程每個階段經(jīng)歷的時間或者說耗時梦皮。
到這里就基本介紹完了Chrome network面板的所有屬性（其他瀏覽器大同小異）炭分，掌握了這些知識點在開發(fā)調(diào)試HTTP應(yīng)用的過程中會非常的得心應(yīng)手。
好記性不如爛筆頭剑肯，下面是我記錄的一些常見HTTP服務(wù)錯誤代碼：
400 網(wǎng)頁不存在或請求參數(shù)語法有誤
401 賬戶無訪問權(quán)限
403 網(wǎng)站沒有綁定默認(rèn)首頁或者綁定默認(rèn)首頁錯誤
404 訪問的資源不存在捧毛，服務(wù)宕機
500 服務(wù)器內(nèi)部錯誤
502 網(wǎng)關(guān)錯誤，服務(wù)宕機
503 由于臨時過載或維護让网，服務(wù)器無法處理請求
HTTP應(yīng)用問題處理的步驟一般是檢查URL是否寫錯呀忧、網(wǎng)絡(luò)是否正常、DNS是否解析正確溃睹、應(yīng)用自身代碼問題而账。
接下來介紹兩款比較不錯HTTP服務(wù)測試工具，firefox的RESTClient和Chrome的Postman因篇。
先來看下firefox的RESTClient泞辐。RESTClient是由中國人開發(fā)的基于瀏覽器的測試工具笔横，是firefox的一個插件，操作簡單铛碑，用戶可以方便的根據(jù)需求創(chuàng)建和測試HTTP請求狠裹。
一、安裝
打開firefox瀏覽器汽烦，在附件組件中搜索RESTClient，在查詢列表中點擊安裝按鈕莉御，安裝完需要重啟瀏覽器撇吞。圖4 顯示的RESTClient快捷鍵位置。
[圖片上傳中礁叔。牍颈。。（4）]
圖4 RESTClient快捷鍵
二琅关、使用
點擊圖4 RESTClient快捷鍵煮岁，打開工具面板如圖5，
圖5 RESTClient面板
在面板中我們可以配置request headers涣易、request method画机、request url、body等等新症，最后點擊SEND按鈕發(fā)送請求步氏，響應(yīng)結(jié)果將顯示則Response頁簽，如圖6徒爹。
圖6 請求參數(shù)配置
在主面板我們還可以配置Content-type為application/x-www-form-urlencoded;charset=UTF-8荚醒，此時Body格式為msg={“name”:”張三”,”timestamp”:”2015-08-13”}；我們還可以處理get請求隆嗅、配置請求權(quán)限界阁、通過Favorite Requests保持常用請求等等。
另外一個優(yōu)秀的HTTP服務(wù)測試工具是Chrome的Postman胖喳。Postman是一款功能強大的網(wǎng)頁調(diào)試與發(fā)送網(wǎng)頁HTTP請求的Chrome插件泡躯，是一個API針對性較強的桌面可視化測試工具。
一禀晓、安裝
打開Chrome瀏覽器精续，在工具欄的擴展工具中搜索Postman，在查詢列表中進行安裝操作粹懒。安裝完后需要在擴展程序中啟用Postman重付，設(shè)置后會在桌面顯示快捷方式(如圖7)
[圖片上傳中。凫乖。确垫。（7）]
圖7 Postman快捷方式
二弓颈、使用
雙擊快捷方式，進入Postman主界面删掀，如圖8
[圖片上傳中翔冀。。披泪。（8）]
圖8 Postman主界面
在Postman主界面纤子，左側(cè)是保存的測試用例列表，右側(cè)為請求參數(shù)配置款票、響應(yīng)結(jié)果面板控硼。請求參數(shù)配置如圖9。
圖9 請求參數(shù)配置
在請求參數(shù)配置頁簽艾少，我們還可以配置get請求卡乾、通過Authorization配置權(quán)限、配置任意Headers缚够、設(shè)置body格式(application/x-www-form-urlencoded幔妨、application/json等)、通過save按鈕將請求實例保存到左側(cè)測試用例列表谍椅。
RESTClient和Postman需要大家去發(fā)現(xiàn)他們更好误堡、更多的功能，將它們的優(yōu)勢發(fā)揮到最大毯辅，使用問題可以和我交流埂伦。
通過這篇文章，我們了解到了如何使用瀏覽器開發(fā)者工具跟蹤HTTP服務(wù)思恐，故障排除沾谜，以及介紹了兩款優(yōu)秀的HTTP測試工具，希望能給大家?guī)韼椭ㄋ腿嗣倒逭陀ǎ至粲嘞悖?/p>
