Fiddler應(yīng)用實(shí)戰(zhàn)-面試必問(wèn)且測(cè)試必會(huì)的技術(shù)

一. Fiddler部署與原理

1. Fiddler是什么？

Fiddler是位于客戶(hù)端和服務(wù)器端的HTTP代理，也是目前最常用的http抓包工具之一 。什么是包？什么抓包？什么情況下需要抓包？我們先解決這幾個(gè)問(wèn)題。

包：數(shù)據(jù)包。數(shù)據(jù)包就是之客戶(hù)端發(fā)給服務(wù)端的請(qǐng)求信息以及服務(wù)器返回給客戶(hù)端的響應(yīng)信息。舉個(gè)栗子：打開(kāi)瀏覽器，訪問(wèn)商城，進(jìn)行登錄操作，那么登錄時(shí)的用戶(hù)名、密碼等信息就是發(fā)送請(qǐng)求的數(shù)據(jù)包；那么登錄成功后返回的界面顯示的信息均是服務(wù)端返回的數(shù)據(jù)包，包括你的昵稱(chēng)，頭像等等。

抓包：抓取數(shù)據(jù)包；也就是通過(guò)工具獲取發(fā)送的請(qǐng)求信息或返回的數(shù)據(jù)信息。目的是分析數(shù)據(jù)包的內(nèi)容與協(xié)議，從而來(lái)判斷是否符合設(shè)計(jì)要求。

什么情況下需要抓包：

判斷一個(gè)問(wèn)題是前端bug還是后端bug的時(shí)候

開(kāi)發(fā)要你重現(xiàn)bug，截取數(shù)據(jù)，定位問(wèn)題的時(shí)候

開(kāi)發(fā)要你做接口測(cè)試，但又不沒(méi)給你接口文檔的情況

在不修改任何環(huán)境的情況下，修改返回的結(jié)果

2.Fiddler抓包原理

為什么Fiddler能抓到包？

Fiddler之所以能抓包，本質(zhì)上是因?yàn)闉g覽器/App/軟件設(shè)置了代理為 Fiddler。

?

?

Fiddler可以抓取Web/客戶(hù)端/App端的數(shù)據(jù)包。

對(duì)于Web端的數(shù)據(jù)包，如果使用IE瀏覽器和Chrome瀏覽器，會(huì)默認(rèn)走代理，不需要設(shè)置就可以抓包；如果是Firefox瀏覽器，則需要設(shè)置代理。在后面的中會(huì)給大家介紹。

對(duì)于App端的數(shù)據(jù)包，第一要保證手機(jī)與裝有Fiddler的電腦處于同一局域網(wǎng)；第二需要對(duì)手機(jī)設(shè)置代理。后續(xù)會(huì)繼續(xù)給大家編寫(xiě)詳細(xì)的Fiddler抓取App端的數(shù)據(jù)包。

3.常見(jiàn)抓包工具對(duì)比

除了Fiddler還有哪些能抓包？

抓包工具：wireshark、fiddler、httpwatch、charles、chrome開(kāi)發(fā)者工具(F12)，各工具的對(duì)比，查看下圖。

?

?

4.Fiddler環(huán)境部署

Fiddler的下載：https://www.telerik.com/fiddler。

安裝：傻瓜式安裝，一直點(diǎn)下一步，直達(dá)完成為止。

二.Fiddler快速定位Bug

1.面試中典型的問(wèn)題

面試過(guò)程中你有沒(méi)有遇到此類(lèi)問(wèn)題

測(cè)試過(guò)程中的bug，你是怎么判斷bug是前端問(wèn)題還是后端問(wèn)題?

測(cè)試過(guò)程中你是怎么復(fù)現(xiàn)bug，并提供數(shù)據(jù)，輔助開(kāi)發(fā)定位和解決問(wèn)題的？

領(lǐng)導(dǎo)給你安排接口測(cè)試的工作任務(wù)，但是沒(méi)有給你接口文檔，你會(huì)怎么開(kāi)展測(cè)試工作？

2. Fiddler定位Bug

如何用Fiddler復(fù)現(xiàn)Bug，定位Bug的前后端問(wèn)題，具體操作請(qǐng)聽(tīng)我一一解析：

開(kāi)啟Fiddler，進(jìn)入File--勾選Capture Traffic。默認(rèn)是開(kāi)啟的，如果停止抓包可以把它關(guān)閉

?

?

?

Chrome瀏覽器操作Bug復(fù)現(xiàn)操作過(guò)程，可以在Fiddler看到很多的請(qǐng)求信息

?

?

快速找到對(duì)應(yīng)操作的請(qǐng)求

排除法：通過(guò)host來(lái)排除，host這一列，不是我訪問(wèn)網(wǎng)址的域名信息，全部刪除

?

學(xué)會(huì)用ctrl+f快速搜索：是你復(fù)現(xiàn)問(wèn)題時(shí)，從UI界面輸入的數(shù)據(jù)，那么在此請(qǐng)求中是一定包含

?

雙擊搜索的請(qǐng)求，再進(jìn)行確定

?

分析請(qǐng)求數(shù)據(jù)，判斷Bug

fiddler 沒(méi)有抓到請(qǐng)求信息，可能是前端頁(yè)面元素沒(méi)有綁定事件，也有可能是前端發(fā)生了JS 錯(cuò)誤，一般就是前端的bug 。

fiddler抓取到的請(qǐng)求但是返回的結(jié)果錯(cuò)誤，首先確認(rèn)一下，是否是前端傳輸?shù)臄?shù)據(jù)是錯(cuò)的，數(shù)據(jù)錯(cuò)誤則是前端的bug ，數(shù)據(jù)正確，一般就是后端的bug。

fiddler抓取到的請(qǐng)求，其返回值的HTTP狀態(tài)碼是500（5xx），說(shuō)明是后端服務(wù)器的內(nèi)部錯(cuò)誤，一般就是后端的bug。

fiddler抓取到的請(qǐng)求，其返回值的HTTP狀態(tài)碼是404（4xx），說(shuō)明請(qǐng)求錯(cuò)誤，如果確定請(qǐng)求地址、參數(shù)沒(méi)有問(wèn)題，一般就是前端問(wèn)題。

?

?

三. Fiddler接口測(cè)試

1. 案例需求

抓取論壇登錄操作的數(shù)據(jù)包：http://62.234.58.195:3000/

2. 接口抓包步驟

開(kāi)啟Fiddler，進(jìn)入File--勾選Capture Traffic。默認(rèn)是開(kāi)啟的，如果停止抓包可以把它關(guān)閉

Chrome瀏覽器執(zhí)行登錄操作，Chrome瀏覽器不需要配置。【如果用火狐瀏覽器，火狐瀏覽器的代理配置如下】：

獲取Fiddler工具的監(jiān)聽(tīng)端口：打開(kāi)Tools-->Fiddler Options..-->Connections，獲取監(jiān)聽(tīng)端口8888

?

配置Firefox代理：進(jìn)入設(shè)置--搜索代理--代理設(shè)置

?

?

Fiddler抓取的請(qǐng)求信息，并進(jìn)行登錄請(qǐng)求的搜索和定位

?

3.接口測(cè)試

獲取接口測(cè)試關(guān)鍵要素

接口地址：找到請(qǐng)求--》右擊--》copy-->just url。論壇登錄接口地址：http://62.234.58.195:3000/signin

?

接口方法：雙擊請(qǐng)求-->Inspectors-->Headers-->第一行的第一個(gè)就是請(qǐng)求方法。論壇登錄接口方法：POST

?

接口參數(shù)：雙擊請(qǐng)求-->Inspectors-->WebForms-->參數(shù)名和參數(shù)值都顯示在這里。論壇登錄接口方參數(shù)：

1）入?yún)?shù)

name:yinuo1 用戶(hù)名

pass:123456 密碼

?

2）請(qǐng)求頭參數(shù)：雙擊請(qǐng)求-->Inspectors-->Headers-->查看請(qǐng)求頭參數(shù)

Content-Type: Application/x-www-form-urlencoded

?

響應(yīng)結(jié)果：雙擊請(qǐng)求，查看底部的WebView

?

接口測(cè)試

打開(kāi)Postman

輸入請(qǐng)求url、方法、參數(shù)；發(fā)送請(qǐng)求

?

查看響應(yīng)結(jié)果

?

如果你也想學(xué)習(xí)web/接口自動(dòng)化測(cè)試，測(cè)試開(kāi)發(fā)，性能測(cè)試流，歡迎加入軟件測(cè)試技術(shù)全棧，群里會(huì)有筆者熬夜精心整理的測(cè)試干貨，包括面試題、視頻、原創(chuàng)文章等資料大禮包。還有大廠高級(jí)測(cè)試開(kāi)發(fā)一起交流技術(shù)。