前端開發調試線上代碼的兩款工具

用過 Charles 和 Fiddler 這兩款，記錄以下。

 

1、Charles

Charles 界面簡單直觀，易於上手，數據請求控制容易，修改也簡單，抓取數據的開始暫停也方便。全平臺支持 win，mac，linux。

 

1. 安裝前提
Charles 須要有 Java 環境，請提早下載安裝 JDK。JDK 已經 8 了。

根據本身的系統選擇對應的JDK。個人是 win7，雙擊安裝，一直下一步就哦了。在命令行窗口輸入如下命令，出現截圖所示就表示 JDK 安裝成功了

 

2. 下載 Charles

Charles 能夠去官網下載，若是不追求最新版本，這裏也有破解版的。安裝也是一直下一步就好了。啓動界面以下

 

3. 調試線上代碼

如今就能夠啓動 Charles 來調試了，大概步驟

1. 啓動 Charles
2. 打開瀏覽器（如Firefox），訪問調試的地址（好比這裏是trip.jd.com）
3. 選擇須要調試的文件，前端多數時候是 JS/CSS，下載到本地
4. 把線上的該文件url 映射到 本地下載的文件

這樣就職意修改本地文件來查看結果了。

 

下面以調試 trip.jd.com 測試，修改該頁面裏引入的 search.js

啓動 Charles，瀏覽器打開 trip.jd.com，能夠看到 Charles 已經能夠捕捉到該頁面的衆多請求了

 

下載 search.js 到本地後，須要把經過 Charles 映射下，選擇菜單 tools -> Map Local。也可直接右擊該文件彈出菜單選擇

 

選擇本地的 search.js

 

到本地的 search.js，隨便改點東西

 

回到瀏覽器，再刷新下 trip.jd.com，就能夠看到修改後的結果了

 

好了，最簡單的使用就完成了。

 

2、Fiddler

Fiddler 是前端使用最普遍的線上調試工具，它不依賴於其它環境，直接安裝便可。缺點是隻能在 win 上使用，由於它是 C# 寫的。

 

1. 安裝

安裝超級簡單，下載後直接下一步就好了。啓動界面以下

 

2. 使用

大致和 Charles 相似，打開瀏覽器訪問要調試的頁面，定位到要調試的資源（JS、CSS），映射到本地。

 

仍是以 trip.jd.com 下的 search.js 測試

先清掉現有的請求數據

 

瀏覽器打開訪問 trip.jd.com，Fiddler 能夠捕捉到其中的請求，找到 search.js

 

右側面板切換到 AutoResponser ，勾上前兩個選項

 

把左側的 search.js 拖到 AutoResponser 裏

 

右下角 「Rule Editor」 最下面的下拉選擇 「Find a file」

 

選擇以前下載到本地的 search.js 並點擊 「save」

 

 

這時能夠任性的修改本地的 search.js了，以前加了個 alert，回到瀏覽器刷新頁面既能夠看到效果了。

 

相關：

http://drops.wooyun.org/tips/2423