使用Fiddler提高前端工作效率 (介紹篇)
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
- 安裝.net framework 2.0以上版本
- 從官方網(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
- 目前還沒(méi)評(píng)論,等你發(fā)揮!