用 Charles Proxy 編修前端程式 (JavaScript, CSS, Images, etc) 而不用去碰後端程式

年初加入了一個在東南亞頗具知名度，但在台灣卻沒啥人知道的社群網站公司 -- migme。目前擁有逾九千萬使用者、月活躍使用者數 (MAU) 大於兩千四百萬的 migme，後端 (Backend) 程式經過多年的演化後可謂極其複雜，不僅選用的程式語言相當廣泛，裡頭的商業邏輯與需要相容的平台很容易就可以讓一位有經驗的程式設計師感到挫折。(我們持續有在徵才，總部目前設在新加坡，年假起跳 20 天喔，歡迎一起來玩，啾咪 >_^ )

@Credit: DevBattles 不知不覺中我們可能養了一隻很大的怪獸

儘管我們已經用了 Vagrant (嗯，請不要問為什麼沒用 Docker，因為 Vagrant 是在 Docker 之前最紅的)，努力整合所有的服務 (services) 到 Vagrant 的映像檔 (Image) 裡，試著減低捱過新手村的門檻，但是偶爾還是會因為像是某個 Library 版本不相容，或系統版本沒更新等等一些雜七雜八的事情，躲藏在暗處的小惡魔就會偷偷出來咬一口，這一口通常可大可小，一旦出現，可就會讓前端 (Frontend) 工程師或新加入的同事，耗掉一個下午或一整天時間來除這些可能跟前端完全沒關係的蟲了。

也就因為這樣，使我們依舊把成功執行開發環境視為一種成就，也是證明自己從超新手進階到新手的第一個獎盃。

那麼，該怎麼解決前端工程師的痛呢？

這時候 Charles Proxy (或 Charles) 就可以派上用場了。

目標

基本的概念就是用瀏覽器連上相對穩定的遠端測試網站 (Alpha、Beta、Staging，甚至可以是 Production，通常是要拿來做 Integration Test 用的)，接著利用 Charles Proxy 將想要更改的 JavaScript (、CSS、Assets) 檔案，強迫指定使用本地端 (Map Local) 的檔案。這樣一來，就可以達到只想更改前端程式，而完全不用理後端程式。

執行步驟

前往 Charles Proxy 下載程式
安裝 (以下為 Mac OS X截圖)
執行程式後會看到如下的 Charles Proxy 使用介面

開啟時會預設開啟一個 session 開始接收所有的網路流量封包
點擊上方 Tools -> Map Local...

Map Local 是將所接收到的檔案映射到本機端 (Local)
點擊之後出現對話框，點選 Add 進行新增映射

目前映射設定
可以透過左邊的 Structure 或 Sequence 搭配上 filter 功能找尋欲取代的目標檔案

可以將網址直接貼在 Host 的欄位，Charles Proxy 會自動分類
滑鼠游標 (cursor) 動一下到別的欄位

將焦點 (focus) 移到別的地方之後，Charles Proxy 會自動將網址切好
選取本機端 (Local) 欲置換遠端檔案的檔案 (好饒舌

指定本機端 (Local) 取代檔案
按下 OK 就完成了