不用不可之 Fiddler Debugging Proxy!

Fiddler Debugging Proxy

蔣定宇 / josephj / 啊嗚

不用不可的 Fiddler Debugging Proxy

http://tinyurl.com/josephj-fiddler

開始使用 Fiddler 的機緣起因是為了 miiiCasa Bar 的實作



miiiCasa Bar 必須在每個網頁上出現，也就是必須針對所有 HTTP 協定、Port 80 的封包做竄改，以便在網頁原始碼中塞入所需之 HTML 與 JavaScript。

開始使用 Fiddler 的機緣


當時的方法是使用改好 Firmware 的分享器，即可做到。但問題是我必須經常修改植入的程式、這點非要其他部門的配合... 加上必須有此 Router 的前提。開發門檻實在過高。




所以我就一直在思考要怎樣不用裝任何設備、即可模擬出相同的環境、方便我的開發。(iptable?)

從 Charles 到 Fiddler

從 Charles 到 Fiddler

一開始解決問題其實是靠 Charles Web Debugging Proxy、但後來經過同事的推薦，開始使用更強大的 Fiddler。

Fiddler 是什麼？

http://python-cn.googlegroups.com/attach/663845705cd74c28/Fiddler.png?view=1&part=4








Fiddler 在你電腦上，相當於建立了虛擬的 Proxy Server、一但執行，所有的網路封包都會經由此 Proxy 進出。





Fiddler 在你電腦上，相當於建立了虛擬的 Proxy Server、一但執行，所有的網路封包都會經由此 Proxy 進出。Fiddler 提供了流量的監控、分析、與個別 Session 的竄改，非常強大！




Fiddler 的主要功能


• Inspector - 觀看 Session 內容


• Inspector - 觀看 Session 內容• Timeline - 網路活動


• Inspector - 觀看 Session 內容• Timeline - 網路活動• HOST - hosts 設定檔的加強版


• Inspector - 觀看 Session 內容• Timeline - 網路活動• HOST - hosts 設定檔的加強版• AutoResponder - 竄改特定 Response



• FiddlerScript - 自訂新功能！



• FiddlerScript - 自訂新功能！• Filter - 更有效率過濾 Session



• FiddlerScript - 自訂新功能！• Filter - 更有效率過濾 Session

• QuickExec - 命令列工具

Fiddler 的主要功能Inspector - 觀看 Session 內容


xuite 首頁的 HTML


xuite 首頁的 HTML

Request 部分

Response 部分

Fiddler 的主要功能Timeline - 比較不同 Sessions 所佔用的時間

Fiddler 的主要功能Timeline - 比較不同 Sessions 所佔用的時間

xuite 首頁 Components

Fiddler 的主要功能HOST - 更好的 hosts 設定、可以有 port

Fiddler 的主要功能HOST - 更好的 hosts 設定、可以有 port

解決了我們個人開發環境對應 ports 的問題 =b

Fiddler 的主要功能AutoResponder - 客製 Response


1. 右鍵 Unlock for Editing


2. 修改已經抓回來的 JavaScript 內容

1. 右鍵 Unlock for Editing


2. 修改已經抓回來的 JavaScript 內容

1. 右鍵 Unlock for Editing3. 將 Session 拉到 AutoResponder 中



未來每次 Reload 就會以你修改的程式來呈現這非常方便讓我們在 Production 做偵錯（搭配 JavaScript Formatter)


例子2. 將百度線上的 CSS 指定到桌面上的 baidu.css

AutoResponder - 客製 Response


例子2. 將百度線上的 CSS 指定到桌面上的 baidu.css

AutoResponder - 客製 Response

Fiddler 的主要功能FiddlerScript - 讓你自訂介面與功能！


這一塊的功能都是我自訂的



後來我們不再使用 HOST 功能做環境切換改用 FiddlerScript 做出來的選單，更好用！



後來我們不再使用 HOST 功能做環境切換改用 FiddlerScript 做出來的選單，更好用！

只要會寫 JavaScript 即可！

Fiddler 的主要功能Filter - 簡易又強大的 Sessions 過濾機制


1. 有 Hide All, Non-browsersAll Processes, Web Browser 可切換


2-1. 使用 Process Filter : 當有多個 Tab



拖拉上方的 Process 按鈕到你想觀看的 IE Tab 內容中這裡選的是 iexplore:6708

2-1. 使用 Process Filter : 當有多個 Tab




2-2. 使用 Process Filter : 切到非 iexplore:6408 的頁籤、Reload 它！


注意到了嗎？第 2 個 Tab 的內容不會列出來！

2-2. 使用 Process Filter : 切到非 iexplore:6408 的頁籤、Reload 它！

Fiddler 的主要功能QuickExec - 硬漢用的文字命令列

http://www.fiddler2.com/Fiddler/help/quickexec.asp








先輸入了 bold xuite.net將有 xuite.net 字樣的 session 變粗







再輸入了 select image將圖檔類型的 Session 選取起來






再輸入了 select image將圖檔類型的 Session 選取起來比一個個用滑鼠點選來得快多了！



Fiddler 的必備 Plugins


• JavaScript Formatter



• JSON Viewer



• JSON Viewer

• Gallery



• JSON Viewer

• Gallery

http://www.fiddler2.com/fiddler2/extensions.asp官方推薦：

http://www.fiddler2.com/fiddler2/extensions.asp

http://www.fiddler2.com/fiddler2/extensions.asp

Fiddler 的必備 PluginsJavaScript Formatter - 整理壓縮過後的程式碼


xuite 首頁最小化過後的 JavaScript





本來只有一行的 JavaScript 被整裡的很漂亮

Fiddler 的必備 PluginsJSON Viewer - 用樹狀圖觀看 Response資料

Fiddler 的必備 PluginsJSON Viewer - 用樹狀圖觀看 Response資料

Fiddler 的必備 PluginsGallery - 直接看 Session 中的圖片

Fiddler 的必備 PluginsGallery - 直接看 Session 中的圖片

有圖有真相、顯示目前選取的圖檔

Fiddler 在 miiiCasa 的應用

Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar


2. 不同環境的切換


2. 不同環境的切換3. 插入 Firebug Lite 或 YUI Console 等好用工具



4. 列出已翻譯、未翻譯的字串



4. 列出已翻譯、未翻譯的字串5. 檢視模組資訊



4. 列出已翻譯、未翻譯的字串5. 檢視模組資訊6. JavaScript/CSS 壓縮與否的切換



4. 列出已翻譯、未翻譯的字串5. 檢視模組資訊6. JavaScript/CSS 壓縮與否的切換

原始碼在此、歡迎大家修改：http://gist.github.com/93512

http://gist.github.com/93512

http://gist.github.com/93512

Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 快速選單 UI

Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 快速選單 UI

1. 塞入 a.mimgs.com 的 Bar2. 塞入 a.staging.mimgs.com 的 Bar3. 塞入 img1.corp.miiicasa.com 的 Bar4. 不塞 Bar

Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 所須撰寫的 FiddlerScript


製作選單，變數會存在 INJECTION_HOST


製作選單，變數會存在 INJECTION_HOST

依據 INJECTION_HOST 的不同，會塞入不同環境的 miiiCasa Bar

Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 實際顯示


1. 選取顯示哪種環境的 miiiCasa Bar


2. 重新整理後，就會看到 miiiCasa Bar 出現在網頁左下方（此為點選後的狀況）



2. 重新整理後，就會看到 miiiCasa Bar 出現在網頁左下方（此為點選後的狀況）

3. 此時檢視原始碼就會看到我們剛塞入的內容


Fiddler 在 miiiCasa 的應用2. 快速切換團隊中不同工程師的開發環境

每個工程師都有自己的環境以 Port 做區隔，像我是 5002*


每個工程師都有自己的環境以 Port 做區隔，像我是 5002*


Fiddler 若是有個選單可隨時切換就太方便了！

Fiddler 若是有個選單可隨時切換就太方便了！

實際上是被 Fiddler 自動對應到 devm1.corp.miiicasa.com:50020

Fiddler 在 miiiCasa 的應用3. 插入 Firebug Lite 或 YUI Console


Firebug Lite在像 IE6 的瀏覽器就特別有幫助


Fiddler 在 miiiCasa 的應用4. 列出翻譯字串


還沒翻譯跟翻譯完成的會帶不同的 CSS Class Name


還沒翻譯跟翻譯完成的會帶不同的 CSS Class Name紅色表示還沒翻譯、綠色表示翻譯完成


還沒翻譯跟翻譯完成的會帶不同的 CSS Class Name紅色表示還沒翻譯、綠色表示翻譯完成點兩下可叫出翻譯工具


沒什麼了不起，就是加了 2 個樣式與 1 個事件


Fiddler 在 miiiCasa 的應用5. 檢視模組資訊


列出有 id 屬性的 <div/>區塊，點兩下會出現 alert 視窗


列出有 id 屬性的 <div/>區塊，點兩下會出現 alert 視窗

在開發環境打入此指令就會自動把相關檔案開好

Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換


miiiCasa 在開發環境的 JS/CSS 預設都是動態合併多個小檔案並最小化過的。



http://a.mimgs.com/mini?module=space&type=js

http://a.mimgs.com/mini?module=space&type=css




http://a.mimgs.com/mini?module=space&type=js

但是最小化會造成 Debugging 很困難




其實只要多一個 &nominify 的參數即可避免最小化

http://a.mimgs.com/fuse?module=space&type=js&nominify

但是每次都要去改程式實在很麻煩！




Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換有 Fiddler 真好！點選一下不用改 Code 就可以看到沒最小化的


http://a.mimgs.com/fuse?module=space&type=js




http://a.mimgs.com/fuse?module=space&type=js

FiddlerScript 也超簡單！



回想起來，能夠有效率基於 Fiddler 建置一些好用的工具，得歸功於有制定 Guidelines 且要求實行，全部開發人員都需要基於標準框架來做事，不然也沒基準點去做出這些好用的功能。

回想起來，能夠有效率基於 Fiddler 建置一些好用的工具，得歸功於有制定 Guidelines 且要求實行，全部開發人員都需要基於標準框架來做事，不然也沒基準點去做出這些好用的功能。

標準很重要！

Any Questions?

http://www.flickr.com/photos/phploveme/2847931240/

Thank Youso muchiii

[email protected]

Your

Fiddler Hacking Time!



mailto:[email protected]

mailto:[email protected]

Technology

不用不可之 Fiddler Debugging Proxy!