先來看一個小故事：

小T在測試APP時，打開某個頁面展示異常，于是就跑到客戶端開發(fā)小A那里說：“你這個頁面做的有問題，頁面展示異?！?；

小A說：“這哪是我的問題，你去找后臺吧，后臺接口返回數(shù)據(jù)有問題”；

小T就屁顛屁顛的跑到后臺接口開發(fā)小M那里說：“你接口返回數(shù)據(jù)有問題，改下吧”；

小M看了看服務(wù)器日志說：“沒找到報錯啊，我這里服務(wù)正常，你抓個包看下吧”；

小T郁悶了，屁顛屁顛的回去了想：“抓包？抓啥包？”；

以上故事，在實(shí)在的測試工作中應(yīng)該會有不少初入職場的測試人員遇到，公眾號中應(yīng)該有不少剛?cè)肼殘龅臏y試人員，如果你對fiddler抓包還不熟悉，那么接下來這篇文章可能對你有所幫助，廢話不多說，下面開始介紹：

目錄

HTTP協(xié)議簡介

Fiddler簡介

Fiddler工作原理

Fiddler界面介紹

Fiddler抓取HTTPS請求配置

Fiddler自帶方便的編碼工具：TextWizard

接口測試

設(shè)置斷點(diǎn)，篡改和偽造數(shù)據(jù)

修改電腦系統(tǒng)hosts

HTTP請求統(tǒng)計(jì)視圖

簡單并發(fā)測試

慢網(wǎng)絡(luò)測試（限制網(wǎng)速）

顯示出服務(wù)器IP方法

命令行QuickExec用法

HTTP協(xié)議簡介

HTTP是超文本傳輸協(xié)議，信息是明文傳輸?shù)?，而HTTPS是安全超文本傳輸協(xié)議，需要證書和提供安全連接，換句話說，HTTPS是嵌套了SSL加密的HTTP連接，其內(nèi)容由SSL先加密，然后再傳輸。

簡單來講，HTTPS是加過密的HTTP。由于網(wǎng)絡(luò)上傳輸?shù)臄?shù)據(jù)是加密的，用戶在瀏覽網(wǎng)頁時，除了用戶自己可以看到當(dāng)前在看什么網(wǎng)頁，其他第三方是無法得知用戶在做什么的。比如用戶在網(wǎng)上登錄或輸入其他敏感信息進(jìn)行傳輸時一旦使用HTTPS，那么數(shù)據(jù)傳輸就不是明文了，對于第三方來講就無法獲取你的敏感信息。

Fiddler簡介

官網(wǎng)：https://www./fiddler

Fiddler是比較好用的web代理調(diào)試工具之一，它能記錄并檢查所有客戶端與服務(wù)端的HTTP/HTTPS請求，能夠設(shè)置斷點(diǎn)，篡改及偽造Request/Response的數(shù)據(jù)，修改hosts，限制網(wǎng)速，http請求性能統(tǒng)計(jì)，簡單并發(fā)，接口測試，輔助自動化測試，等等?，F(xiàn)在抓包工具成為測試人員的必備使用工具，開發(fā)人員也在普遍使用，進(jìn)行問題的定位分析，是非常有助于工作的一款工具。

Fiddler工作原理

先來看看fiddler未參與時，一個普通的客戶端與服務(wù)端的請求流程圖：瀏覽器訪問一個網(wǎng)站：87testing.com，瀏覽器給webserver發(fā)送一個Request，webserver接收到Request后進(jìn)行處理，返回給瀏覽器Response，然后瀏覽器解析Response中的html，展現(xiàn)網(wǎng)頁給用戶。如圖：

Fiddler工作于七層中的應(yīng)用層，在client與webserver之間以代理服務(wù)器的形式存在，啟動fiddler后會監(jiān)聽本地127.0.0.1的8888端口（默認(rèn)端口），IE/Chrome瀏覽器會自動設(shè)置局域網(wǎng)代理（Firefox代理是獨(dú)立的，需要單獨(dú)設(shè)置），如圖：

此時，fiddler就作為代理服務(wù)器，瀏覽器訪問87testing.com的流程：瀏覽器給webserver發(fā)送一個Request，代理服務(wù)器fiddler接收到Request，fiddler將Request發(fā)送到webserver，webserver接收到Request后進(jìn)行處理，Response到代理服務(wù)器fiddler，F(xiàn)iddler將Response返回到瀏覽器，如圖：

Fiddler界面介紹

Fiddler抓取HTTPS請求配置

由于fiddler安裝后默認(rèn)只能抓取http請求，如果需要抓取https請求需要進(jìn)行配置。配置方式：

Tools--->Options--->HTTPS，勾選CaptureHTTPS CONNECTs、Decrypt HTTPS traffic 、ignore server certificate errors(unsafe)，點(diǎn)擊OK，會彈出證書直接確認(rèn)即可。

此時，在電腦chrome瀏覽器上就可以訪問https的請求了，且fiddler會話列表上就可以顯示出https請求。

在配置移動端證書之前檢查下如下配置，Tools---->Connections---->勾選Allow remote computers to connect：

實(shí)際工作中，移動端項(xiàng)目大部分會在真機(jī)上進(jìn)行測試，那么下面介紹針對手機(jī)端訪問http/https請求在電腦端可以抓取到對應(yīng)手機(jī)端發(fā)出的請求。iOS設(shè)備及Android設(shè)備設(shè)置方式基本類似，下面以iphone設(shè)置為例：

在手機(jī)上設(shè)置代理：設(shè)置—>無線網(wǎng)絡(luò)，設(shè)置服務(wù)器ip和端口號：

然后手機(jī)safari瀏覽器輸入地址：電腦ip:8888如：http://172.21.10.42:8888會出現(xiàn)如下頁面：

點(diǎn)擊“FiddlerRoot certificate”進(jìn)行證書安裝，安裝完成后，如下說明安裝成功：

此時，證書還不算完成安裝完，假如手機(jī)是ios10.0以上系統(tǒng)，需要在手機(jī)系統(tǒng)設(shè)置---關(guān)于手機(jī)----證書信任設(shè)置，在此頁面把證書開啟即可，此時手機(jī)safari瀏覽器地址欄輸入：87testing.com，進(jìn)行訪問，在電腦端fiddler上即可顯示出對應(yīng)的請求：

Fiddler自帶方便的編碼工具：TextWizard

這個自帶編碼工具就不過多解釋了，直接看截圖：

接口測試

接口測試工具有不少，比如postman、soapui、jmeter等等，那么平時在測試的時候一般都會抓包，那么有可能開發(fā)會說幫忙再重現(xiàn)一下，那么又要重新造數(shù)據(jù)，太麻煩，此時就可以把這個接口保留下來，重新點(diǎn)下Execute即可調(diào)用。（根據(jù)實(shí)際情況可修改請求數(shù)據(jù)），如下：

點(diǎn)擊Execute,在會話列表中會新產(chǎn)生一條請求：

設(shè)置斷點(diǎn)，篡改和偽造數(shù)據(jù)

設(shè)置斷點(diǎn)，篡改和偽造數(shù)據(jù)，在測試中使用的也較平凡，給大家舉個我之前寫過一篇文章《互聯(lián)網(wǎng)產(chǎn)品接入第三方支付功能應(yīng)如何測試？》中也提到過的一個真實(shí)的案例：比如使用支付寶購買虛擬商品，往支付寶跳轉(zhuǎn)時，篡改了小的金額，結(jié)果購買虛擬商品成功了。（原本10元的商品，0.01元就搞定了）。多么可怕的一個bug啊，當(dāng)然這個問題可能對于一個做過支付有過經(jīng)驗(yàn)的測試朋友來說，可能會想：哎呀，這個問題都發(fā)現(xiàn)不了，還做什么測試？是的，問題是很簡單，對于一個剛?cè)肼殘龅臏y試朋友或者沒有支付相關(guān)經(jīng)驗(yàn)的測試朋友來說，很有可能會忽略。

前面講過fiddler作為代理服務(wù)器時的請求流程圖，請求時，可被篡改的兩個點(diǎn)：Before Requests、After Responses。

修改Requests方法：Rules---->Automatic Breakpoints---->Before Requests

以論壇發(fā)布帖子為例，修改請求前數(shù)據(jù)內(nèi)容，比如發(fā)布的內(nèi)容如下：

點(diǎn)擊發(fā)布帖子，此時請求被fiddler攔截掉，將右側(cè)requests  body里面的字段message內(nèi)容前新增內(nèi)容：“篡改requests數(shù)據(jù)成功！”，然后點(diǎn)擊Run to Completion，先關(guān)閉掉攔截Rules---->Automatic Breakpoints---->Disabled，其他請求都放過，點(diǎn)擊工具欄中的“Go”

論壇中查看到剛剛發(fā)布的帖子內(nèi)容如下，就被成功篡改了requests

還有一種方式在命令行中中斷某一個域名的方式，如中斷www.87testing.com，在命令行輸入命令：bpu www.87testing.com,這樣就可以攔截www.87testing.com的請求了，取消攔截輸入命令：bpu

修改Responses方法：Rules---->Automatic Breakpoints---->After Responses，方法跟修改Requests類似，無非修改的內(nèi)容變成了Response。

修改電腦系統(tǒng)hosts

作為前端工程師現(xiàn)在使用綁定hosts在本地開發(fā)調(diào)試的場景也越來越多，另外，當(dāng)預(yù)發(fā)環(huán)境和生產(chǎn)環(huán)境共用同一個域名時，通過綁定hosts的方式將訪問的域名原本指向生產(chǎn)服務(wù)器，強(qiáng)制指向預(yù)發(fā)服務(wù)器上。舉個例子，假如我要將www.baidu.com指向87testing.com對應(yīng)的服務(wù)器上，87testing.com對應(yīng)的服務(wù)器公網(wǎng)ip：47.94.18.31，配置如下：Tools---->Hosts---->勾選Enable remapping of requests for one host to a different host or IP,overriding DNS.然后host編輯區(qū)域，輸入需要域名需要指向的服務(wù)器公網(wǎng)IP，比如我將www.baidu.com域名指向了47.94.18.31，保存即可。（如果不使用host，勾去掉即可）

此時，電腦瀏覽器訪問：www.baidu.com，結(jié)果打開的內(nèi)容如下：

同時，抓包看到的結(jié)果如下：

HTTP請求統(tǒng)計(jì)視圖

頁面請求時間的統(tǒng)計(jì)，比較詳細(xì)，如果要看整個頁面從請求，到最后一個請求結(jié)束的整體時間，也可以在會話列表中，ctrl+點(diǎn)擊需要統(tǒng)計(jì)的請求，右邊Statistics可以看到總體明細(xì)。

簡單并發(fā)測試

在測試中，這樣的場景也非常多，比如被測平臺可以有多種貨幣，有可能從一種貨幣可以直接兌換成另一種平臺貨幣，在兌換的時候，要多關(guān)注下兩點(diǎn)安全：數(shù)據(jù)篡改及并發(fā)情況，數(shù)據(jù)篡改要測試扣減A貨幣時，篡改金額為負(fù)值或金額變少，那么兌換到B貨幣的數(shù)據(jù)校驗(yàn)，這個有點(diǎn)類似支付拿少的錢買多的東西，這里就不過多描述了。另外，并發(fā)情況，再比如經(jīng)常會有一些活動相關(guān)的測試，假如抽獎活動，一般都有限制一個人一天只能抽一次，那么抽獎的時候同一個用戶并發(fā)，會不會領(lǐng)取多次獎勵。當(dāng)然最好還是要有正規(guī)的壓測，或者在測試中可以借助fiddler做一個簡單的并發(fā)測試，都是很有必要的。

一個人一天只能有一次抽獎機(jī)會，那么在點(diǎn)擊抽獎按鈕發(fā)出請求之前，要設(shè)置Before Requests Breakpoints，點(diǎn)擊抽獎后在會話列表中會看到一個被斷點(diǎn)的請求，此時鼠標(biāo)選中此請求，按shift+u，會彈出并發(fā)次數(shù)的設(shè)置，如下，設(shè)置并發(fā)次數(shù)5次（下面演示截圖是發(fā)布帖子并發(fā)時的截圖，可參考）

點(diǎn)擊ok，次數(shù)會話列表就多出5個請求，如下：

此時，點(diǎn)擊工具欄“GO”，六個請求同時發(fā)到對應(yīng)的服務(wù)端，即可形成6個并發(fā)請求，再看看發(fā)表帖子的情況如下：

慢網(wǎng)絡(luò)測試（限制網(wǎng)速）

1、Fiddler---》Rules---》Customize Rules ，

2、在CustomRules.js里搜索找到：m_SimulateModem，

3、在如下腳本中修改上傳及下載延時毫秒數(shù)即可：

if (m_SimulateModem) {

            // Delay sends by 300ms per KB uploaded.

            oSession['request-trickle-delay'] = '300'; 

            // Delay receives by 150ms per KB downloaded.

            oSession['response-trickle-delay'] = '150'; 

        }

修改完成后，重啟下fiddler，Rules---->Performance---->Simulate Modem Speeds，選中即可生效。

顯示出服務(wù)器IP方法

Fiddler默認(rèn)配置中是看不到服務(wù)器IP的，接下來簡單介紹下在fiddler上也能夠看到請求的服務(wù)器IP：

1、Fiddler---》Rules---》Customize Rules ，

2、在CustomRules.js里搜索找到：static function Main() ，

3、添加如下一行腳本：

FiddlerObject.UI.lvSessions.AddBoundColumn('Server IP', 120, 'X-HostIP');

完整js代碼如下：

static function Main() {  

var today: Date = new Date();  

FiddlerObject.StatusText = ' CustomRules.js was loaded at: ' + today;  

// Uncomment to add a 'Server' column containing the response 'Server' header, if present  

FiddlerObject.UI.lvSessions.AddBoundColumn('Server IP', 120, 'X-HostIP');  

}

添加完成后，重啟下fiddler，就可以顯示出請求的服務(wù)器ip。

命令行QuickExec用法

常用命令：

help-----打開官方QuickExct命令用法幫助

?87testing------選中帶有87testing的請求

bpu www.87testing.com-------攔截www.87testing.com域名請求的requests

Bpafter www.87testing.com------攔截www.87testing.com域名請求的responses

參考官方文檔：http://docs./fiddler/knowledgebase/quickexec