作者：snandy
原文地址：http://www.cnblogs.com/snandy/p/4934944.html
用過 Charles 和 Fiddler 這兩款，記錄如下。
一、Charles
Charles 界面簡單直觀，易于上手，數據請求控制容易，修改也簡單，抓取數據的開始暫停也方便。全平臺支持 win，mac，linux。
1. 安裝前提
Charles 需要有 Java 環境，請提前下載安裝 JDK。JDK 已經 8 了。
根據自己的系統選擇對應的JDK。我的是 win7，雙擊安裝，一直下一步就哦了。在命令行窗口輸入以下命令，出現截圖所示就表示 JDK 安裝成功了。
2. 下載 Charles
Charles 可以去官網下載，如果不追求最新版本，這里也有破解版的。安裝也是一直下一步就行了。啟動界面如下：
3. 調試線上代碼
現在就可以啟動 Charles 來調試了，大概步驟：
- 啟動 Charles
- 打開瀏覽器（如Firefox），訪問調試的地址（比如這里是trip.jd.com）
- 選擇需要調試的文件，前端多數時候是 JS/CSS，下載到本地
- 把線上的該文件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”.
