前言
本文會對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假數據




*Fidder所有的功能講解就到這里就結束了,你明白了多少呢?