簡介：

Fiddler是用C#編寫的一個免費的HTTP/HTTPS網絡調試器。Fiddler是以代理服務器的方式，監聽系統的網絡數據流動英語中Fiddler是小提琴的意思，Fiddler Web Debugger就像小提琴一樣，可以讓前端開發變得更加優雅。

它可以做什么？

Fiddler是以代理服務器的方式，監聽系統的網絡數據流動，并在ie， 火狐下都可以安裝哦（這個是最好的特點 呵呵）

它能 夠記錄所有的你電腦和互聯網之間的http通訊，Fiddler 可以也可以讓你檢查所有的http通訊，設置斷點，以及Fiddle 所有的“進出”的數據（指cookie,html,js,css等文件，這些都可以讓你胡亂修改的意思）

Fiddler還提供了清除IE緩存、請求構造器、文本轉換工具等等一系列工具，對前端開發工作很有價值。

下載和安裝

從官方網站免費下載Fiddler。（英文版）

下載漢化版本（本人推薦，哥哥英文不好，重點推薦漢化版）點擊下載漢化版：

工作原理：

默認情況下：Fiddler監控客戶端瀏覽器所有http數據流，如果你設置了IE瀏覽器，那么IE瀏覽器所有的http請求都會被Fiddler監控。

工作原理如下圖：

解釋：

作為系統代理，所有的來自微軟互聯網服務（WinInet）的http請求再到達目標Web服務器的之前都會經過Fiddle，同樣的，所有的Http響應都會在返回客戶端之前流經Fiddler。當你關閉Fidder的時候，它就會自動從系統注冊表中移出，減少資源浪費。當你關閉Fiddler的時候，它就會自動從系統注冊表中移出，減少系統資源浪費（這個功能很好啊 贊一個）

firefox下配置Fiddler

作為開發web開發人員常使用的瀏覽器肯定非firefox 莫屬了，下面是在火狐下配置fiddler。

fiddler 在安裝和第一次運行之后會的我的文檔中生成配置文件,其中在scripts目錄下有BrowserPAC.js

2. 配置火狐

打開firefox 在選項/高級/網絡/自動代理配置/填上：file:///C:/Users/caiyou/Documents/Fiddler2/Scripts/BrowserPAC.js

?

***********************************安裝ok了，下面就要測試一下了

fiddler界面

界面列表

初次認識一下軟件界面：

內容我就不說了，因為是漢化版，只要小學畢業，基本上都認識，所以說還是漢化好。

左側是數據列表，以不同的圖標區分數據類型和狀態，以下是圖標對應的含義：

------------------------------------------------------------------------------

?
正在將請求數據發往服務器

?
正在從服務器下載返回數據

?
請求過程中暫停

?
返回過程中暫停

?
請求中使用了HTTP HEAD方法; 返回中應該沒有body內容

?
請求中使用了HTTP CONNECT方法，建立HTTPS連接通道

?
返回的內容類型是HTML

?
返回的內容類型是圖片

?
返回的內容類型是Javascript

?
返回的內容類型是CSS

?
返回的內容類型是XML

?
普通的成功的返回

?
返回內容為 HTTP/300,301,302,303 or 307 跳轉

?
返回內容為HTTP/304: 使用本地緩存

?
返回內容為一個證書請求

?
返回內容是服務器錯誤

?
請求被客戶端、Fiddler或服務器中斷

------------------------------------------------------------------------------------------

統計功能

選中左側http請求，右側會相應的統計出累積信息

還有一些其他功能，漢化版沒有語言障礙，大家可以一個個嘗試。

?

HTTP性能概述

fiddle畢竟只是測試工具，如果要想進行web前端優化，肯定要知道一下專業術語和優化策略，

下面推薦在下的幾篇網頁優化的文章：

高性能建站之前端優化篇

網站優化--讓你的網頁飛起來

讓網站飛起來01---瀏覽器緩存技術

Technorati 標簽:?fiddler 教程 firefox 火狐 web前端 http工具

如果你喜歡本博客可以選擇分享，或者支付寶微支付：

本文基于署名-非商業性使用 3.0許可協議發布，歡迎轉載，演繹，但是必須保留本文的署名：PHP淮北(蔡友)：http://www.cnblogs.com/phphuaibei，也可以郵件與我聯系。

轉載于:https://www.cnblogs.com/y0umer/archive/2011/11/07/2809486.html

總結

以上是生活随笔為你收集整理的[置顶] 高效前端优化工具--Fiddler入门教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。