Fiddler Debugging Proxy
蔣定宇 / josephj / 啊嗚
不用不可的 Fiddler Debugging Proxy
http://tinyurl.com/josephj-fiddler
開始使用 Fiddler 的機緣起因是為了 miiiCasa Bar 的實作
開始使用 Fiddler 的機緣起因是為了 miiiCasa Bar 的實作
開始使用 Fiddler 的機緣起因是為了 miiiCasa Bar 的實作
miiiCasa Bar 必須在每個網頁上出現,也就是必須針對所有 HTTP 協定、Port 80 的封包做竄改,以便在網頁原始碼中塞入所需之 HTML 與 JavaScript。
開始使用 Fiddler 的機緣
開始使用 Fiddler 的機緣
當時的方法是使用改好 Firmware 的分享器,即可做到。但問題是我必須經常修改植入的程式、這點非要其他部門的配合... 加上必須有此 Router 的前提。開發門檻實在過高。
開始使用 Fiddler 的機緣
開始使用 Fiddler 的機緣
開始使用 Fiddler 的機緣
所以我就一直在思考要怎樣不用裝任何設備、即可模擬出相同的環境、方便我的開發。(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 是什麼?
http://python-cn.googlegroups.com/attach/663845705cd74c28/Fiddler.png?view=1&part=4
Fiddler 是什麼?
Fiddler 在你電腦上,相當於建立了虛擬的 Proxy Server、一但執行,所有的網路封包都會經由此 Proxy 進出。
http://python-cn.googlegroups.com/attach/663845705cd74c28/Fiddler.png?view=1&part=4
Fiddler 是什麼?
Fiddler 在你電腦上,相當於建立了虛擬的 Proxy Server、一但執行,所有的網路封包都會經由此 Proxy 進出。Fiddler 提供了流量的監控、分析、與個別 Session 的竄改,非常強大!
http://python-cn.googlegroups.com/attach/663845705cd74c28/Fiddler.png?view=1&part=4
Fiddler 的主要功能
Fiddler 的主要功能
• Inspector - 觀看 Session 內容
Fiddler 的主要功能
• Inspector - 觀看 Session 內容• Timeline - 網路活動
Fiddler 的主要功能
• Inspector - 觀看 Session 內容• Timeline - 網路活動• HOST - hosts 設定檔的加強版
Fiddler 的主要功能
• Inspector - 觀看 Session 內容• Timeline - 網路活動• HOST - hosts 設定檔的加強版• AutoResponder - 竄改特定 Response
Fiddler 的主要功能
• Inspector - 觀看 Session 內容• Timeline - 網路活動• HOST - hosts 設定檔的加強版• AutoResponder - 竄改特定 Response
• FiddlerScript - 自訂新功能!
Fiddler 的主要功能
• Inspector - 觀看 Session 內容• Timeline - 網路活動• HOST - hosts 設定檔的加強版• AutoResponder - 竄改特定 Response
• FiddlerScript - 自訂新功能!• Filter - 更有效率過濾 Session
Fiddler 的主要功能
• Inspector - 觀看 Session 內容• Timeline - 網路活動• HOST - hosts 設定檔的加強版• AutoResponder - 竄改特定 Response
• FiddlerScript - 自訂新功能!• Filter - 更有效率過濾 Session
• QuickExec - 命令列工具
Fiddler 的主要功能Inspector - 觀看 Session 內容
Fiddler 的主要功能Inspector - 觀看 Session 內容
xuite 首頁的 HTML
Fiddler 的主要功能Inspector - 觀看 Session 內容
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
Fiddler 的主要功能AutoResponder - 客製 Response
1. 右鍵 Unlock for Editing
Fiddler 的主要功能AutoResponder - 客製 Response
2. 修改已經抓回來的 JavaScript 內容
1. 右鍵 Unlock for Editing
Fiddler 的主要功能AutoResponder - 客製 Response
2. 修改已經抓回來的 JavaScript 內容
1. 右鍵 Unlock for Editing3. 將 Session 拉到 AutoResponder 中
Fiddler 的主要功能AutoResponder - 客製 Response
Fiddler 的主要功能AutoResponder - 客製 Response
未來每次 Reload 就會以你修改的程式來呈現這非常方便讓我們在 Production 做偵錯(搭配 JavaScript Formatter)
Fiddler 的主要功能
例子2. 將百度線上的 CSS 指定到桌面上的 baidu.css
AutoResponder - 客製 Response
Fiddler 的主要功能
例子2. 將百度線上的 CSS 指定到桌面上的 baidu.css
AutoResponder - 客製 Response
Fiddler 的主要功能FiddlerScript - 讓你自訂介面與功能!
Fiddler 的主要功能FiddlerScript - 讓你自訂介面與功能!
這一塊的功能都是我自訂的
Fiddler 的主要功能FiddlerScript - 讓你自訂介面與功能!
這一塊的功能都是我自訂的
後來我們不再使用 HOST 功能做環境切換改用 FiddlerScript 做出來的選單,更好用!
Fiddler 的主要功能FiddlerScript - 讓你自訂介面與功能!
這一塊的功能都是我自訂的
後來我們不再使用 HOST 功能做環境切換改用 FiddlerScript 做出來的選單,更好用!
只要會寫 JavaScript 即可!
Fiddler 的主要功能Filter - 簡易又強大的 Sessions 過濾機制
Fiddler 的主要功能Filter - 簡易又強大的 Sessions 過濾機制
1. 有 Hide All, Non-browsersAll Processes, Web Browser 可切換
Fiddler 的主要功能Filter - 簡易又強大的 Sessions 過濾機制
2-1. 使用 Process Filter : 當有多個 Tab
1. 有 Hide All, Non-browsersAll Processes, Web Browser 可切換
Fiddler 的主要功能Filter - 簡易又強大的 Sessions 過濾機制
拖拉上方的 Process 按鈕到你想觀看的 IE Tab 內容中這裡選的是 iexplore:6708
2-1. 使用 Process Filter : 當有多個 Tab
1. 有 Hide All, Non-browsersAll Processes, Web Browser 可切換
Fiddler 的主要功能Filter - 簡易又強大的 Sessions 過濾機制
Fiddler 的主要功能Filter - 簡易又強大的 Sessions 過濾機制
2-2. 使用 Process Filter : 切到非 iexplore:6408 的頁籤、Reload 它!
Fiddler 的主要功能Filter - 簡易又強大的 Sessions 過濾機制
注意到了嗎?第 2 個 Tab 的內容不會列出來!
2-2. 使用 Process Filter : 切到非 iexplore:6408 的頁籤、Reload 它!
Fiddler 的主要功能QuickExec - 硬漢用的文字命令列
http://www.fiddler2.com/Fiddler/help/quickexec.asp
Fiddler 的主要功能QuickExec - 硬漢用的文字命令列
http://www.fiddler2.com/Fiddler/help/quickexec.asp
Fiddler 的主要功能QuickExec - 硬漢用的文字命令列
先輸入了 bold xuite.net將有 xuite.net 字樣的 session 變粗
http://www.fiddler2.com/Fiddler/help/quickexec.asp
Fiddler 的主要功能QuickExec - 硬漢用的文字命令列
先輸入了 bold xuite.net將有 xuite.net 字樣的 session 變粗
http://www.fiddler2.com/Fiddler/help/quickexec.asp
再輸入了 select image將圖檔類型的 Session 選取起來
Fiddler 的主要功能QuickExec - 硬漢用的文字命令列
先輸入了 bold xuite.net將有 xuite.net 字樣的 session 變粗
http://www.fiddler2.com/Fiddler/help/quickexec.asp
再輸入了 select image將圖檔類型的 Session 選取起來比一個個用滑鼠點選來得快多了!
Fiddler 的必備 Plugins
Fiddler 的必備 Plugins
• JavaScript Formatter
Fiddler 的必備 Plugins
• JavaScript Formatter
• JSON Viewer
Fiddler 的必備 Plugins
• JavaScript Formatter
• JSON Viewer
• Gallery
Fiddler 的必備 Plugins
• JavaScript Formatter
• JSON Viewer
• Gallery
http://www.fiddler2.com/fiddler2/extensions.asp官方推薦:
Fiddler 的必備 PluginsJavaScript Formatter - 整理壓縮過後的程式碼
Fiddler 的必備 PluginsJavaScript Formatter - 整理壓縮過後的程式碼
xuite 首頁最小化過後的 JavaScript
Fiddler 的必備 PluginsJavaScript Formatter - 整理壓縮過後的程式碼
xuite 首頁最小化過後的 JavaScript
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
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar
2. 不同環境的切換
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar
2. 不同環境的切換3. 插入 Firebug Lite 或 YUI Console 等好用工具
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar
2. 不同環境的切換3. 插入 Firebug Lite 或 YUI Console 等好用工具
4. 列出已翻譯、未翻譯的字串
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar
2. 不同環境的切換3. 插入 Firebug Lite 或 YUI Console 等好用工具
4. 列出已翻譯、未翻譯的字串5. 檢視模組資訊
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar
2. 不同環境的切換3. 插入 Firebug Lite 或 YUI Console 等好用工具
4. 列出已翻譯、未翻譯的字串5. 檢視模組資訊6. JavaScript/CSS 壓縮與否的切換
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar
2. 不同環境的切換3. 插入 Firebug Lite 或 YUI Console 等好用工具
4. 列出已翻譯、未翻譯的字串5. 檢視模組資訊6. JavaScript/CSS 壓縮與否的切換
原始碼在此、歡迎大家修改: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
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 所須撰寫的 FiddlerScript
製作選單,變數會存在 INJECTION_HOST
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 所須撰寫的 FiddlerScript
製作選單,變數會存在 INJECTION_HOST
依據 INJECTION_HOST 的不同,會塞入不同環境的 miiiCasa Bar
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 實際顯示
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 實際顯示
1. 選取顯示哪種環境的 miiiCasa Bar
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 實際顯示
2. 重新整理後,就會看到 miiiCasa Bar 出現在網頁左下方(此為點選後的狀況)
1. 選取顯示哪種環境的 miiiCasa Bar
Fiddler 在 miiiCasa 的應用1. 塞入 miiiCasa Bar - 實際顯示
2. 重新整理後,就會看到 miiiCasa Bar 出現在網頁左下方(此為點選後的狀況)
3. 此時檢視原始碼就會看到我們剛塞入的內容
1. 選取顯示哪種環境的 miiiCasa Bar
Fiddler 在 miiiCasa 的應用2. 快速切換團隊中不同工程師的開發環境
每個工程師都有自己的環境以 Port 做區隔,像我是 5002*
Fiddler 在 miiiCasa 的應用2. 快速切換團隊中不同工程師的開發環境
每個工程師都有自己的環境以 Port 做區隔,像我是 5002*
Fiddler 在 miiiCasa 的應用2. 快速切換團隊中不同工程師的開發環境
Fiddler 若是有個選單可隨時切換就太方便了!
Fiddler 若是有個選單可隨時切換就太方便了!
實際上是被 Fiddler 自動對應到 devm1.corp.miiicasa.com:50020
Fiddler 在 miiiCasa 的應用3. 插入 Firebug Lite 或 YUI Console
Fiddler 在 miiiCasa 的應用3. 插入 Firebug Lite 或 YUI Console
Firebug Lite在像 IE6 的瀏覽器就特別有幫助
Fiddler 在 miiiCasa 的應用3. 插入 Firebug Lite 或 YUI Console
Fiddler 在 miiiCasa 的應用4. 列出翻譯字串
Fiddler 在 miiiCasa 的應用4. 列出翻譯字串
還沒翻譯跟翻譯完成的會帶不同的 CSS Class Name
Fiddler 在 miiiCasa 的應用4. 列出翻譯字串
還沒翻譯跟翻譯完成的會帶不同的 CSS Class Name紅色表示還沒翻譯、綠色表示翻譯完成
Fiddler 在 miiiCasa 的應用4. 列出翻譯字串
還沒翻譯跟翻譯完成的會帶不同的 CSS Class Name紅色表示還沒翻譯、綠色表示翻譯完成點兩下可叫出翻譯工具
Fiddler 在 miiiCasa 的應用4. 列出翻譯字串
沒什麼了不起,就是加了 2 個樣式與 1 個事件
Fiddler 在 miiiCasa 的應用4. 列出翻譯字串
Fiddler 在 miiiCasa 的應用5. 檢視模組資訊
Fiddler 在 miiiCasa 的應用5. 檢視模組資訊
列出有 id 屬性的 <div/>區塊,點兩下會出現 alert 視窗
Fiddler 在 miiiCasa 的應用5. 檢視模組資訊
列出有 id 屬性的 <div/>區塊,點兩下會出現 alert 視窗
在開發環境打入此指令就會自動把相關檔案開好
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換
miiiCasa 在開發環境的 JS/CSS 預設都是動態合併多個小檔案並最小化過的。
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換
miiiCasa 在開發環境的 JS/CSS 預設都是動態合併多個小檔案並最小化過的。
http://a.mimgs.com/mini?module=space&type=js
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換
miiiCasa 在開發環境的 JS/CSS 預設都是動態合併多個小檔案並最小化過的。
http://a.mimgs.com/mini?module=space&type=js
但是最小化會造成 Debugging 很困難
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換
其實只要多一個 &nominify 的參數即可避免最小化
http://a.mimgs.com/fuse?module=space&type=js&nominify
但是每次都要去改程式實在很麻煩!
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換有 Fiddler 真好!點選一下不用改 Code 就可以看到沒最小化的
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換有 Fiddler 真好!點選一下不用改 Code 就可以看到沒最小化的
http://a.mimgs.com/fuse?module=space&type=js
Fiddler 在 miiiCasa 的應用5. JavaScript/CSS 壓縮與否的切換有 Fiddler 真好!點選一下不用改 Code 就可以看到沒最小化的
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
Your
Fiddler Hacking Time!