作者：極客小俊
公眾號:同名

前言

居然有人干了5年開發(fā)，抓包都不會!??

但是不要怕，不要哭，跟著我學一定有收獲！ 興趣就是你最好的老師，有興趣就一定要學下去 ,卷死他們!??

溫馨提示:全程干貨、內(nèi)容比較多，建議新手朋友可以先點贊+收藏再慢慢觀看! ??

Fiddler是什么?

在正式學習Fiddler之前， 我們還是要對Fiddler有一個初步的認識!

Fiddler是以web proxy代理服務器的形式工作的 , 它也是一個http協(xié)議數(shù)據(jù)抓包與調(diào)試代理工具，它能夠記錄和檢查當前你的電腦和互聯(lián)網(wǎng)之間的http消息, 也就是說可以將網(wǎng)絡傳輸發(fā)送與接受的數(shù)據(jù)包進行截獲、重發(fā)、編輯、轉(zhuǎn)存等操作 還可以用來檢測網(wǎng)絡安全。 是不是感覺很強大!??

Fiddler主要能干什么?

Fiddler是一個客戶端和服務端的一個http代理工具 , 客戶端和服務端彼此之間的交流都可以被Fiddler所監(jiān)聽到!

Fiddler不僅僅是一款非常強大的抓包工具，還是一款web調(diào)試的利器

它能夠?qū)崿F(xiàn)以下功能:

1. 監(jiān)控我們瀏覽器所有的http/https的信息和流量，也就是所有的請求，所有的流量都可以監(jiān)聽
2. 當監(jiān)聽截取到http請求之后，就可以做一些查看 分析瀏覽器請求的內(nèi)容細節(jié),就可以偽造一些請求 偽造一個服務器的響應都是可以的!
3. 還可以測試網(wǎng)站的性能
4. 解密https的web會話
5. 全局、局部斷點功能!

Fiddler的應用場景也很廣泛

1. 接口測試
2. 接口調(diào)試
3. 線上環(huán)境調(diào)試
4. web項目性能分析
5. 前后端bug監(jiān)測
6. 弱網(wǎng)斷網(wǎng)監(jiān)測
7. hosts配置監(jiān)測
8. mock模擬測試

要知道Fiddler作為系統(tǒng)代理，所有的來自微軟互聯(lián)網(wǎng)服務的http請求在到達目標Web服務器之前都會經(jīng)過Fiddler，同樣的，所有的Http響應都會在返回客戶端之前也會經(jīng)過Fiddler。

為什么要學習Fiddler?

因為我們做開發(fā)必然要和http打交道對吧， 并且還有一些新手朋友也要學習http的相關(guān)知識，但是http的知識點比較多和雜亂,如果你沒有一個看得見摸的著的數(shù)據(jù)參照，是很難去把控http信息, 那么要理解http協(xié)議，我個人建議可以先從抓包工具開始從淺入深的形式慢慢了解http以及Fiddler這款抓包工具的使用

所以不管你是分析http還是剛剛學習http的朋友 ,都可以先學習一下Fiddler抓包工具!

并且在windows系統(tǒng)下只要一提到抓包肯定首選的就是Fiddler

總之學習了Fiddler之后，會讓你對http的理解更上一層樓!

下載Fiddler

官方下載地址

https://www.telerik.com/download/fiddler

填寫好電子郵箱和國家地區(qū) 點擊Download for windows就可以下載了

如圖

注意 這個Fiddler工具是基于.NET Framework的 ,因為Fiddler是c#開發(fā)的

如果是比較老的windows系統(tǒng)要保證運行環(huán)境!??

Fiddler的安裝方法也很簡單 獲取到安裝包之后,直接選擇安裝路徑 或 無腦下一步就可以了!??

安裝成功會顯示如下界面!

軟件體系結(jié)構(gòu)—B/S 與 C/S架構(gòu)

B/S架構(gòu)

在了解Fiddler原理之前，還先清楚我們web最基本的架構(gòu)是什么，就是B/S架構(gòu), 它也是目前最常用的一種軟件架構(gòu)

B就是瀏覽器(Browsers) 也就是客戶端 這邊

S就是服務器端(Server)也就是web服務器這邊

我們平常的web服務、web項目、web應用都是運行在服務端的, 那么通過綁定ip地址+端口監(jiān)聽的形式來接收和處理一些前端也就是客戶端發(fā)起的http請求, 從而客戶端通過http協(xié)議和請求就可以獲取到指定服務器上的頁面 文件 資源、等等…

如圖

舉個例子

當你在瀏覽器地址欄上輸入百度的地址之后，服務器端就會給你返回一個百度的html頁面資源

總結(jié)

B/S架構(gòu)就是瀏覽器/服務器的一種交互模式，是Browser/Server的簡稱。

并且這種架構(gòu)的軟件不需要在用戶的電腦上安裝任何客戶端程序，只需要在用戶的電腦上安裝瀏覽器即可。

用戶僅僅使用瀏覽器通過web服務器和數(shù)據(jù)庫做交互，交互的結(jié)果將會以html網(wǎng)頁的形式顯示在瀏覽器上。

C/S架構(gòu) [了解]

出了我們的B/S架構(gòu)，其實還有一種就是C/S架構(gòu)是客戶端/服務端的一種交互模式，是Client/Server的簡稱。它是早期常用的一種軟件架構(gòu)，這種架構(gòu)的軟件需要在用戶的電腦上安裝客戶端程序, 有興趣的朋友可以自行了解，這里就不過多贅述了!

我們平常在進行軟件開發(fā)時，通常會根據(jù)需求在兩種基本架構(gòu)中進行選擇!

HTTP 基礎知識

學習Fiddler的時候,HTTP的知識點也是必不可少的, 所以這里必須要給大家簡單的介紹一下HTTP的相關(guān)知識!

http中文意思為超文本傳輸協(xié)議 英文全稱為Hyper Text Transfer Protocol

它是用于萬維網(wǎng)服務器傳輸超文本到本地瀏覽器的一種傳輸協(xié)議

目的是保證客戶端與服務端之間的通信

什么是http請求和響應?

http的工作方式為一個簡單的客戶端請求 與 服務端響應的應答過程

它指定了客戶端發(fā)送給服務器什么樣的消息形式以及得到什么樣的消息響應

所有的www文件都必須遵循這個標準協(xié)議, 目的是提供一種發(fā)布和接收html頁面的方法

舉個例子

比如說 客戶端（瀏覽器）向服務器提交一個http請求, 那么服務器又會向客戶端這邊返回響應信息。而這些響應信息包含關(guān)于客戶端請求的狀態(tài)信息以及客戶端所需要的內(nèi)容信息。

如圖

http協(xié)議和web之間的本質(zhì)

其實就是瀏覽器和服務器打交道的

客戶端向服務器端發(fā)送Http請求,然后服務器端向客戶端返回http響應!

http協(xié)議就是瀏覽器和服務器之間進行溝通的一種規(guī)范, 也就是以這個規(guī)范來向服務器發(fā)起請求, 服務器才會給客戶端進行正確的響應, 所以http有的時候也可以理解為是一種 規(guī)范、規(guī)則、標準

http協(xié)議是屬于應用層的協(xié)議,而且是基于TCP/IP協(xié)議的, 也就是說http通信發(fā)生在TCP/IP鏈接之上

通俗一點說http協(xié)議就是基于TCP的一種應用層協(xié)議 它不會關(guān)系數(shù)據(jù)傳輸?shù)募毠?jié)問題,也就是說你不用去關(guān)心它下層TCP的運行邏輯, 它的核心只在于用來規(guī)定客戶端和服務端的數(shù)據(jù)傳輸格式

最早http是用來向客戶端傳輸html文件內(nèi)容,默認的端口80

擴展

有興趣的朋友可以自行了解一下iso網(wǎng)絡七層模型

通俗點說http，就是在請求和響應之后，服務器端立即關(guān)閉連接，并釋放資源，這樣既保證了資源可顯示與可用性，也吸取了TCP協(xié)議的可靠性優(yōu)點,但是缺點就無法跟蹤用戶的操作了,所以我們在后端開發(fā)的學習中才會接觸一個東西叫session和cookie技術(shù)

所以你也可以理解為http是基于請求與響應的模式, 并且是無狀態(tài)的應用層協(xié)議

http請求和響應的基本原理

任何一個http請求都只會分為兩個部分: 一個請求報文另外一個是響應報文

請求報文是客戶端按照一定的格式生成一段文本,然后發(fā)給我們的服務端, 而服務器接收到了這樣一個請求報文就會解析里面的內(nèi)容,然后做出回饋，也就是響應

響應報文也就是服務器端根據(jù)請求報文反饋給客戶端的文本信息

http請求報文 (request)基本結(jié)構(gòu)

http請求(request)也叫請求報文一個基本的http請求報文結(jié)構(gòu)分為如下幾點:

1. 請求行:就是請求方式和協(xié)議,也就是說用于描述客戶端的請求方式,例如post/get方式, 以及請求的資源名稱和HTTP協(xié)議的版本號!
2. 若干個請求頭: 這些也叫消息頭告訴服務器發(fā)送的是什么數(shù)據(jù)類型，編碼類型、請求的是哪臺主機、以及客戶端瀏覽器的一些系統(tǒng)環(huán)境 等等， 這些消息頭中有很多頭部字段名 和 對應的值它的格式為 name:value
3. 空白行
4. 請求正文內(nèi)容

抓包了解一下

那么我們在學習http知識的時候 就可以先直接使用Fiddler來抓取一個http請求和http響應來先看看到底是什么東西!

這樣也有助于一些新手來理解http!

我們可以通過Fiddler抓取網(wǎng)絡數(shù)據(jù)包的手段，就可以看到一個基本的http請求結(jié)構(gòu)都包含哪些信息!

例如一個GET方式的請求(Request)信息 如下:

GET https://www.baidu.com/?name=zhangsan HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

例如一個POST方式的請求(Request)信息 如下:

POST https://api.codelife.cc/stat/userHm HTTP/1.1
Host: api.codelife.cc
Connection: keep-alive
Content-Length: 48
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
Content-Type: application/json
Accept: application/json, text/plain, */*
sec-ch-ua-platform: "Windows"
version: 1.2.27
Origin: chrome-extension://mhloojimgilafopcmlcikiidgbbnelip
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

{"fp":"4c49c2fd79e1658546e4b8ad","tn":6}

怎么樣 是不是看這一大堆腦殼都大了呢 ？ 哈哈哈不要著急，我們慢慢來學!??????

我們先來看一張請求(Request)圖解

如圖

然后我們來逐一拆解上圖中的各個部分!

1.請求方式 (Request method)

我們常見的一些請求方式也就是POST/GET,當然還有其他的一些請求方式, 如下表:

2.URL (Uniform Resource Locator)

URL中文名為統(tǒng)一資源定位符 英文全稱Uniform Resource Locator ,

我們網(wǎng)絡中的每一信息資源都有統(tǒng)一的且在網(wǎng)上唯一的地址!

URL具體由4部分組成：協(xié)議、主機、域名、端口、路徑文件、[附加資源]

URL的一般語法格式為：

protocol :// hostname[:port] / path / [?query-parameters]

1.協(xié)議 (protocol)

協(xié)議有http、ftp、https、等…

2.主機名 (hostname) + 域名

主機名+域名 例如: www.xsphp.com

3.端口 (port)

端口是一個數(shù)字, 端口是可選的 省略時使用方案是服務器默認配置的端口

例如 80、8080、..

各種傳輸協(xié)議都有默認的端口號，如http協(xié)議的默認端口為80

如果URL地址省略端口，則使用默認端口號

注意

有時候出于安全或其他考慮，可以在服務器配置上對端口進行重新定義，也就是采用非標準端口號，那么此時，URL地址中就不能省略端口號這一項。

4.路徑文件 (path)

由零或多個/符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址

例如: /tpl/index.php

5.查詢參數(shù) 附加資源 (query-parameters)

這一項在URL中也是可選的 用于給動態(tài)網(wǎng)頁如 PHP/JSP/ASP/ASP.NET等后端頁面 傳遞參數(shù)的一種方式，并且如果是GET請求方法, 那么可有多個參數(shù), 它們彼此用&符號隔開，每個參數(shù)的名和值用=符號隔開

語法格式: ?參數(shù)=值&參數(shù)2=值 以此類推!

例如: ?id=33&age=25&name=zhangsan

舉個例子

一個比較常見的url地址， 如下:

https://www.xxxx.net/xxxx/xxxx/xxxx/100?num=1001.2014.3001.5501

3.請消息求頭 (Request Header)

請求消息頭也叫消息頭告訴服務器發(fā)送的是什么數(shù)據(jù)類型，編碼類型、請求的是哪臺主機、以及客戶端瀏覽器的一些系統(tǒng)環(huán)境 等等前面已經(jīng)說過了, 并且請求頭是可以由開發(fā)人員根據(jù)需求去進行自定義的

這些消息頭中有很多頭部字段名 和 對應的值它的格式為 name:value

我們常見的一些請求頭如下表:

我們可以用Fiddler截取一個請求頭看看

如圖

4.空行

空白行 也就是在消息頭結(jié)束的下方，會存在一個空白行, 這是必須存在的, 是由HTTP標準規(guī)定的!

5.請求體

請求體它的出現(xiàn)是要根據(jù)請求的方式不同而不同, 也就是如果是POST那么就會以鍵與值的形式進行發(fā)送, 如果是GET請求那么這里就不會包含請求正文內(nèi)容

http響應報文 (Response)基本結(jié)構(gòu)

http響應(response)也叫響應報文

其實響應報文比請求報文更加簡單, 你只要能夠搞懂請求報文 那么響應報文就很容易搞懂!

http響應(response)的一個基本結(jié)構(gòu)分為如下幾點:

1. 響應行
2. 響應頭
3. 空白行
4. 響應體

我們可以通過Fiddler抓取網(wǎng)絡數(shù)據(jù)包的手段，就可以看到一個基本的http響應結(jié)構(gòu)都包含哪些信息!

舉個例子

如果你還看不明白 那么我們先來看一張http響應(response)圖解 你就會明白了!

然后我們來逐一拆解上圖中的各個部分!

1.響應行

響應行也叫狀態(tài)行， 上圖中響應行內(nèi)部其實包含了3個重要的信息部分:

HTTP協(xié)議的版本、HTTP狀態(tài)碼、HTTP的狀態(tài)描述

1.HTTP協(xié)議的版本現(xiàn)目前都是HTTP/1.1 版本 這個沒什么好說的!

2.HTTP狀態(tài)碼 可以用來表示網(wǎng)頁服務器端給客戶端返回的HTTP響應狀態(tài), 通常都是3位數(shù)字的代碼, 而這些常見的狀態(tài)碼又可以分為幾種提示類型: ?? 如下表

3.HTTP的狀態(tài)描述是緊跟在狀態(tài)碼后面的英文單詞

每一種具體類別狀態(tài)碼+狀態(tài)描述可以參考下表:

1xx: 提示消息類型

2xx: 成功消息類型

3xx: 重定向類型

4xx: 客戶端錯誤信息

5xx: 服務器錯誤信息

2.響應頭 (Response Header)

響應頭也叫消息報頭 也就是服務器端要告訴客戶端的一些附加信息, 但是也有可能這些響應頭是由后端開發(fā)人員進行自定義的!

而且這里的響應頭跟請消頭 很類似, 格式也基本一樣, 它的格式為 name:value

具體我這里也列舉了一些常見的響應頭 如下表:

還有更多的響應頭這里就不一一列舉了!

3.空白行

空白行也就是http規(guī)范制定的必須存在的一個空行, 空行的目的就是一種格式，也就是要告訴用戶接下來的內(nèi)容就是正文內(nèi)容了!

4.響應體

響應體也就是實際從服務器返回給客戶端的正文內(nèi)容,也可能是一些字符串， 也可以是任意的格式:

響應體大多數(shù)情況下都是html、json、文本、xml 這些格式!

小結(jié)

對于http相關(guān)的的知識點 就說這么多了,對于學習fiddler足夠了

接下來你就可以愉快的學習Fiddler了??

Fiddler運行原理

Fiddler的原理簡單點說就是通過改寫HTTP代理然后讓網(wǎng)絡數(shù)據(jù)從Fiddler這邊通過 這樣子來監(jiān)控并且截取到網(wǎng)絡信息數(shù)據(jù)。當你打開Fiddler的時候, 就已經(jīng)設置好了瀏覽器的代理了。當你關(guān)閉的時候，它會自動的幫你把代理還原

之前也說過了 B/S架構(gòu)就是客戶端和服務器之間的 請求和響應, 剛剛我們也知道了Fiddler通過代理的形式來進行監(jiān)聽，它在請求和響應中起到一個什么樣的角色呢?

這里還要清楚一點的就是 瀏覽器默認走的是我們的系統(tǒng)代理

其實這里的代理監(jiān)聽 就是在 請求和響應之間插了一腳, 讓fiddler成為系統(tǒng)代理

在你安裝好Fiddler之后啟動，并可以打開菜單欄中的Tools--->options--->Connections

如下圖

看到了吧,這里有一句Act as system proxy on startup意思就是(在啟動時充當系統(tǒng)代理),并且默認監(jiān)聽端口設置為了8888

如圖

這里以chrome瀏覽器為例:

只要fiddler一旦啟動并開始監(jiān)聽的時候，就會默認成為系統(tǒng)代理, 所以你的網(wǎng)絡請求 也就會被fiddler所抓取到!

如圖

或者如下圖一樣Fiddler就是一個中間的proxy(代理服務器)

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ItS8dJ6N-1651910920350)(img/fiddler_3-3.png)]

當關(guān)閉fiddler的時候，手動設置代理選項就會被清空

所以我們才會說Fiddler是介于客戶端和服務器中間的一個角色, 監(jiān)控客戶端和服務器所有通信的過程!

小結(jié)

Fiddler是以代理WEB服務器的形式工作的,瀏覽器與服務器之間通過建立TCP連接以HTTP協(xié)議進行通信，

瀏覽器默認通過自己發(fā)送HTTP請求到服務器，本地使用代理地址:127.0.0.1, 端口:8888.

而當Fiddler開啟會自動設置系統(tǒng)代理， 退出的時候它會自動注銷代理，這樣就不會影響別的程序。

但是如果Fiddler非正常退出，這時可能會因為Fiddler沒有自動注銷，而會造成網(wǎng)頁無法訪問。

解決的辦法是重新啟動下Fiddler就可以了, 這也是有很多新手安裝了Fiddler之后導致一些網(wǎng)絡無法訪問的原因之一!

Fiddler使用教程詳解

Fiddler的配置

安裝證書

fiddler默認是只抓取http協(xié)議, 如下圖

總之以后如果會話列表中的Host列中出現(xiàn)Tunnel to...字樣都說明是證書的問題, 這種就不能抓取到我們想要的會話

那么要抓取https協(xié)議的會話需要打開配置安裝證書才可以,畢竟目前很多網(wǎng)站都是https協(xié)議的, 所以在抓包之前，我們還要配置一下證書 否則無法抓包!

操作方法如下:

執(zhí)行菜單欄中的：Tools---->Options---->HTTPS然后勾選Decrypt HTTPS traffic(解密HTTPS流量)

然后會彈出一個對話框 直接點擊YES即可!

注意

你是第一次安裝的Fiddler那么正常情況下會彈出證書安裝的相關(guān)提示!

如果沒有彈出提示，那么久勾選Actions---> Trust Root Certificate(信任根證書)

如圖

接下來彈出這個對話框 全部點擊是 即可

如圖

然后彈出Added Fiddler's root certificate to the Machine Root list(將Fiddler的證書添加到機器根目錄列表中) 點擊確定

最后把下面的:

Ignore server certificate errors(unsafe)忽略服務器證書錯誤（不安全）

check for certificate revocation (證書撤銷檢查)

這兩個選項也勾選上!

如圖

那么現(xiàn)在證書也已經(jīng)安裝到Fiddler上了, 我們可以從Actions中選擇Open Windows Certificate Manager這一個選項, 打開打開Windows證書管理器去查看

如圖

打開打開Windows證書管理器 之后點擊菜單欄上的 操作--->查找證書然后輸入Fiddler 就會查找出證書了

如果沒有說明沒有安裝成功!

如圖

證書名為DO_NOT_TRUST_FiddlerRoot 大家可以對照著看看!

信任證書

證書安裝了之后 還要設置一下信任才行!

直接選擇Tools--->Options---->HTTPS---->Actions--->Trust Root Certificate

如圖

在接下來彈出的對話框中直接點擊確定或yes就行了!

好了現(xiàn)在不出意外的話就可以進行正常的抓取HTTPS包了

注意

如果還是不行，那么最好重置一下證書 在Actions中選擇Reset All Certificates(重置所有證書) 然后點擊確定刪除Fiddler所配置的證書,最后重新執(zhí)行之前的步驟就可以了!

如圖

小提示

我們在Skip Decryption中輸入ip地址或者域名可以用來跳過該主機或域名的https數(shù)據(jù)抓取

例如

Firefox 代理設置

如果你是Firefox 瀏覽器那么一定要開啟系統(tǒng)代理或者手動設置代理 才能正常的抓包!

在Firefox中的設置下找到網(wǎng)絡設置選擇系統(tǒng)代理或者手動設置代理 都可以!

如圖

Firefox 證書設置

有些Firefox的版本需要手動去安裝一下證書，才可以正常的去抓取信息

首先我們可以從Fiddler中手動的導出證書,操作如下

菜單欄選擇Tools-->Options-->HTTPS-->Actions選擇Export Root Certificate to Desktop(將根證書導出到桌面)

如圖

就會自動把根證書導出到電腦桌面

如圖

然后把這個證書導入到FireFox瀏覽器中去

在FireFox中點擊設置-->下面的隱藏與安全---->找到證書--->點擊查看證書

如圖

點擊導入

選擇剛剛從Fiddler導出的證書

就可以了，這是針對比較老一點的FireFox瀏覽器解密 HTTPS 流量的解決辦法

如果已經(jīng)安裝了證書會提示已經(jīng)存在!

Fiddler請求基本過濾

fiddler默認上抓到的是我們web端和移動端所有的請求請求，如果web端上打開了網(wǎng)頁并且同時手機也在發(fā)送請求會話的時候， 那么這時候就需要開啟過濾功能了!

我們通過Fiddler菜單欄中的Tools--->Options-->HTTPS修改..from all processes這一項

如圖

選項含義如下表:

Fiddler中開啟或關(guān)閉抓包功能

當你要Fiddler抓數(shù)據(jù)包的時候, 只需要確保Capture Traffic選項是開啟就可以了具體操作如下:

在菜單欄選擇File –> Capture Traffic就可以了, 開啟后再左下角狀態(tài)欄上會有Capturing的字樣顯示!

如圖

注意：再次點擊了Capturing就會關(guān)閉抓包，系統(tǒng)代理也會關(guān)閉

Fiddler核心功能分區(qū)

fiddler大致分為5 個區(qū)域，分別為菜單欄、工具欄、會話監(jiān)控列表、輔助選項卡、狀態(tài)欄

如圖

菜單欄

主要的功能其實很簡單主要又包含file(文件)、edit(編輯)、Rules(規(guī)則)、 Tools(工具) 、View(視圖) Help(幫助)

file菜單主要包含新建視圖、加載一個保存好的抓包會話文件、保存所有會話列表數(shù)據(jù)到一個.saz文件中等等.

edit菜單主要包含一些編輯的功能,例如對會話的:復制 粘貼 拷貝等操作

Rules規(guī)則菜單所謂規(guī)則 指的也就是抓包的規(guī)則, 按照設置的一系列規(guī)則來顯示抓取的數(shù)據(jù)會話常見勾選設置有:

Hide CONNECTs(把建立通道連接隱藏了)的規(guī)則

Hide 304s(也就是304相關(guān)的會話也隱藏了)的規(guī)則

Hide image Request (也就是隱藏和圖片相關(guān)會話)的規(guī)則

其他Rules規(guī)則菜單中的規(guī)則選項大家可以自行嘗試!

Tools(工具菜單) 這個菜單多數(shù)是針對fiddler這款工具本身的一些網(wǎng)絡設置

View(視圖菜單) 這個菜單是針對fiddler顯示界面與視圖的一些設置，如果有些工具欄和按鈕沒有顯示，就可以在這里來查找!

Help(幫助菜單) 一些關(guān)于fiddler和網(wǎng)絡的幫助信息文檔,有興趣的可以去查查看!

工具欄

工具欄上的快捷按鈕，也是平常我們在抓包過程當中經(jīng)常會使用到的，這里我列舉一些常會用到的工具按鈕

add a comment(添加評論備注按鈕)

使用這個工具按鈕你可以給某個會話添加一些描述或者備注信息!

如圖

Replay(重放請求按鈕)

這個按鈕的作用其實就是,重新發(fā)一次當前你所選擇的會話請求, 也就是說你點擊一下Replay就會通過Fiddler來幫你發(fā)一次請求到服務器去!

也可以通過選擇一個會話之后點擊鍵盤上的R鍵進行快速重放操作!

如圖

如果你想一次性向某個會話發(fā)送n次請求, 那么可以先選擇一個會話，然后按住shift+R 或者 按住shift+Replay按鈕或者shift + u來輸入一個請求的次數(shù)!

如圖

這種操作可以對一些普通的基礎服務器做一個壓力測試, 也就相當于一個簡單并發(fā)測試

Remove session(刪除會話按鈕)

刪除會話按鈕顧名思義就是用來刪除列表中的會話, 它這個按鈕內(nèi)部包含了刪除會話的一些過濾方法

比如:

1.Remove All(刪除全部會話) 快捷鍵為ctrl+x

2.images (刪除圖片相關(guān)的請求會話)

3.connect (刪除連接相關(guān)的請求會話)

4.Non-200s (刪除非200狀態(tài)的請求會話)

5.Non-Browser(刪除非瀏覽器的請求會話)

等等…

當然刪除會話的方法還有很多，比如你在會話列表中選擇了某幾個會話想保留，其他會話全部刪除

這種操作可以先按住ctrl然后選擇要保留的會話，然后再按下shift+delete即可!

如圖

當然也可以在會話列表中選擇某一個會話然后右鍵選擇Remove命令來進行刪除

selected Session (刪除選擇的會話)

Unselected Session (刪除未選擇的會話)

All Session (刪除全部會話)

如圖

當然也可以直接點擊鍵盤上的delete來進行刪除會話!

Decode(解碼按鈕)

當把這個按鈕點擊上了之后，會對所有返回的請求會話進行解碼

要知道http有的時候返回的正文內(nèi)容是被編碼之后的，若要解碼全部會話中的響應報文可以先把這個按鈕點選上, 再抓包的時候響應報文就會自動解碼其中的正文內(nèi)容!

如圖

當然你也可以不用點選這個按鈕，要解碼那個會話,再選擇會話的時候點擊右邊響應報文中的Response body is encoded click to decode(解碼響應報文) 就可以了!

如圖

Keep session (保持會話按鈕)

這個按鈕的功能可以幫你規(guī)定會話列表中最多能夠保留多少個會話, 根據(jù)需求自己選擇就可以了!

如圖

Any Process(瞄準目標會話)

這個功能有點意思, 可以瞄準你想要抓取的對象

比如說: 我們現(xiàn)在要抓取一個ie瀏覽器的請求數(shù)據(jù)包, 那么可以以下操作

如圖

看到Process(進程)了吧， 都是瞄準的ie瀏覽器來進行抓取的請求!

Find(會話查找按鈕)

find按鈕就是用來進行搜索和查找會話的, 我們可以根據(jù)一些條件快速定位到想要的會話請求

它對應的快捷鍵為ctrl+f

如圖

一些其他選項的含義如下表:

Save(會話保存按鈕)

這個按鈕會把當前所有的會話全部以一個.saz的一個歸檔文件進行保存!

這樣也方便發(fā)給其他的開發(fā)和測試人員觀看, 這沒什么好說的!

照相機按鈕

這個按鈕就是單純的截圖,截圖的時候會產(chǎn)生一個倒計時, 然后把截好的圖片通過本地發(fā)送請求到localhost, 也可以拷貝出來! 用處不是很大!

如圖

Browse (瀏覽器按鈕)

這個按鈕的作用就是可以快速的打開當前電腦里已安裝的瀏覽器 沒什么太大特別的!

Clear Cache(清除緩存按鈕)

這個按鈕的作用就是清除緩存, 注意它是清除的ie瀏覽器的緩存

TextWizard(按鈕)

這個按鈕的功能可以讓文本進行編碼與解碼

如圖

會話列表 (Session list) 詳解

會話列表 主要是fiddler所抓取到的每一條http請求都會顯示到這里!

每一條所抓取到的信息我們稱之為一個session(會話),有編程基礎的朋友肯定馬上就能理解這個會話的含義

會話列表中又包含了很多欄位,而每一個欄位都有其自己的含義,用來描述當前每一條會話的詳細信息!

各個欄位的含義描述如下表:

如圖

操作會話列表欄位

首先在每一個欄位上面右鍵都會出現(xiàn)以下三個選項

如圖

1.Search this column (搜索此欄)

意思是它會根據(jù)每一個欄位的特性來進行條件搜索此欄位, 這樣可以快速幫助用戶精準找到想要的數(shù)據(jù)信息!

如圖

2.Flag duplicates (重復會話標志)

這個功能可以給我們的會話打上標志背景, 并且這個背景顏色標記的是當前列中存在重復的數(shù)據(jù)

舉個例子吧: 例如我們在URL這一欄上右鍵選擇Flag duplicates 那么就會在當前列中存在重復URL的數(shù)據(jù)上打上一個綠色??的背景

如圖

3.Hide this column (隱藏此列)

這個沒什么說的 就是把當前這一列欄位給隱藏了!

4.Ensure all columns are visible(確保所有列都可見)

這個功能就相當于一個復位按鈕,如果你隱藏了某個欄位又不知道如何把它顯示出來，那么就直接點選它就可以全部欄位都復位!

5.Costomize columns(自定義欄位)

自定義欄位，是對所有列進行自定義, 其實也相當于新增一個欄位，而不是選擇的欄位

添加欄位

舉個例子?? 我們來給Fiddler添加一個IP顯示欄位

fiddler默認是不顯示ip欄位的，那么我們可以直接點擊菜單欄中的Rules--->Customize Rules

打開自定義規(guī)則對話框，這里其實應該說是會啟動Fiddler ScriptEditor(Fiddler的腳本編輯器)

這里就是允許用戶通過腳本來添加或自定義列

如圖

然后我們按下鍵盤上的Ctrl+F查找關(guān)鍵字為static function Main()的字符串, 然后添加顯示IP欄位的相關(guān)代碼：

代碼如下

FiddlerObject.UI.lvSessions.AddBoundColumn("欄位名稱自定義", 120, "X-HostIP");

如圖

這樣一來在會話列表中就會顯示請求服務器的的IP地址了!

如圖

會話類型小圖標

還有一點就是細心的朋友肯定發(fā)現(xiàn)在抓包的時候第一欄位除了顯示請求順序之外，還顯示了請求的文件類型圖標,也就是每個會話都標有一個對應的類型圖標

如圖

但是但通常不知道圖標代表著什么意思,這里我就來給大家挨個解釋一下:

如下表

icon	含義
	正在將請求發(fā)送到服務器
	正在從服務器讀取響應
	請求在斷點處暫停
	響應在斷點處暫停
	請求使用HTTP HEAD方法;反應應該沒有身體
	請求使用的 HTTP POST 方法
	請求使用HTTP連接方法;這將建立用于 HTTPS 流量的隧道
	響應是 HTML
	響應是圖像
	響應是一個JS腳本
	響應是級聯(lián)樣式表
	響應為 XML
	響應為 JSON
	響應是音頻文件
	響應是視頻文件
	響應是一個 Silverlight 小程序
	響應是一個 Flash 小程序
	響應是字體
	通用成功響應
	響應是 HTTP/300，301，302，303 或 307 重定向
	響應為 HTTP/304：使用緩存版本
	響應是對客戶端憑據(jù)的請求
	響應是服務器錯誤
	會話被客戶端、Fiddler 或服務器中止。
	表示請求的格式為html格式

請求會話的復制操作

Fiddler中提供了很多對請求會話的復制操作,讓你更好的去獲取想要的數(shù)據(jù)!

你可以在會話列表中選擇你要操作的會話， 然后右鍵選擇copy

如圖

其中子菜單含義如下表:

根據(jù)需求進行選擇就可以了!

請求會話的保存操作

Fiddler對會話的存儲也制定了一些規(guī)則

你可以在會話列表中選擇你要操作的會話， 然后右鍵選擇save

其中save菜單下有四個選項

1. Selected Session(選定的會話)
2. Request(請求)
3. Response(響應)
4. ...and Open as local File(作為本地文件打開)

Selected Session(選定的會話) 旗下子菜單選項如下

如圖

Request(請求)旗下子菜單選項如下

Response(響應)子菜單如下:

...and Open as local File(作為本地文件打開)

這個選項的意思就是保存為本地的一個html文件 并且進行打開!

保存會話亂碼問題

我們有時候保存會話查看時，會發(fā)現(xiàn)返回的響應體是亂碼

如圖

遇到這種問題，主要是需要解碼就行了

在Inspectors 會話響應中點擊Response body is encodee.click to decode后，重新保存就沒亂碼了。

也可以選中上圖會話框上的decode按鈕，這樣就自動解碼了

如圖

其實如果你了解了http的基礎知識，那么會話列表中的欄位信息也會很快的理解!

而你也不用每一個都去記住，要用的時候來查一查就行了!??

狀態(tài)欄

狀態(tài)欄上又分為幾個小區(qū)域分別為:快速執(zhí)行命令框(QuickExec)、

快速執(zhí)行命令框(QuickExec)

這個輸入框的作用就是允許用戶快速輸入并啟動一些腳本命令!

如圖

一些關(guān)于QuickExec的鍵盤快捷鍵

比如點擊 Alt+Q 可快速將焦點設置為快速執(zhí)行命令框如果 Fiddler 未處于活動狀態(tài)，請先按Ctrl+ALT+F激活 Fiddler

在快速執(zhí)行命令框中，按 Ctrl+I 會在快速執(zhí)行命令框中插入當前所選會話 URL

舉個例子??

我們可以在快速執(zhí)行命令框輸入 cls 或 clear命令來快速的清空會話列表

如圖

常見命令如下表

更多命令 可以查看官方文檔, 這里就不再過多贅述了，關(guān)于快速執(zhí)行命令框后面的斷點中還會用到!

all processes (進程篩選)

All Processes可以對抓包進行篩選，可以根據(jù)自己情況選擇。

如圖

也就是說在抓包的時候，是顯示所有會話進程還是瀏覽器請求的會話進程 還是不是瀏覽器請求的會話進程 或者全部隱藏，根據(jù)自己的需求進行選擇就行了!

空白小區(qū)域

這個小區(qū)域，如果你用鼠標點擊一下就會出現(xiàn)斷點的設置

如圖

狀態(tài)	描述
	意思就是請求之前斷點， 也就是當這個狀態(tài)啟動的時候，那么你發(fā)送的請求就會卡在這里!
	響應在斷點處暫停, 也就是說服務器已經(jīng)返回請求的數(shù)據(jù)了，但是被Fiddler在中間卡住了，還沒有到客戶端這一邊!
…

關(guān)于斷點我會后面會詳細講到!

狀態(tài)欄的其他地方就是顯示當前會話的數(shù)量以及當選所選擇會話的URL地址

Fiddler輔助標簽工具欄 詳解

Fiddler中輔助標簽工具欄算是用得比較多的，因為經(jīng)常要在這里查看抓取數(shù)據(jù)包的詳細信息!

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

Statistics 性能統(tǒng)計

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

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

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

如圖

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

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

你有沒有想過在Fiddler中如何快速查看http請求與響應報文呢?

其實當我們在會話列表中雙擊某一個會話請求就會自動跳轉(zhuǎn)到Inspectors選項卡

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

如圖

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

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

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

AutoResponder 自動攔截請求

AutoResponder也叫做自動響應器

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

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

舉個例子?? 當我們請求百度頁面的時候, 抓取到其中一個百度logo圖片會話,最后把這個圖片會話響應給替換成其他資源!

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

例如

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

溫馨提醒 最好要把以下這3個復選框勾上!??

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

Accept all connects(接受所有連接)

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

如圖

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

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

效果如圖

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

如圖

我們還可以自定義編輯響應也就是Edit Response

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

如圖

效果如下

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

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

Composer 設計請求發(fā)送到服務器

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

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

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

當然有時候也可以通過Composer來校驗后端接口的嚴謹,從而跳過一些前端的限制,去直接訪問后端代碼的邏輯!

Composer下還有幾個子集選項卡:Parsed、Raw、Scratchpad、Options

具體解釋如下表:

其中options中的設置項如下表:

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

如圖

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

圖靈機器人接口信息

參數(shù)格式

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

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

操作流程

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

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

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

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

如圖

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

如圖

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

如圖

再舉個例子?? 我們再請求一個GET請求

如圖

這樣就可以返回數(shù)據(jù)了!

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

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

Filters 請求過濾器

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

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

如圖

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

如圖

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

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

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

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

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

如圖

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

舉個例子?? 我們來請求baidu試試!

如圖

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

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

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

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

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

如圖

含義解釋:

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

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

Flag the following Hosts(標記以下主機)

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

注意: 這里設置之后 要點擊一下Actions中的Run Filterset now(運行過濾)

如圖

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

2.Client Process 這是對客戶端進程的一些過濾設置!

如圖

其中有三個復選框:

show only traffic from (僅顯示當前客戶端指定進程的請求)

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

Hide trafficfrom Service Host (對服務主機隱藏請求)

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

如圖

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

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

如圖

其中有幾個復選框功能如下表:

舉個例子

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

如圖

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

如圖

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

如圖

4.Breakpionts 斷點設置

這個功能有的時候也非常重要!

功能解釋如下表:

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

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

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

如圖

功能解釋如下表:

舉個例子

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

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

如圖

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

其中的選項描述如下表:

其他功能項如下表

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

如圖

效果

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

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

7.Response Header (根據(jù)響應頭信息進行過濾)

如圖

功能詳解如下表:

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

Fiddler 斷點(breakpoints)實戰(zhàn)

所謂斷點功能就是將你的請求或者響應截獲下來，但是不發(fā)送也不返回，都放到Fiddler這里, 這個時候你可以做很多事情，比如說，把請求報文改了，或 響應報文改了，再發(fā)送給服務器 或 客戶端

請求之前執(zhí)行斷點

還記得前面狀態(tài)欄說過的小空白區(qū)域嗎? 點擊這個區(qū)域就會出現(xiàn)斷點標志符號，如下表:

狀態(tài)	描述
	意思就是請求之前斷點， 也就是當這個狀態(tài)啟動的時候，那么你發(fā)送的請求就會卡在這里!
…

以上狀態(tài)圖標其實對應的也就是菜單欄中的Rules--->Automatic Breakpoints--->Before Request

如圖

舉個例子??

我們請求某個網(wǎng)站之前就先把這個斷點打開, 那么在請求的時候, 會話列表中所對應的請求也會呈現(xiàn)斷點狀態(tài)的圖標, 會話列表中URL所對應的網(wǎng)站也是無法顯示出來的, 因為此時此刻請求還未發(fā)到服務器。中間被Fiddler所截獲 ，那么現(xiàn)在就可以做一些數(shù)據(jù)和請求信息上的修改

然后等確定要發(fā)送到服務器的時候就點擊Run to Completion(完成) 把這一個請求發(fā)送到服務器端就可以了 !

如圖

注意 點擊Run to Completion(完成) 只是把當前所選擇到的會話解除斷點，讓它發(fā)送到服務器端，從而響應

響應之前執(zhí)行斷點

當我們再次點擊一下的時候就會切換到以上狀態(tài)圖標

其實對應的也就是菜單欄中的Rules--->Automatic Breakpoints--->After Request

而After Request(請求之后斷點) 和 Before Request(請求之前斷點)正好相反

如圖

舉個例子??

還是請求某個網(wǎng)站之前就先把這個請求后斷點打開, 那么此時響應信息已經(jīng)返回了，但是被的時候Fiddler卡主了, 會話列表中所對應的請求也會呈現(xiàn)請求后斷點的圖標, 會話列表中URL所對應的網(wǎng)站也是無法顯示 或者 無法提取最新的頁面信息, 因為此時此刻響應還未發(fā)到客戶端。返回途中被Fiddler所截獲

那么如果可以的話,現(xiàn)在就能做一些響應報文信息上的修改

然后等確定要發(fā)送到客戶端的時候就點擊Run to Completion(完成) 把這一個響應發(fā)送到客戶端就可以了 !

如圖

所以在Fiddler拿到響應信息的時候，先斷住，然后篡改一些信息之后再發(fā)給客戶端!

命令斷點

大家還記得狀態(tài)欄上的快速命令執(zhí)行框嗎? 在這里也可以輸入來執(zhí)行一些命令斷點

如圖

那么一些常見的斷點命令如下表:

Fiddler 弱網(wǎng)測試

什么是弱網(wǎng)?

弱網(wǎng)在Fiddler中就是設置網(wǎng)絡限速 簡單理解也就是在網(wǎng)絡不好 或者 網(wǎng)絡環(huán)境復雜、使用場景多變異常、網(wǎng)絡抖動、延時、丟包的環(huán)境下進行檢查的一種方式 就叫弱網(wǎng)測試

舉個例子

一款適配于低資源環(huán)境的醫(yī)療it系統(tǒng)項目來說，而它的使用場景主要是在一些2G網(wǎng)絡環(huán)境下，3G網(wǎng)都很少，并且穩(wěn)定性也是比較差。因此這款網(wǎng)站應用或app應用要想完成交付，就一定要在弱網(wǎng)狀態(tài)甚至在沒有網(wǎng)絡狀態(tài)下運行, 看看是不是能夠正常交付!

所以我們要模擬一個弱網(wǎng)環(huán)境進行測試 通過Fiddler軟件方式利用模擬網(wǎng)絡參數(shù)來配置弱網(wǎng)環(huán)境，就可以達到對帶寬、丟包、延時等進行模擬弱網(wǎng)環(huán)境目的

在windows環(huán)境下我們通常可以使用fiddler和network emulator for windows toolkit來模擬

在mac環(huán)境下則可以使用Charles和Xcode自帶的開發(fā)環(huán)境網(wǎng)絡異常模擬工具進行測試

Timeline 請求響應時間

在左側(cè)的會話列表窗口選擇一個或多個會話，再切換到Timeline選項卡中 便會顯示指定的資源從服務端傳輸?shù)?code>客戶端的響應時間!

如圖

從上圖來看 似乎都屬于正常的網(wǎng)絡延遲范圍之內(nèi)吧!

那么我們現(xiàn)在就利用Fiddler這個軟件來設置一下網(wǎng)絡延遲，讓網(wǎng)絡限速

方法也很簡單從Fiddler的菜單欄上選擇Rules---->Performance--->Simulate Modem Speeds(模擬調(diào)制解調(diào)器速度)就可以了!

如圖

當我們勾選了Simulate Modem Speeds(模擬調(diào)制解調(diào)器速度) 之后你在測試一下請求某個網(wǎng)頁看看響應時間就知道了!

如圖

看到了吧 很明顯某些資源請求的時長增加了!

Fiddler 腳本限速

那么到底Fiddler給我們限制了多少網(wǎng)速呢 ？

其實我們可以通過腳本去查看和設置，在Fiddler菜單欄選擇Rules--->Customize Rules(自定義規(guī)則)

打開Fiddler ScriptEditor編輯器，然后按下Ctrl+ F來搜索關(guān)鍵字Simulate(模擬的意思) 找到if判斷的m_SimulateModem變量

如圖

以上的代碼中寫明了注釋:

Delay sends by 300ms per KB uploaded意思是每上傳1KB延遲發(fā)送 要花費300毫秒

Delay receives by 150ms per KB downloaded意思是延遲每下載1KB接收要花費150毫秒

要知道這里的單位是毫秒 而1秒=1000毫秒 那么知道了這個之后，我們就可以手動的來設置網(wǎng)絡延遲了!

如圖

也就是說我現(xiàn)在發(fā)一個請求上傳也要1.3秒,并且每一個資源的下載時間也要1.5秒

設置之后保存即可! 就可以再去Timeline中查看一下請求會話的響應時間了!

注意: Simulate Modem Speeds(模擬調(diào)制解調(diào)器速度) 依舊要為勾選狀態(tài)!

如圖

是不是比剛才很卡了呢!

小結(jié)

總之 弱網(wǎng)測試的目的就是盡可能保證用戶體驗, 也就是說我們的項目或頁面的數(shù)據(jù)響應時間是否可以被用戶所接受, 常見的一些關(guān)注點包含如下:

1. 熱啟動和冷啟動時間、頁面切換、前后臺切換、首字時間，首屏時間等。
2. 頁面呈現(xiàn)是否完成一致。
3. 超時是否符合定義，異常信息是否顯示正常。
4. 是否有超時重連。
5. 安全角度：是否會發(fā)生dns劫持、登陸ip更換頻繁、單點登陸異常等。
6. 大流量事件風險：是否會在弱網(wǎng)下進行更新apk包、下載文件等大流量動作。
7. 是否會有頁面的crash以及顯示的錯亂、session是否一致、請求堆積處理等
8. 登錄、單局、支付等 不能有導致項目無法正常進行UI顯示、交互問題
9. 不能有損害用戶利益 或者 可被用戶額外獲利的問題
10. 需要有合理的斷線重連機制，避免每次重連都返回到登錄界面等等…

補充擴展

當然這里要多說一句 軟件模擬弱網(wǎng)方式是由一定的弊端的，因為不是非常接近弱網(wǎng)絡環(huán)境，想要更接近弱網(wǎng)環(huán)境，例如大多數(shù)專業(yè)項目的測試2G/3G/4G、高延時、高丟包、響應時間、頁面呈現(xiàn)&超時文案&超時重連、安全及大流量風險、無網(wǎng)多狀態(tài)切換等會更傾向于通過硬件方式來協(xié)助測試，但這種方式又會變得很麻煩，都是通過樹莓派 但是軟件方式的成本低且實施起來容易操作而已!

Fiddler Android 數(shù)據(jù)抓包

Fiddler不僅可以抓web頁面的HTTP/HTTPS的數(shù)據(jù)報文, 也可以抓取我們手機移動端的數(shù)據(jù)報文

這里我主要說明的是本地抓取Android 安卓手機數(shù)據(jù)報文

前提條件

手機必須處于同一個網(wǎng)絡當中, 并且手機網(wǎng)絡代理必須設置為fiddler，當我們的手機經(jīng)過Fiddler這一層服務!

那么接下來具體步驟如下:

1.確保手機和PC在同一網(wǎng)絡環(huán)境下

手機和電腦必須在同一局域網(wǎng)，手機最好也關(guān)閉4G/5G網(wǎng)絡流量, 并且使用wifi，讓手機和fiddler在同一局域網(wǎng)下!

查看本機ip地址

讓android手機的網(wǎng)絡進出口指向局域網(wǎng)中fiddler服務地址, 那么我們這里就必須要知道Fiddler的ip地址和端口號(port)

這里Fiddler的ip地址就是我們當前電腦中的本機ip地址

那么查看我們電腦的 ip地址方法 如下:

win+R 調(diào)出運行然后輸入 cmd打開命令行終端窗口，輸入ipconfig, 找到其中的IPv4地址即為本機ip

如圖

可以對照一下當前所安裝的Fiddler中的ip地址是否一致，你可以直接在fiddler上 將鼠標放置于 Online 工具上就會顯示本機ip地址,如果一樣那么久可以確保一會設置手機和電腦在同一個局域網(wǎng)內(nèi)!

Fiddler設置端口與允許遠程連接

在Fiddler中我們還要設置遠程連接權(quán)限和端口號

找到Fiddler菜單欄中的Tools ----> Options---->Connections

勾選Allow remote computers to connect(允許遠程計算機連接) 然后設置一個端口，也可以默認為8888

如圖

以上所有Fiddler設置之后最好是重啟一下Fiddler，才可以讓配置生效!

2.android手機設置網(wǎng)絡代理

在確定了手機和fiddler在同一局域網(wǎng)下之后, 那么我們來到android手機的設置選項下，找到WLAN

例如:

然后點擊你當前所在的wifi網(wǎng)絡環(huán)境下的名稱

例如

然后選擇代理

如圖

把其中的無改為手動

然后返回到上一步,輸入Fiddler的本地ip和設置Fiddler的端口號

如圖

那么到此android手機的網(wǎng)絡代理設置 就到此為止， 其他不同型號的android手機設置大同小異，以此類推!

3.android手機配置證書

在抓取android手機數(shù)據(jù)包的時候 跟 web端也是一樣，都需要配置證書,否則是無法正常進行抓包的!

之前已經(jīng)在我們的android手機上配置好了Fiddler的代理服務了，那么現(xiàn)在就可以通過ip+port的方式來訪問Fiddler 從而下載對應的證書!

方法如下:

在android手機上打開(自帶)的瀏覽器，輸入剛剛配置的ip+port來下載證書，

例如：192.168.0.109:8888, 如果不出意外的話就會出現(xiàn)如下界面:

我們點擊FiddlerRoot certificate(根證書)下載到android手機上!

如圖

繼續(xù)點擊下載

溫馨提示

這個時候可能有些android手機會出現(xiàn)以下問題,會出現(xiàn) 無法安裝證書 因為無法讀取證書文件的字樣

解決方案

在下載之前，你可以手動修改證書的后綴名，修改為.crt 就可以了!

當我們下載的時候，就可以點擊編輯按鈕，進行文件名的編輯, 最后保存!

如圖

然后再手機的下載管理中 找到剛剛下載好的證書 并且打開它

如圖

最后點擊保存即為 安裝

完成android手機證書的安裝!

那么如果你要查看安裝的證書， 那么可以在手機中 打開設置-->其他設置-->設備與隱私-->信任的證書然后點擊用戶,就可以查看到剛剛所安裝好的Fiddler證書

如圖

其他手機可以在設置中搜索信任進行查找，大同小異!

注意(Notice)??

每連一臺電腦所安裝的fiddler提供的證書都是不一樣的，要記住這個道理 那么測試完一臺電腦之后，如果要在另外一臺電腦上測試，記得在證書管理里刪除之前的fiddler證書，因為這個之前的fiddler證書只對應之前那臺電腦里面所安裝的fiddler，沒法用于連其他的fiddler, 因此換一臺電腦，測試必須重新配置一下手機證書

我們通過上面的android基本配置就全部結(jié)束了，現(xiàn)在可以愉快的android手機抓包測試了??

4.開始android抓包

在正式抓包之前，我們還設置一下Fiddler中的請求過濾

我們通過Fiddler菜單欄中的Tools--->Options-->HTTPS修改..from all processes這一項

把它設置為from remote clients only 只抓遠程客戶端請求, 方便我們查看手機抓包數(shù)據(jù)!

如圖

那么現(xiàn)在打開你的android手機并且運行手機中的一些app就可以被fiddler所截取到數(shù)據(jù)包了:

如圖

注意:

如果還是無法正常抓取數(shù)據(jù)包，并且手機也無法加載數(shù)據(jù)的情況下，那么可能還是跟證書不正確有關(guān)系

解決方案

先刪除所有證書再執(zhí)行下面的操作!

那么我們可能需要安裝一個插件 CertMaker for iOS and Android

插件介紹

iOS devices and Android devices may not work with the default HTTPS interception certificates used by Fiddler. To resolve this incompatibility, you may install a Certificate Generating plugin that generates interception certificates compatible with those platforms.
譯為:
iOS 設備和 Android 設備可能無法使用 Fiddler 使用的默認 HTTPS 攔截證書。要解決此不兼容問題，您可以安裝生成與這些平臺兼容的攔截證書的證書生成插件

插件下載：https://telerik-fiddler.s3.amazonaws.com/fiddler/addons/fiddlercertmaker.exe

下載之后直接點擊安裝就可以了，但是要關(guān)閉Fiddler否則無法安裝, 然后重啟Fiddler，然后在Fiddler中重置一下所有證書，點擊Fiddler菜單選擇Tools-> Options -> HTTPS -> Actions -> Reset All Certificates進行重置證書 ，并且手機也要重新再一次的下載并配置證書!

如果還是不行可以嘗試 關(guān)閉系統(tǒng)防火墻

如圖

Fiddler 蘋果IOS 數(shù)據(jù)抓包

Fiddler既然可以抓取android的數(shù)據(jù)包, 那么就一定可以抓取到ios的數(shù)據(jù)包!

1.確保手機和PC在同一網(wǎng)絡環(huán)境下

其實還有一個簡單的辦法來判斷當前手機和PC是否在同一網(wǎng)絡環(huán)境下!

在你的ios手機上找到連接的wifi，查看一下ip地址

如圖

然后在電腦上打開命令行，輸入ping 手機ip，看看能不能ping通!

如圖

如果有以上返回說明 當前手機和PC 就是在同一網(wǎng)絡環(huán)境下

其他關(guān)于Fiddler的設置步驟跟之前的android操作是一樣的 這里就不再過多贅述了, 還沒有明白的朋友返回到android部分去看看!

2.ios手機設置網(wǎng)絡代理

在確定了ios手機和fiddler在同一局域網(wǎng)下之后, 那么我們來到ios手機的設置選項下，找到WLAN,查看連接的wifi

如圖

進入HTTP代理

設置為手動，然后填寫服務器, 這里就跟android是一樣的, 也是輸入fiddler在電腦本地的ip地址和端口

如圖

最后點擊存儲即可!

3.ios手機下載安裝與配置證書

跟android一樣，我們使用Fiddler來抓取ios手機的HTTPS數(shù)據(jù)包也是需要安裝根證書從而來解碼我們的HTTPS數(shù)據(jù)報文,

下載證書

那么其實下載證書步驟其實也 跟android手機是差不多的!

使用ios手機中自帶的的safari瀏覽器，輸入配置好的ip+端口跳轉(zhuǎn)到 Fiddler Echo Service 證書下載頁!

如圖

點擊FiddlerRoot certificate彈出此網(wǎng)址嘗試下載一個配置描述文件，您要允許嗎？，點擊允許按鈕

下載完成，彈出提示已下載描述文件

安裝證書

根據(jù)提示，回到手機的設置中，找到已下載描述文件，可以看到下載的證書在那里了!

如圖

根據(jù)提示，回到手機的設置-->通用中，找到描述文件，可以看到下載的證書在那里了!

然后開始安裝證書

繼續(xù)點擊安裝

完成證書的安裝!

設置信任證書

安裝好證書之后,還要在ios系統(tǒng)中設置信任剛剛下載好的證書

我們回到ios系統(tǒng)中的設置--->通用--->關(guān)于本機中，對證書進行信任設置，選擇證書信任設置選項

如圖

開啟信任

如圖

點擊繼續(xù)

必須要開啟證書信任,否則會出現(xiàn)無法抓到HTTPS包的情況。

4.開始ios抓包

配置好PC端的Fiddler、手機也安裝了證書、代理也設置之后，我們就可以在手機上操作app捕獲數(shù)據(jù)包了，然后在Fiddler中查看發(fā)送的請求和響應報文了!

如圖

溫馨提示

如果還是抓不到包，需查看一下防火墻是否關(guān)閉，是否沒有允許Fiddler程序通過防火墻，或者檢查一下證書是否出現(xiàn)問題，或者 刪除所有的證書之后 ,重新安裝Fiddler與手機的證書重置后再次嘗試抓包!

Fiddler 插件擴展

Fiddler本身的功能其實也已經(jīng)很強大了，但是Fiddler官方還有很多其他擴展插件功能，可以更好的幫助用戶去測試和管理項目上的任務!

插件地址 https://www.telerik.com/fiddler/add-ons

當我們安裝好插件之后，這些插件的功能都會出現(xiàn)在Fiddler的輔助選項卡中!

安裝插件也很簡單，直接點擊Download下載好之后雙擊就可以安裝了，但是要注意的是安裝插件的時候最好關(guān)閉Fiddler，安裝好插件之后再重啟Fiddler

Fiddler精選插件

Traffic Differ插件

Traffic Differ插件用來對比兩個請求會話 也就是比較對比數(shù)據(jù),拖動請求就可以了

舉個例子: 把一個頁面優(yōu)化前的會話保存一個，在把優(yōu)化后的頁面保存一個，通過對比兩個會話來比較優(yōu)化起多大作用，在Differ選項頁中會有詳細數(shù)據(jù)

下載插件

下載好之后雙擊安裝即可!

然后你重啟Fiddler會發(fā)現(xiàn)輔助選項卡中多出了Differ選項

這個時候我們就直接把抓到的數(shù)據(jù)會話拉入到里面就可以進行對比查看了, 這對前端檢查頁面優(yōu)化很有幫助!

JavaScript Formatter插件

JavaScript Formatter插件是格式化js的工具。

官網(wǎng)找到并下載JavaScript Formatter文件，安裝時會生成JSFormat.dll文件

然后進入到Fiddler中右鍵單擊任何響應結(jié)果是js的會話，

如圖

然后選擇Make JavaScript Pretty就可以進行格式化了!

在左邊響應窗口中的TextView、SyntaxView、Raw中都可以看到格式化效果。

如圖

CertMaker for iOS and Android 插件

之前我們在手機抓包的時候也用過這款插件, iOS 設備和 Android 設備在可能無法使用 Fiddler 使用的默認 HTTPS 攔截證書。要解決此不兼容問題，就要安裝生成與這些平臺兼容的攔截證書的證書生成插件。

安裝好了Fiddler之后重置證書就可以了, 有時候解決證書的問題就可以解決很多抓包的問題!

Syntax-Highlighting Add-Ons插件

此插件包含 Fiddler 的三個最有價值的擴展。

可以使用語法高亮顯示標記：

SyntaxView 為 HTML、JavaScript、CSS、XML 和其他 Web 格式提供語法高亮顯示。

RulesTab2 擴展是一種直接在 Fiddler 中編輯 FiddlerScript 規(guī)則的強大方法。

FiddlerScript 編輯器是一個獨立的文本編輯器，可幫助您編輯 Fiddler 的規(guī)則。它提供語法突出顯示和類資源管理器來幫助您編寫腳本。

但是現(xiàn)在最重要的是這些插件已經(jīng)包含在最新版本的 Fiddler 中，你不再單獨下載。

如圖

哎…但感覺還是沒有我們的intellij idea語法高亮好看。 !??

Gallery 插件

Gallery插件的作用就是選擇圖片會話后，顯示在選定會話中找到的所在圖像的縮略圖,也可以多選!

并且Gallery 還提供帶有可選圖像效果的全屏幻燈片模式。

安裝好之后會在輔助標簽中出現(xiàn)Gallery選項

如圖

Willow插件

Willow插件 可以統(tǒng)計數(shù)據(jù)包、修改Host、請求重定向、編碼轉(zhuǎn)換、低網(wǎng)速模擬：慢速網(wǎng)絡模擬可視化、斷點調(diào)試、過濾HTTP請求等功能。

安裝Willow

運行之后，直接下一步安裝即可， 記得一定要先關(guān)閉Fiddler

Willow插件安裝完成后會自動打開Fiddler

可以看到在輔助標簽工具欄中出現(xiàn)了Willow插件的標簽頁，說明Willow插件安裝成功了

Willow的簡單使用

我們可以把Willow插件當作是AutoResponder工具和Tools —> hosts的功能加強版。

例如Fiddler中我們可以選擇Tools —> hosts功能，來導入windows系統(tǒng)中的hosts文件。

1. 勾選Enable remapping of requests for one host to a different host or IP, overriding DNS.來開啟Fiddler中的hosts功能。
2. 點擊Import Windows Hosts File來導入windows系統(tǒng)中的hosts文件

如圖

之后我們就可以在這里編輯Windows系統(tǒng)中的hosts文件，來定義主機規(guī)則就會很方便了

但是Willow插件對于Windows系統(tǒng)中的hosts文件的管理更加的豐富

比如: 測試環(huán)境，開發(fā)環(huán)境等，采用不同的主機規(guī)則

舉個例子

在Willow插件中，右鍵Add Project 快捷鍵Ctrl+P，然后填寫項目的名稱。

如圖

然后根據(jù)實際的需求，添加我們實際的測試環(huán)境或者項目環(huán)境。

如圖

選中其中一個項目，右鍵Add Host, 填寫 Domain訪問的域名地址 IP實際訪問的地址。

例如：當訪問百度的時候，會訪問到我本地的設置的回環(huán)地址。

那么這個時候當訪問www.baidu.com的時候?qū)崉t訪問 127.0.0.1這個本地ip地址，從而達到屏蔽網(wǎng)站的效果。

自動響應重定向規(guī)則

我們還可以利用Willow給項目添加自動響應規(guī)則, 雖然Fiddler中的AutoResponder也有這個功能，但是Willow更加強大!

舉個例子

當請求百度頁面的時候，將百度logo圖片替換為本地圖片。

我們在Willow中選擇好項目，右鍵Add Rule 添加規(guī)則

填寫Match(原始會話)和Action(替換動作)

如圖

當然一個項目中是可以添加多個規(guī)則的!

效果

通過使用Willow插件，我們就可以用項目的方式去管理規(guī)則, 我們可以在實際的工作用慢慢去學習!??

Privacy scanner 插件

Privacy Scanner 插件可以標記基于 P3P 標頭設置 cookie 和顏色代碼的響應。

下載Privacy scanner插件并安裝之后, Fiddler將獲得一個名為Privacy的新頂級菜單

然后開啟菜單下的選項

如圖

然后請求會通過不同顏色進行標示!

1. 綠色表示發(fā)送了令人滿意的P3P政策。
2. 黃色表示沒有設置P3P策略的cookie。
3. 橙色表示會話發(fā)送P3P策略，該策略不允許在第三方上下文中使用cookie。
4. 紅色表示發(fā)送了無效的P3P策略。

總結(jié)

通過對Fiddler的學習，也許你也會對HTTP有更加深入的感悟和理解,至于Fiddler軟件本身的使用，就要從今后的項目當中去吸取實戰(zhàn)的經(jīng)驗,以及不斷的總結(jié), 才能對Fiddler這款軟件的使用更加得心應手!

文章來源地址http://www.zghlxwxcb.cn/news/detail-408889.html

到了這里，關(guān)于全網(wǎng)最強HTTP+Fiddler抓包實戰(zhàn)教程 干得不能再干 (超級全面圖文)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！