免費的HTML5連載來了《HTML5網頁開發執行個體詳解》連載（五）圖解通過Fiddler加速開發，html5

免費的HTML5連載來了《HTML5網頁開發執行個體詳解》連載（五）圖解通過Fiddler加速開發，html5

    Fiddler是Windows底下最強大的請求代理調試工具，監控任何瀏覽器的HTTP/HTTPS流量，竄改用戶端請求和伺服器響應，解密HTTPS Web會話，圖4.44為Fiddler原理。

圖4.44  Fiddler原理

Fiddler安裝的系統要求為Windows XP或Windows 8中的版本，其中Fiddler2依賴於Microsoft.NET Framework 2.0，最新的Fiddler4依賴於Microsoft.NET Framework 4.0。

Fiddler功能很多，在這裡介紹一項最常用的代理功能。假使在維護的網站線上有個功能出現指令碼問題，這時候採用傳統的方法，將網頁內容完整的儲存到本地，然後調試對應的代碼，很顯然這種方法顯得特點笨重，Fiddler解決這個問題顯得遊刃有餘。要做的是，將對應問題指令碼儲存到機器本地，修改指令碼並通過Fiddler代理，下面通過一個百度首頁的操作樣本示範該過程。

（1）開啟Fiddler，選中其右側“AutoResponder”標籤頁，勾選“Enable automatic responses”和“Unmatched requests passthrough”複選框，4.45所示。

圖4.45  開啟Fiddler

（2）開啟Chrome瀏覽器，在地址欄內輸入“http://www.baidu.com”並按Enter鍵進入，此時百度首頁的請求會被完整的顯示在Fiddler左側的列表中，4.46所示。

圖4.46  百度首頁請求列表

（3）選中列表中的第5條請求（該請求為JavaScript指令碼），在該請求上方單擊並拖動至右側“AutoResponder”標籤頁下方空白的列表中，4.47所示。

圖4.47  代理一條指令碼請求

（4）複製第5條請求的URL地址，使用瀏覽器開啟並將指令碼內容儲存到機器本地檔案夾

（5）在剛才儲存的指令碼末尾添加1行代碼：

document.body.style.backgroundColor='black'                                                                  // 修改頁面背景色為黑色

（6）修改Fiddler右側“AutoResponder”標籤頁下方列表的“then respond width..”列，將其指向本地儲存的指令碼代碼地址，4.48所示。

圖4.48  修改請求的本地Proxy 位址

（7）開啟Chrome瀏覽器，在地址欄內輸入“http://www.baidu.com”並按Enter鍵進入，此時百度首頁變為黑色，Fiddler代理成功。

提示：樣本中完成的功能只是一種簡單的類比，讀者在實際開發中可以通過Fiddler代理，修改本地指令碼的具體代碼，再結合Chrome瀏覽器的調試功能，解決網站的線上問題將變得簡單且高效。

學習HTML5最好的書就是《HTML5網頁開發執行個體詳解》，用代碼學慣用案例學習，可比看文字有趣多了！！！一本書搞定HTML5，從現在開始。