作者：極客小俊
公眾號同名: 一個(gè)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主

Fiddler輔助標(biāo)簽工具欄 詳解

Fiddler中輔助標(biāo)簽工具欄算是用得比較多的，因?yàn)榻?jīng)常要在這里查看抓取數(shù)據(jù)包的詳細(xì)信息!

接下來我就詳細(xì)拆分輔助標(biāo)簽工具欄的各個(gè)區(qū)域來講解!

Statistics 性能統(tǒng)計(jì)

用于查看請求的性能數(shù)據(jù),統(tǒng)計(jì)與分析, 也就是說它就是對當(dāng)前請求的性能分析數(shù)據(jù)

當(dāng)你點(diǎn)擊一個(gè)HTTP請求會話的時(shí)候，就可以看到Statistics里面有關(guān)于當(dāng)前HTTP請求的性能以及數(shù)據(jù)分析!

例如: 一些TCP/IP的連接時(shí)間，DNS的解析時(shí)間、資源消耗、各個(gè)國家的請求網(wǎng)絡(luò)帶寬對比等信息

如圖

如果你是一個(gè)專業(yè)的前端開發(fā)者，這些數(shù)據(jù)就應(yīng)該重點(diǎn)關(guān)注一下!

Inspectors 請求與響應(yīng)數(shù)據(jù)查看

你有沒有想過在Fiddler中如何快速查看http請求與響應(yīng)報(bào)文呢?

其實(shí)當(dāng)我們在會話列表中雙擊某一個(gè)會話請求就會自動(dòng)跳轉(zhuǎn)到Inspectors選項(xiàng)卡

也就是當(dāng)抓包成功之后, 就可以在左側(cè)窗口中選擇你要查看的地址來進(jìn)行查看抓取的http信息數(shù)據(jù)， 當(dāng)選擇了相應(yīng)的地址之后，在右側(cè)選項(xiàng)卡中 選擇Inspectors(檢查器), 然后再點(diǎn)擊一下Raw就可以按照原生形式來進(jìn)行查看到相應(yīng)的http請求報(bào)文與http響應(yīng)報(bào)文, 分為上下兩個(gè)部分，上半部分是請求頭部分，下半部分是響應(yīng)頭部分。

如圖

對于每一部分,提供了多種不同格式查看每個(gè)請求和響應(yīng)的內(nèi)容, Inspectors選項(xiàng)卡中還有其他的

Inspectors選項(xiàng)卡上半部分HTTP請求內(nèi)容的子集選項(xiàng)卡如下表

Inspectors選項(xiàng)卡下半部分HTTP響應(yīng)內(nèi)容 的子集選項(xiàng)卡如下表

AutoResponder 自動(dòng)攔截請求

AutoResponder也叫做自動(dòng)響應(yīng)器

它允許你攔截指定規(guī)則的請求，并把響應(yīng)結(jié)果重定向到一個(gè)本地資源 或 直接使用Fiddler內(nèi)置的資源，從而代替服務(wù)器來自定義一個(gè)你想要的響應(yīng)。 說白一點(diǎn)就是篡改響應(yīng)

這個(gè)功能在我們做開發(fā)測試的時(shí)候也是非常有用的 ，使用它我們可以不影響用戶體驗(yàn)的前提下進(jìn)行測試!

舉個(gè)例子?? 當(dāng)我們請求百度頁面的時(shí)候, 抓取到其中一個(gè)百度logo圖片會話,最后把這個(gè)圖片會話響應(yīng)給替換成其他資源!

首先我們可以在Fiddler中的Inspectors結(jié)合會話列表找到這個(gè)圖片的連接資源URL地址: 可能有多個(gè)

例如

然后切換到AutoResponder選項(xiàng)卡, 在Rule Editor規(guī)則編輯中填入要請求的資源地址和替換成的響應(yīng)，最后點(diǎn)擊save保存一下, 就可以了!

溫馨提醒 最好要把以下這3個(gè)復(fù)選框勾上!??

Enable Rules(啟用規(guī)則)

Accept all connects(接受所有連接)

Unmatched requests passthrough(不匹配的請求傳遞)

如圖

那么下一次你再次請求百度頁面的時(shí)候,如果再次遇見到這個(gè)百度logo圖片的資源地址，那么請求就會被中間層的Fiddler所劫持并篡改成為我們設(shè)置的某個(gè)響應(yīng)資源，并返回給客戶端, 明白了吧, 這個(gè)響應(yīng)不是從服務(wù)器回來的，而是我們?nèi)藶?code>篡改的!

注意測試的時(shí)候，最好使用去緩存刷新來測試, 瀏覽器快捷鍵shift+F5

效果如圖

Fiddler其實(shí)還有很多內(nèi)置的響應(yīng)規(guī)則，根據(jù)實(shí)際情況和需求來決定如何測試

如圖

AutoResponder4.png

我們還可以自定義編輯響應(yīng)也就是Edit Response

舉個(gè)例子?? 我們可以直接編輯服務(wù)器返回響應(yīng)信息的詳細(xì)內(nèi)容,然后再返回給客戶端

如圖

效果如下

響應(yīng)都可以隨便篡改 Fiddler還有什么事情不能做的!????

總之通過這種中間截獲的手段并篡改響應(yīng)資源的手法就可以實(shí)現(xiàn)很多資源響應(yīng)的修改，你也可以修改html、css、js等資源都是可以的 ,這極大方便了我們做開發(fā)模擬請求和響應(yīng)測試!????

Composer 設(shè)計(jì)請求發(fā)送到服務(wù)器

它可以允許我們自定義請求報(bào)文來發(fā)送到服務(wù)端，當(dāng)然也可以手動(dòng)創(chuàng)建一個(gè)新的請求，也可以從會話列表中拖拽一個(gè)現(xiàn)有的請求去發(fā)送!

在Parsed(解析模式)下我們只需要提供簡單的URL地址就可以了, 并且還可以在RequestBody中去定制一些屬性，例如模擬瀏覽器消息頭User-Agent

但是Composer通常在我們開發(fā)項(xiàng)目當(dāng)中用于接口測試 也是經(jīng)常用于測試一些api接口的最好方法!

當(dāng)然有時(shí)候也可以通過Composer來校驗(yàn)后端接口的嚴(yán)謹(jǐn),從而跳過一些前端的限制,去直接訪問后端代碼的邏輯!

Composer下還有幾個(gè)子集選項(xiàng)卡:Parsed、Raw、Scratchpad、Options

具體解釋如下表:

其中options中的設(shè)置項(xiàng)如下表:

我們用得最多的也就是Parsed(詳細(xì)展示請求結(jié)構(gòu))

如圖

舉個(gè)例子?? 我們用圖靈機(jī)器人來測試一個(gè)POST請求的智能聊天對話接口!

圖靈機(jī)器人接口信息

參數(shù)格式

{
    "perception": {
        "inputText": {
            "text": "聊天文字"
        },
    },
    "userInfo": {
        "apiKey": "申請的key",
        "userId": "隨機(jī)32位字符串"
    }
}

文檔說明 https://www.kancloud.cn/turing/www-tuling123-com/718227

操作流程

那么使用Fiddler調(diào)試一個(gè)POST請求并帶有json格式的數(shù)據(jù)，我們可以打開Composer面板, 在Composer面板中的第一個(gè)下拉框中選擇POST請求方式,然后輸入請求接口的地址!

在Request Headers中也可以輸入一些請求頭信息，也可以不輸入，它會幫你自動(dòng)生成

然后在Request Body中輸入請求的JSON數(shù)據(jù)

最后點(diǎn)擊Execute(執(zhí)行),若在會話列表中看到結(jié)果返回200表示操作成功！

如圖

這個(gè)時(shí)候,我們就可以在Inspectors里面查看到請求響應(yīng)的結(jié)果了!

如圖

Composer_2.png

如果返回的JSON數(shù)據(jù)格式不清楚，其實(shí)你可以拿到一些數(shù)據(jù)格式化網(wǎng)站上去格式化一下就可以了

如圖

再舉個(gè)例子?? 我們再請求一個(gè)GET請求

如圖

這樣就可以返回?cái)?shù)據(jù)了!

以上這些都是測試的第三方接口，如果是你自己寫的api接口也是可以這樣子來測試的!

總而言之:Composer可以幫助你去發(fā)送數(shù)據(jù)包,幫助你去做一些接口測試,幫助你去做一些平常沒辦法做到的一些測試!??

Filters 請求過濾器

Filters本意就是過濾的意思, 它的主要作用就是用來過濾請求用的， 要知道有的時(shí)候 會話列表中或存在大量的請求會話, 那么有些時(shí)候會根據(jù)用戶的條件進(jìn)行一個(gè)會話篩選, 也就是說通過過濾規(guī)則來過濾掉那些不想看到的請求!

Filters選項(xiàng)卡也是在我們抓包過程中使用頻率非常高的，其中功能也比較多，這里我把它內(nèi)部的功能逐一拆解分成7個(gè)部分來進(jìn)行講解!

如圖

1.Hosts 這是Filters對主機(jī)的過濾規(guī)則設(shè)置!

如圖

我們使用Filters的時(shí)候就必須要勾選左上角的Use Filters(選擇過濾器)開啟過濾器, 勾選了之后Filters選項(xiàng)卡會出現(xiàn)綠色對鉤, 記住這個(gè)勾選之后，過濾器才會生效

并且這里還有兩個(gè)請求過濾條件:Zone和Host

Zone(區(qū)域): 下拉列表中可以選擇如下:

show only Intranet Hosts(只顯示局域網(wǎng)的請求)

show only Internet Hosts(只顯示廣域網(wǎng)的請求)

如圖

那么這到底代表什么意思呢？

舉個(gè)例子?? 我們來請求baidu試試!

如圖

如果設(shè)置為了show only Intranet Hosts 那么外網(wǎng)的請求會話是無法獲取到的,智能獲取內(nèi)網(wǎng)請求

如果設(shè)置為了show only Internet Hosts那么相反也智能獲取外網(wǎng)的請求，而內(nèi)網(wǎng)的請求是無法獲取到的!

平常如果我們沒有其他特殊需求的情況下Zone都被默認(rèn)設(shè)置為了No Zone Filter(不用區(qū)域過濾)

注意:各位要留意 Intranet(內(nèi)網(wǎng)) 和 Internet(因特網(wǎng)) 這兩個(gè)單詞很多人容易搞混!

Host(主機(jī)):下拉列表中可以選擇如下:

如圖

含義解釋:

Hide the following Hosts(隱藏下列指定的主機(jī)的請求)

show only the following Hosts (僅顯示以下指定主機(jī)的請求)

Flag the following Hosts(標(biāo)記以下主機(jī))

舉個(gè)例子?? 比如說: 我設(shè)置其中一個(gè)show only the following Hosts (僅展示以下指定主機(jī)的請求) 那么會話列表中只會出現(xiàn)我所指定的主機(jī)請求會話，其他一概不顯示!

注意: 這里設(shè)置之后 要點(diǎn)擊一下Actions中的Run Filterset now(運(yùn)行過濾)

如圖

另外兩個(gè)根據(jù)自己需求設(shè)置就行了, 平常沒特殊需求我們也是設(shè)置的No Host Filter

2.Client Process 這是對客戶端進(jìn)程的一些過濾設(shè)置!

如圖

其中有三個(gè)復(fù)選框:

show only traffic from (僅顯示當(dāng)前客戶端指定進(jìn)程的請求)

show only Internet Explorer traffic (僅顯示Internet Explorer請求)

Hide trafficfrom Service Host (對服務(wù)主機(jī)隱藏請求)

舉個(gè)例子?? 我僅顯示ie瀏覽器的請求會話,其他瀏覽器的請求會話一概不顯示!

如圖

看到了吧，這對某一些需求上還是有一定幫助的!

3.Request Headers 這是對請求頭的一些過濾規(guī)則

如圖

其中有幾個(gè)復(fù)選框功能如下表:

舉個(gè)例子

例如: 勾選show only if URL contains只會顯示指定包含這個(gè)內(nèi)容的 響應(yīng)會話

如圖

例如: 勾選set request header然后我們自定義一個(gè)header頭信息 然后去發(fā)送一個(gè)請求

如圖

然后我們可以在Inspectors中查看到請求頭就有我們所自定義的頭信息了, 有的時(shí)候做一些特殊調(diào)試還是能夠起很大幫助的!

如圖

4.Breakpionts 斷點(diǎn)設(shè)置

這個(gè)功能有的時(shí)候也非常重要!

功能解釋如下表:

關(guān)于請求斷點(diǎn)后面單獨(dú)拿一章節(jié)來說!

5.Response Status Code(請求狀態(tài)碼過濾)

這一部分的功能，很簡單就是看狀態(tài)碼進(jìn)行會話的過濾

如圖

功能解釋如下表:

舉個(gè)例子

我們勾選Hide success(2xx) 返回的請求會話中是不會包含2xx狀態(tài)碼的請求

6.Response Type and Size (根據(jù)響應(yīng)類型和大小進(jìn)行過濾)

如圖

Show all Content-Type 這一項(xiàng)比較常用, 意思為顯示所有指定Content-Type類型的請求

其中的選項(xiàng)描述如下表:

其他功能項(xiàng)如下表

舉個(gè)例子 比如我們禁止掉頁面上的css js 等資源看看請求的結(jié)果是什么樣子的!

如圖

效果

那么此時(shí)請求的頁面將會失去css 、js、圖片等資源, 讓他們都響應(yīng)為404狀態(tài)

以上這些功能可以測試一些資源等加載失敗的情況下頁面的展示情況, 前端必備哦!

7.Response Header (根據(jù)響應(yīng)頭信息進(jìn)行過濾)

如圖

Filters_19.png

功能詳解如下表:

小結(jié) 有些新手朋友在使用Fiddler的時(shí)候出現(xiàn)抓包失靈的情況，可能就是你在Filters選項(xiàng)卡中勾選了什么東西才導(dǎo)致的! 所以使用過濾器要注意一下!

如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “??點(diǎn)贊” “??評論” “??收藏” 一鍵三連哦！

如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，????歡迎在下面 ?? 留個(gè)言指出、或者你有更好的想法，歡迎一起交流學(xué)習(xí)??????????