背景
前面寫了一篇關(guān)于Browsersync的文章，但是Browsersync只能調(diào)試本地代碼，如果要是調(diào)試已經(jīng)上線或者已經(jīng)發(fā)布到測試服務(wù)器的代碼就不行了。想必做前端的小伙伴都會遇到這個問題吧。下面就給大家介紹一個工具fiddler以及它的一個插件Stave。
介紹
先介紹一下fiddler是干啥的，用官網(wǎng)的一句話說就是任何瀏覽器，系統(tǒng)或平臺的免費(fèi)網(wǎng)絡(luò)調(diào)試代理。支持任何瀏覽器，任何系統(tǒng)，任何平臺。主要特征有：
Web調(diào)試
解密HTTPS流量和解壓縮Web會話；分析會話數(shù)據(jù)；調(diào)試流量
性能測試
HTTP/HTTPS流量記錄
Web會話操作
可以對會話設(shè)置斷點(diǎn)，也可以修改HTTP請求。可以將把文件請求映射到本地文件。
安全測試
Stave是Fiddler的一個擴(kuò)展插件，能夠讓Fiddler把文件請求映射到本地目錄。之前調(diào)試單個文件的時候一般使用Fiddler自帶的AutoResponder功能，不過AutoResponder每條自動響應(yīng)規(guī)則只能對應(yīng)一個本地文件， 在文件數(shù)目較多的時候，使用起來很不方便。
安裝
Fiddler下載地址
Stave下載地址
先安裝Fiddler再安裝Stave,安裝很簡單，在這里就不寫了。
ps:如果重啟之后沒有看到Stave，可能是stave安裝后的路徑不對。請在C盤下找到Stave.dll，然后放到fiddler安裝路徑的Scripts文件下。然后重啟Fiddler就可以了。
Stave安裝好之后重啟一下Fiddler,就可以在Fiddler的有側(cè)看到Stave的tab頁，點(diǎn)開之后如下圖：
使用
在Stave空白區(qū)域右鍵-添加，然后填寫規(guī)則。第一行填寫的是你要調(diào)試的服務(wù)器路徑，第二行是你本地對應(yīng)的文件目錄。剩下的其他選項可以默認(rèn)就行。點(diǎn)擊確定之后就可以愉快的使用了。如果你要是在手機(jī)上訪問的話，記得給手機(jī)設(shè)置代理就行（服務(wù)器地址就是你電腦的Ip地址，端口8888。手機(jī)和電腦要在同一個局域網(wǎng)內(nèi)）
