本文向大家詳細講述了Fidder的常用功能,希望大家通過本文的閱讀,能使你進步!
前言
本文會對Fidder這款工具的一些重要功能,進行詳細講解,帶大家進入Fidder的世界,本文會讓你明白,Fidder不僅是一個抓包分析工具,也是一個請求發送工具,更加可以當作為Mock Server使用,而且可以寫斷點,讓我們一起進入Fidder的世界吧!
A.工具簡介
一.基本子產品劃分
1.第一塊區域是設定菜單,這個前面3篇都有介紹
2.第二塊區域是一些快捷菜單,可以點下快捷功能鍵
3.第三塊左邊是抓捕的請求會話清單,每一個請求就是一個會話
4.第四塊右邊上方區域是request請求的詳細資訊,可以檢視Headers、Cookies、Raw、JSON等
5.第五塊右邊下方區域就是response資訊,可以檢視服務端傳回的json資料或其它資訊
6.第六塊區域左下角黑色的那塊小地方,雖然很不起眼,容易被忽略掉,這地方是指令行模式,可以輸入簡單的指令如:cls,執行清屏的作用等

二、會話框
1.會話框主要檢視請求的一些請求的一些基本資訊,如# 、result、protocol、host、url、body、 caching、content-type、process
2、#:會話框清單最左側,#号這一欄是代表這個請求大概是什麼内容,<>這個符号就是我們一般要測試的請求與響應的類型。
3.result:這裡是伺服器傳回的代碼,如
--200,請求ok;2xx一般是伺服器接受成功了并處理
--3xx,重定向相關
--4xx,404最常見的的就是找不到伺服器,一般是請求位址有問題
--5xx,這個一般是伺服器本身的錯誤
4.protocol:這個是協定類型,如http、https
5.host:主機位址或域名
6.url:請求的路徑
7.body:該條請求産生的資料大小
8.caching:緩存相關
9.content-type:連接配接類型
10.process:用戶端類型
三、Request 和Response
1.Request是用戶端發出去的資料,Response是服務端傳回過來的資料,這兩塊區域功能差不多
2.headers:請求頭,這裡包含client、cookies、transport等
3.webfroms:請求參數資訊表格展示,更直覺。可以直接該區域的參數
4.Auth:授權相關,如果顯示如下兩行,說明不需要授權,可以不用關注
(這個目前很少見了)
No Proxy-Authorization Header is present.
No Authorization Header is present.
5.cookies:檢視cookie詳情
6.raw:檢視一個完整請求的内容,可以直接複制
7.json:檢視json資料
8.xml:檢視xml檔案的資訊
四、decode解碼
1.如果response的TextView區域出現亂碼情況,可以直接點下方黃色區域解碼
2.也可以選中上方快捷菜單decode,這樣後面的請求都會自動解碼了
B.會話儲存
為什麼要儲存會話呢?舉個很簡單的場景,你在上海測試某個功能接口的時候,發現了一個BUG,而開發這個接口的開發人員是北京的一家合作公司。你這時候給對方開發提bug,如何顯得專業一點,能讓對方心服口服的接受這個BUG呢?如果隻是截圖的話,不是很友善,因為要截好幾個地方還描述不清楚,不如簡單粗暴一點把整個會話儲存起來,發給對方。
一、儲存為文本
1.以部落格園登入為例,抓到登入的請求會話
2.點左上角File>Save>Selected Sessions>as Text,儲存到電腦上就是文本格式的
3.文本格式的可以直接打開,結果如下圖
二、幾種儲存方式
1.save-All Sessions :儲存所有的會話,saz檔案
2.save-Selected Session:儲存選中的會話
--in ArchiveZIP :儲存為saz檔案
--as Text :以txt檔案形式儲存整個會話包括Request和Response
--as Text (Headers only) :僅儲存頭部
3.Request:儲存請求
--Entir Request:儲存整個請求資訊(headers和body)
--Request Body:隻儲存請求body部分
4.Response:儲存傳回
--Entir Response:儲存整個傳回資訊(headers和body)
--Response Body:隻儲存傳回body部分
--and Open as Local File:儲存Response資訊,并打開檔案
三、亂碼問題(decode)
1.打開部落格園首頁:http://www.cnblogs.com/yoyoketang/,儲存之後檢視,會發現傳回的是亂碼
2.遇到這種情況,主要是需要解碼,用前面學到的decode方法
3.點選箭頭區域後,重新儲存就沒亂碼了。
4.還有一個最簡單辦法就是選中上圖會話框上的decode按鈕,這樣就自動解碼了。
四、儲存與導入全部會話
1.我們可以打開fiddler,操作完部落格園後,選中save>All Sessions,儲存全部會話
2.儲存後,在fiddler打開也很友善,直接把剛才儲存的會話按住拽進來就可以了
3.也可以選擇File>Load Archive導入這個檔案
五、Repaly
1.導入請求後,可以選中某個請求,點選Repaly按鈕,重新發請求
2.也可以ctrl+a全部選中後,點Repaly按鈕,一次性批量請求
這樣儲存會話和replay功能其實就是相當于錄制和回放了
C.自定義會話框
一、添加會話框菜單
1.點會話框菜單(箭頭位置),右鍵彈出選項菜單
2.選擇Customize columns選項,Collection選項選擇Miscellaneous
3.Field Name選擇:RequestMethod
4.點Add按鈕即可添加成功
二、隐藏會話菜單
1.選擇需要隐藏的菜單,右鍵。選擇Hide this column
2.隐藏後也可以讓隐藏的菜單顯示出來:Ensure all columns are visble
三、調整會話框菜單順序
1.如果需要調整會話框菜單順序,如:Content-Type菜單按住後往前移動,就能調整了
四、會話排序
1.點選會話框上的菜單,就能對會話清單排序了,如點body菜單
2.點完後上面有個上箭頭(正序),或者下箭頭(倒叙)。但是不能取消,取消的話關掉fiddler後重新打開就行了。
D.斷點(bpu)
這個功能本來不打算分享給大家的,但是這個功能的确是一個強大的功能,用的好你就可以走上人生巅峰,迎娶白富美,用的不好,很容易成為黑客或者會有更加嚴重的後果!但是後面想了一下,你想成為什麼,誰都攔不住,反而想學知識的人,會覺得這個功能是神器!話扯得有點遠,言歸正傳。什麼是斷點?還有斷點有什麼用呢?我們一一為大家揭曉!
一. 斷點
1. 斷點的作用
舉個例子,以登入中的賬号為例,限制了必須用手機号注冊,這樣登入自動限制了登入賬号為11位,同時前端和後端同時判斷輸入的賬号是不是為11位,如果我們要測試後端有沒有對大于11位或者小于11位做出判斷,很顯然,前端隻能輸入等于11位的。如果輸入超過11位或者少于11位,前端就不發送請求去請求後端。是以我們需要抓到接口,修改請求參數,繞過前端驗證,發送一個大于或小于11位的數給後端,驗證後端功能是否OK。
2.fidder中斷點的展現
- Fiddler設定斷點,可以修改HTTP請求頭資訊,如修改Cookie,User-Agent等
- 可以修改請求資料,突破表單限制,送出任意數字,如充值最大100,可以修改成10000
- 攔截響應資料,修改響應體,如修改服務端傳回的頁面資料
二、斷點的兩種方式
1.before response:這個是打在request請求的時候,未到達伺服器之前
2.after response:也就是伺服器響應之後,在Fiddler将響應傳回給用戶端之前
三、全局斷點
1.全局斷點就是中斷fiddler捕獲的所有請求,先設定下,點選rules-> automatic breakpoint ->before requests
2.選中before requests選項後,打開部落格園首頁:http://www.cnblogs.com/yoyoketang/,看到如下T的辨別,說明斷點成功
3.打完斷點後,會發現所有的請求都無法發出去了,這時候,點下Go按鈕,就能走下一步了
4.找到需要修改的請求後,選中該條會話,右側打開WebFroms,這時候裡面的參數都是可以修改的了
5.修改之後點Run to Completion就能送出了,于是就成功修改了請求參數了
6.打全局斷點的話,是無法正常上網的,需要清除斷點:rules-> automatic breakpoint ->disabled
四、單個斷點
已經知道了某個接口的請求位址,這時候隻需要針對這一條請求打斷點調試,在指令行中輸入指令就可以了
請求前斷點(before response): bpu
1. 論壇登入接口:https://passport.cnblogs.com/user/signin
2. 指令行輸入:bpu https://passport.cnblogs.com/user/signin 回車
3.請求登入接口的時候,就會隻攔截登入這個接口了,此時可以修改任意請求參數
4.取消斷點,在指令行輸入: bpu 回車就可以了
響應後斷點(after requests): bpafter
1. 論壇登入接口:https://passport.cnblogs.com/user/signin
2. 在指令行輸入:bpafter https://passport.cnblogs.com/user/signin 回車
3.登入部落格園,會發現已經攔截到登入後伺服器傳回的資料了,此時可以修改任意傳回資料
4.取消斷點,在指令行輸入: bpafter 回車就可以了
五、攔截來自某個網站所有請求
1.在指令行輸入:bpu www.cnblogs.com
2.打開部落格園任意網頁,發現都被攔截到了
3.打開部落格園其他網站,其它網站可以正常請求
4.說明隻攔截了來自部落論壇(www.cnblogs.com)的請求
5.清除輸入bpu回車即可
E. get和post請求
一、get請求
1.打開fiddler工具,然後浏覽器輸入部落格首頁位址:http://www.cnblogs.com/yoyoketang/
2.點開右側Inspectors下的Headers區域,檢視Request Headers
3.Request Headers區域裡面的就是請求頭資訊,可以看到打開部落格園首頁的是get請求
二、post請求
1.打開登入首頁:https://passport.cnblogs.com/user/signin
2.輸入賬号和密碼登入成功後,檢視fiddler抓包的請求頭資訊,可以看出是post請求
三、如何找出需要的請求
1.打開fiddler後,左邊會話框區域刷刷刷的很多請求,那麼如何有效的找出自己需要的請求呢?
2.首先第一步:清屏(cls),在左下角指令行輸入cls,清空螢幕(清屏也可以使用快捷鍵Ctrl+X)
3.第二步在浏覽器輸入url位址的時候,記住這個位址,如打開部落格首頁:http://www.cnblogs.com/yoyoketang/,在點選登入按鈕的時候,不要做多餘的操作了,然後檢視fiddler會話框,這時候有好幾個請求。
4.如下圖,紅色框框這個地方就是host位址,紅色圈圈地方就是url的路徑(yoyoketang),也就是部落格首頁的位址了,那這個請求就是部落格首頁的請求了。
F. get請求(url詳解)
一、url詳解
1.url就是我們平常打開百度在位址欄輸入的:https://www.baidu.com,如下圖,這個是最簡單的url位址,打開的是百度的首頁
2.再看一個稍微複雜一點的url,在百度輸入框輸入:上海悠悠部落格園
3.檢視url位址欄,對比之前的百度首頁url位址,後面多了很多參數。當然最主要的參數是/s?wd=上海悠悠部落格園(後面的一大串可以暫時忽略)。
4.那麼問題來了,這些參數有什麼作用呢?
可以做個簡單的對比,在位址欄分别輸入:
https://www.baidu.com
https://www.baidu.com/s?wd=上海悠悠部落格園
對比打開的頁面有什麼不一樣,現在知道作用了吧,也就是說這個多的"/s?wd=上海悠悠部落格園"就是搜尋的結果頁面
二、url解析
1.以"https://www.baidu.com/s?wd=上海悠悠部落格園"這個url請求的抓包為例
2.那麼一個完整的url位址,基本格式如下:
https://host:port/path?xxx=aaa&ooo=bbb
--http/https:這個是協定類型,如圖中所示
--host:伺服器的IP位址或者域名,如圖中2所示
--port:HTTP伺服器的預設端口是80,這種情況下端口号可以省略。
如果使用了别的端口,必須指明,例如:192.168.3.111:8080,這裡的8080就是端口
--path:通路資源的路徑,如圖中3所示/s (圖中3是把path和請求參數放一起了)
--?:url裡面的?這個符号是個分割線,用來區分問号前面的是path,問号後面的是參數
--url-params:問号後面的是請求參數,格式:xxx=aaa,如圖4區域就是請求參數
--&:多個參數用&符号連接配接
三、請求參數(params)
1.在url裡面請求參數一般叫params,但是我們在fiddler抓包工具看到的參數是:QueryString
2.QueryString是像服務端送出的參數,其實跟params是一個意思,每個參數對應的都有name和value值
3.多個參數情況如下:
四、UrlEncode編碼
1.如果url位址的參數帶有中文的,一般在url裡面會是這樣的,如第二點裡的wd=%E4%B8%8A%E6%B5%B7%E6%...
像看到%E4這種編碼的就是經過url編碼過的,需要解碼就能看到是什麼中文了
2.用urlencode線上編碼/解碼工具,位址:http://tool.chinaz.com/tools/urlencode.aspx
G. post請求(body)
一、body資料類型
常見的post送出資料類型有四種:
1.第一種:application/json:這是最常見的json格式,也是非常友好的深受小夥伴喜歡的一種,如下
{"input1":"xxx","input2":"ooo","remember":false}
2.第二種:application/x-www-form-urlencoded:浏覽器的原生 form 表單,如果不設定 enctype 屬性,那麼最終就會以 application/x-www-form-urlencoded 方式送出數
input1=xxx&input2=ooo&remember=false
3.第三種:multipart/form-data:這一種是表單格式的,資料類型如下:
------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="text"title------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="file"; filename="chrome.png" Content-Type: image/png PNG ... content of chrome.png ...------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
4.第四種:text/xml:這種直接傳的xml格式
<!--?xml version="1.0"?-->
<methodcall>
<methodname>examples.getStateName</methodname>
<params>
<param>
<value><i4>41</i4></value>
</params>
</methodcall>
二、json格式
1.打開部落格園的登入頁面,輸入賬号密碼後抓包,檢視post送出資料,點開Raw檢視整個請求的原始資料
2.前面講過post的請求多一個body部分,上圖紅色區域就是部落格園登入接口的body部分,很明顯這種格式是前面講到的第一種json格式
3.檢視json格式的樹狀結構,更友好,可以點開JSON菜單項
4.檢視這裡的json資料,很明顯傳了三個參數:
--input1:這個是登入的賬号參數(加密過)
--input2:這個是登入的密碼參數(加密過)
--remember:這個是登入頁面的勾選是否記住密碼的選項,False是不記住,True是記住
三、x-www-form-urlencoded
1.登入部落格園後,打開新随筆,随便寫一個标題和一個正文後儲存,抓包資料如下
2.如上圖的這種格式,很明顯就屬于第二種了,這種類型的資料檢視,在WebFrom裡面檢視了
3.上面紅色框框的Query String是url裡面的參數,下面紅色框框的body部分就是這次post送出的body參數部分了。
四、WebFrom
1.為什麼登入請求的WebFrom的body部分為空呢?
2.看上圖紅色框框的顯示:這裡隻支援application/x-www-form-urlencoded這種格式的body參數,也就是說json格式的,需要在JOSN這一欄檢視了。
H. 接口測試(Composer)
一、Composer簡介
點開右側Composer區域,可以看到如下界面,就是測試接口的界面了
1.請求方式:點開可以勾選請求協定是get、post等
2.url位址欄:輸入請求的url位址
3.請求頭:第三塊區域可以輸入請求頭資訊
4.請求body:post請求在此區域輸入body資訊
5.執行:Execute按鈕點選後就可以執行請求了
6.http版本:可以勾選http版本
7.請求曆史:執行完成後會在右側History區域生成曆史記錄
二、模拟get請求
1.在Composer區域位址欄輸入部落格首頁:http://www.cnblogs.com/yoyoketang/
2.選擇get請求,點Execute執行,請求就可以發送成功啦
3.請求發送成功後,左邊會話框會生成一個會話記錄,可以檢視抓包詳情
4.右側history區域會多一個曆史請求記錄
5.會話框選中該記錄,檢視測試結果:
--選中該會話,點開Inspectors
--response區域點開Raw區域
--Raw檢視的是HTML源碼的資料
--也可以點WebView,檢視傳回的web頁面資料
三、Json資料
1.有些post的請求參數和傳回參數是Json格式的,如部落格園的登入請求:https://passport.cnblogs.com/user/signin
2.在登入頁面手動輸入賬号和密碼,登入成功。
3.找到這個登入成功的會話,檢視json資料如下圖:
四、模拟post請求
1.請求類型勾選post
2.url位址欄輸入對應的請求位址
3.body區域寫登入的json參數,json參數直接copy上一步抓包的資料,如下圖紅色區域
4.header請求頭區域,可以把前面登入成功後的頭部抓包的資料copy過來(注意,有些請求如果請求頭為空的話,會請求失敗的)
5.執行成功後檢視測試結果:
--執行成功如第三所示的圖,顯示success=True
--執行失敗如下圖所示,顯示
message=Invalid length for a Base-64 char array or string.
success=False
i. Fidder中的mock簡單使用
mock可能很多人不了解是什麼功能,但是部落客隻能說通過以下的講解能夠使你腦海中有個印象它有什麼用,等到實際工作中真正要用的時候,這點印象能夠讓你回憶起曾經有過那麼一篇文章寫過。是以希望大家能夠了解最好,不能夠了解有個印象即可,不強求了解。
1. mock的作用
開發或者測試接口中,經常遇到調試過程中對接系統接口無法聯調或者背景未開發完成等情況。這時,我們就需要用一個mock server來為本地環境的請求響應資料。
2. Mock假資料
打開AutoResponder标簽設定。有沒有看到界面上有兩個複選框?第一個的作用是開啟或禁用自動重定向功能,我們就可以在下面添加重定向規則了。第二個複選框框勾上時,不影響那些沒滿足我們處理條件的請求。
可以通過“Add…”按鈕手動添加規則,不過這個URL已經出現在我們的session清單中,可以直接拖動過來。在左側的Session清單 中選擇第一步找到的session,拖動到AutoResponse标簽中。這樣就建立了一個針對這個URL的規則。
Fiddler幫我們生成的規則是:當URL為:http://api.sandbox.u.hd123.com/test01/soms/orderservice/order/3355170325000001,傳回400。修改規則,傳回本地檔案。
選擇“Find a file…”,就可以選擇本地的檔案作為傳回的body内容。
自動重定向功能是Fiddler最實用的功能,這裡的Rule可以自由地設定,可以使用搜尋(預設)、精确比對(EXACT)、正規表達式匹 配(REGEX)。處理方式可以選擇使用檔案,也可以選擇合适的時間暫停資料流(*bpu、*bpafter),人工幹預。通過以上幾個步驟,我們示範了 怎樣将HTTP請求重定向到本地的檔案,進行調試。這種調試方式适用于rest接口調試,web界面調試等。
*Fidder所有的功能講解就到這裡就結束了,你明白了多少呢?