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

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

 

一、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，就可以看到修改后的結果了

 

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

 

二、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