使用fiddler將網站上的css js重定向至本地文件，進行在線調試
https://github.com/annnhan/ReRes
這是一篇寫給公司負責切圖和調樣式的前端的文章。主要適用於一個項目臨時需要調整下css或者js，為了一點修改讓前端人員在本機搭建完整的LAMP環境，導入DB數據，確實很不方便，特別是像我們這樣前后端在地理上就分離在兩個城市的團隊。這里是使用強大的Fiddler2，以修改本博客網站的雲標簽插件的樣式為例。
1. 下載安裝fiddler2，點擊運行
http://fiddler2.com/get-fiddler 一般選擇fiddler2就可以了
2. 在瀏覽器打開需要調試的頁面，比如，如果有瀏覽器緩存，可以ctrl+F5強制刷新獲取最新版本
任一瀏覽器打開http://www.awebird.com/blog/，這也是fiddler相對firebug和chrome開發工具的一個優勢，它是與瀏覽器無關，IE甚至opera mobile emulator這種手機模擬器都可以。注意瀏覽器如果有代理插件的話，fiddler可能檢測不到，比如chrome的SwitchSharp，需要選擇“使用系統代理設置”
3. 進行上一步的時候，發現fiddler2中已經有一串串優美的http請求和回應呈現出來了，請選中准備調試的文件 這里很容易辨別出是下圖這個cirrusCloud.css，（如果你不潔身自好的裝了360之類的“安全軟件”，還能時不時發現自己的隱私數據是怎么被悄悄上傳的）
有兩個地方要注意下
- 調試過程中不斷修改js css上傳到服務器，重新進入或者刷新頁面很有可能使用的是瀏覽器的舊的緩存版本，這個時候應該先清下緩存，或者多按幾次ctrl+F5強制刷新。看到上面的http result是200的話說明是從服務器獲取的最新版本
- 一般來說服務器端會對js css進行gzip壓縮傳輸，這種情況下，可以點擊右側的黃色提示條解壓后就可以看到文本的css內容了
4. 在右側的的AutoResponder選項卡選中 下圖所示的兩項，點擊 Add Rule
5. 在右下側的Rule Editor選擇“find a file”, 彈出文件選擇器，定位到svn本地目錄下的相應css文件
（這里是指開發方式，可以直接定位到svn或者git的client文件夾的對應css文件），這里其實就是一個重定向，當網頁渲染請求服務器上的http://awebird.com/blog/wp-content/themes/twentytwelve/style.css?ver=3.6文件時根據這里的設置被重定向到本地的文件（如果本機沒有，也可以根據上面的鏈接直接從服務器下載再重定向，也可以在fiddler郵件save and open as local file），比如C:\AppServ\www\myblog\cirrusCloud.css
在右上窗口看到新增了一條記錄就是服務器到本機的重定向映射規則，以后可以隨時添加和刪除這些規則
6. 經過上面的操作就可以實現修改本機的css文件，調試瀏覽器里遠程環境的效果了
比如在css中加入如下兩條
#cirrusCloudWidget a{
color:green;
}
#cirrusCloudWidget a:hover{
border: 1px solid red;
color:red;
}
刷新頁面，可以看到雲標簽的字體變成綠色，被選中的標簽變成紅色
7. 就是這么簡單
注意，你的修改並沒有真的上傳到服務器，別人訪問網站看到的還是灰色的標簽，如果本地映射的就是版本庫的話，這時就可以svn commit或者git push，然后等運維更新到服務器環境就可以了。
本條目發布於2013/08/20。屬於技術分類，被貼了 css、fiddler、javascript、調試，前端 標簽。
文章導航
Pingback引用通告： 使用fiddler調試Native和Hybrid App - 擰頭一個 | aWeBird®