charles是一款mac下代理調試工具，對於前端開發同學來說是相當方便的一個調試接口的工具；不過charles需要收費，不過在天朝幾乎收費的軟件都能找到破解方法；
使用charles前，需要將charles設置成mac OS的網絡系代理服務器，這樣charles就可以捕獲到mac上所有的網絡請求，然后charles在做些手腳（如map和rewrite功能）就可以很輕松的實現接口的調試。
至於charles的具體使用可以在網上查閱其具體使用，本文就來說說在使用charles調試過程中相當重要的map和rewrite功能，這也前端調試接口用到charles最多的功能。
map功能
map功能，顧名思義就是將某個請求進行重定向，用重定向后的內容來響應請求的內容；
map功能分為map Local和map Remote,二者區分是：
-
map Local：是將某個網絡請求重定向到本地的某個文件 -
map Remote：是將某個網絡請求重定向到另一個網絡請求二者除了重定向文件的位置不同之外，其他功能都是一樣的。他們都可以對
js、css、html以及api接口均可重定向，此外也可以使用通配符來進行簡單的批量匹配，達到批量重定向的目的。
在使用map功能時，本人最常見的使用場景簡要說明如下：
-
js、css重定向：主要是來調試js和css的實現效果- 本地開發獲取不到接口數據，那么就使用測試環境，通過
map Local來將制定的js、css重定向本地進行開發 - 線上有個bug，想定位問題，但是線上代碼都壓縮過沒法debug，這時可通過重定向到本地實現調試
- 本地開發獲取不到接口數據，那么就使用測試環境，通過
-
html重定向：在開發過程中由於本地沒有數據，那么可以使用測試環境的數據進行開發而不用mock數據，這時可以訪問測試環境的某個頁面，然后將其頁面的html重定向到本地的某個頁面來獲取測試數據。
頁面結構可能如下面這樣，有3個js引用，前面2個js為每個頁面公共的js，最后一個js為當前頁的業務邏輯js：
<scritp type="text/javascript" src="http://host/path/com1.js"></scritp>
<scritp type="text/javascript" src="http://host/path/com2.js"></scritp>
<scritp type="text/javascript" src="http://host/path/page.js"></scritp>
這時，將上面頁面的html重定向到本地的開發頁面html，由於本地頁面的3個js有2個是公共的，所以他會加載測試環境的對應js，這時需要將業務邏輯的js也需重定向到本地js，這樣就可以開發了；
他只用了2個重定向操作實現：可以實現本地開發，避免mock數據；否則需要多個重定向而且還需要自己mock數據。
api重定向： 為了mock數據；一般使用map Remote功能來將本地的請求重定向到測試或者線上環境的網絡請求。
除了單個map隱射外，還可以使用*通配符進行批量匹配，不用一個個建立重定向了。下面舉一個實戰的例子。
在項目開發過程中可能會遇到這種情況，本地開發總是要為各種數據而煩惱，那么能否在本地開發中批量用到某個環境的數據呢？答案當然可以！
在本人的某個項目開發中，本地開發因為沒有數據，需要相應環境的數據，所以就需要將本地請求數據的api接口map Remote到車上環境來獲取測試數據而不用進行大量的mock數據，因為涉及系統涉及到的數據api接口比較多，每個都進行單獨重定向的話，效率太低；
而非數據api接口的請求不需要重定向，那么涉及到的問題是：
-
修改數據請求接口api的host為測試環境。
本地系統中的
/api/路徑下的請求都轉到對應的測試環境(cmstest.intra.xiaojukeji.com)的對應目錄/api/下,即數據接口請求的host改為測試環境hostcmstest.intra.xiaojukeji.com,請求路徑保持不變；
`http://127.0.0.1:8080/api/transit-nepenthes/line/list` ---> `http://cmstest.intra.xiaojukeji.com/api/transit-nepenthes/line/list`
- 非數據請求api接口不進行重定向
具體的charles配置如下圖所示：
注意上面
map From中的Path配置項使用了*通配符，表示匹配127.0.0.1:8080/api/下的所有文件及子路徑，將其重定向到cmstest.intra.xiaojukeji.com下的/api/路徑下
上面的配置通過map Remote就是實現了區別對待本地系統的不同請求，將指定路徑下的請求重定向到指定的環境，配置完成后看到所捕獲的請求信息如下圖所示。
這說明配置已經生效，那么本地開發，測試環境數據就可以看到了，剩下的就可以愉快的開發項目了，是不是超贊啊！
補充一下map隱射的相關功能
-
map隱射可以使用的模式匹配符有三種：
-
*: 可以匹配0個或者多個字符 -
?: 可以匹配一個字符 -
[...]: 范圍選擇符，可以匹配范圍中的任意一個字符
-
-
假設
Map From配置中的各個項為空，表示匹配所有請求，然后Map To項的配置不同，代表不同含義，下表列出一個簡單例子
| Host配置值 | Path配置值 | 配置產生的結果 |
|---|---|---|
| charlesproxy.com | 匹配所有的請求重定向到charlesproxy.com主機 | |
| *.charlesproxy.com | 匹配所有的請求重定向到以.charlesproxy.com結尾的主機 | |
| charlesproxy.com | /charles/ | 匹配所有請求只重定向到charlesproxy.com/charles/路徑下 |
| charlesproxy.com | /charles/* | 匹配所有請求只重定向到charlesproxy.com/charles/路徑下,包括路徑下的文件及其路徑的子路徑 |
| charlesproxy.com | /charles | 匹配所有請求只重定向到charlesproxy.com/charles下 |
| charlesproxy.com | /index.html | 匹配所有請求重定向到charlesproxy.com/index.html |
| /charles/*.html | 匹配所有請求重定向到任意主機下的以.html結尾的文件，該文件存放在主機的/charles/及其子目錄下 |
Rewrite功能
rewrite功能重寫對應的內容，主要可以對某些匹配請求的header、host、url、path、query param、response status、body進行rewrite。
rewrite功能支持正則表達式的寫法，這是一個非常有用的功能；例如Math項的value正則式中的組捕獲項在Replace的value值中可以使用$1~$n之類的捕獲組
Rewrite的具體設置規則步驟，可以用下面一幅圖來說明：
上面map Rewrite中用127.0.0.1:8080/api/*下的所有接口替換成指定host下對應的/api/*路徑，而其他接口不做處理，用rewrite同樣可以實現
下面就rewrite設置規則內容頁面，就各項rewrite規則做一個簡單說明，指出其對應的作用及其使用場景：
header：- 作用：可以對請求或者響應的header內容進行操作，包括添加、修改及刪除。
- 使用場景：在需要對header進行處理時用到，例如為了用上某個環境數據，可能需要對應cookie，這時本地開發是可以在請求的header中加上cookie信息；也可以重寫響應header的信息
如下圖，在本地開發時，需要的某個環境中的數據api接口需要當前登錄用戶的登錄信息的cookie，本地環境沒有這些cookie，這時就需要添加需要cookie頭，如下圖所示，為匹配的接口添加cookie相關的header：
-
host: 主要是對請求進行host修改，以達到本地請求獲取指定host環境中的數據，常見於mock數據 -
url:- 作用：修改url中某些部分，可以用別的url進行替換或者url裁剪時間戳或者md5等
- 使用場景：場景使用非常多，既可以對host也可以對path進行rewrite，可以滿足指定host下的請求重定向到其他host下對應path下
path: 主要rewrite path內容使用指定rewrite規則的path來響應指定的請求path，它可以對paht進行裁剪
-
query param:- 作用：可以對param進行操作，包括修改、添加、刪除等
- 使用場景：有時請求可能多傳遞了不必要的參數，這時可以rewirte功能去掉多余的參數；另外也可以添加請求必須而暫時無法提供的參數
-
response status: 顧名思義就是對response的狀態碼進行rewrite；比方我想對一個指定頁面A的訪問重定向到另一個頁面B，就可以用到這個。如下圖：
-
body：- 作用：對請求的響應內容做修改，一般是對某一個或幾個值進行rewrite，用新的值來替代返回的值
- 使用場景：可以用來mock數據，比方說在開發中為了測試功能需要請求的某個數組字段有值，但是當前環境無法給出，那么就可以使用該功能
