使用Fiddler提高前端工作效率 (介紹篇)

0 評(píng)論 3165 瀏覽 0 收藏 7 分鐘

1. Fiddler 是什么?

Fiddler是用C#編寫的一個(gè)免費(fèi)的HTTP/HTTPS網(wǎng)絡(luò)調(diào)試器。英語(yǔ)中Fiddler是小提琴的意思,F(xiàn)iddler-Web-Debugger就像小提琴一樣,可以讓前端開(kāi)發(fā)變得更加優(yōu)雅。

Fiddler是以代理服務(wù)器的方式,監(jiān)聽(tīng)系統(tǒng)的網(wǎng)絡(luò)數(shù)據(jù)流動(dòng)。運(yùn)行Fiddler后,就會(huì)在本地打開(kāi)8888端口,網(wǎng)絡(luò)數(shù)據(jù)流通過(guò)Fiddler進(jìn)行中轉(zhuǎn)時(shí),我們可以監(jiān)視HTTP/HTTPS數(shù)據(jù)流的記錄,并加以分析,甚至還可以修改發(fā)送和接收的數(shù)據(jù)。Fiddler還提供了清除IE緩存、請(qǐng)求構(gòu)造器、文本轉(zhuǎn)換工具等等一系列工具,對(duì)前端開(kāi)發(fā)工作很有價(jià)值。

2. 下載和安裝Fiddler

  1. 安裝.net framework 2.0以上版本
  2. 從官方網(wǎng)站免費(fèi)下載Fiddler。

Firefox中用Fiddler,可以下載一個(gè)插件:Fiddler開(kāi)關(guān)

3. Fiddler的界面和功能

列表

左側(cè)是數(shù)據(jù)列表,以不同的圖標(biāo)區(qū)分?jǐn)?shù)據(jù)類型和狀態(tài),以下是圖標(biāo)對(duì)應(yīng)的含義:

正在將請(qǐng)求數(shù)據(jù)發(fā)往服務(wù)器
正在從服務(wù)器下載返回?cái)?shù)據(jù)
請(qǐng)求過(guò)程中暫停
返回過(guò)程中暫停
請(qǐng)求中使用了HTTP HEAD方法; 返回中應(yīng)該沒(méi)有body內(nèi)容
請(qǐng)求中使用了HTTP CONNECT方法,建立HTTPS連接通道
返回的內(nèi)容類型是HTML
返回的內(nèi)容類型是圖片
返回的內(nèi)容類型是Javascript
返回的內(nèi)容類型是CSS
返回的內(nèi)容類型是XML
普通的成功的返回
返回內(nèi)容為 HTTP/300,301,302,303 or 307 跳轉(zhuǎn)
返回內(nèi)容為HTTP/304: 使用本地緩存
返回內(nèi)容為一個(gè)證書請(qǐng)求
返回內(nèi)容是服務(wù)器錯(cuò)誤
請(qǐng)求被客戶端、Fiddler或服務(wù)器中斷

查看器


利用查看器提供的很多形式,我們可以查看數(shù)據(jù)流的內(nèi)容。

請(qǐng)求構(gòu)建器(Request Builder)


可以創(chuàng)建任意數(shù)據(jù)的請(qǐng)求

過(guò)濾器


過(guò)濾器可以對(duì)左側(cè)的數(shù)據(jù)流列表進(jìn)行過(guò)濾,我們可以標(biāo)記、修改或隱藏某些特征的數(shù)據(jù)流。

AutoResponse功能


這個(gè)功能可以算的上是Fiddler最實(shí)用的功能,可以讓我們修改服務(wù)器端返回的數(shù)據(jù),例如讓返回都是HTTP404或者讀取本地文件作為返回內(nèi)容。我們將在實(shí)例中介紹利用AutoResponse功能。

文本編碼和解碼


提供了常用的一些文本編解碼的轉(zhuǎn)換。

此外,還可以對(duì)兩個(gè)數(shù)據(jù)流進(jìn)行比較


Fiddler可以保存和打開(kāi)“SAZ”格式的文件,這樣就可以將監(jiān)聽(tīng)到的數(shù)據(jù)流保存下來(lái),下次再重新打開(kāi)分析。可以利用FiddlerCap——一個(gè)專門用來(lái)錄制保存SAZ的小工具——保存SAZ文件。SAZ文件可以設(shè)置密碼保護(hù),比較貼心。
來(lái)源:http://www.aliued.cn/?p=2567

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!