我們在移動端進行前端開發時，會遇到一個讓人頭痛但不得不面對的問題——調試。
在 PC 機器上，我們有功能強大的 Chrome DevTools、Firebug，即便是老版本的 IE ，我們也可以安裝微軟提供的插件，對網頁樣式和請求信息輕松進行調試。但在手機、平板上，很多人就無招可施了，一個勁的 alert 查看調試信息。如果你已經厭倦了可愛又可恨的 alert 彈窗，請繼續往下閱讀。
一、先說說調試的原理
設備瀏覽器中輸入一個 URL，它會向 URL 所在的 server 請求資源：
+-------------+ +---------------+ | client |--------→| Internet | +-------------+ +---------------+
此時，數據是從 client 和 目標 server 之間的隱秘交互，除非 server 端的代碼是由我們自己控制，否則很難了解他們之間都做了什么信息傳遞。如果 server 傳過來的代碼存在 bug，此時我們就相當糾結了。比較常見的情景是，該 server 就是我們的測試機器，我們在測試機器上開發，通過一個移動設備 client 來實施調試代碼，常用的調試方式就是修改 server 代碼，再實時查看 client 的響應。
但是，問題來了。某天，Barret 發現 client 端頁面顯示有 bug，由於 client 請求的目標 server 是線上，不像平時的測試機器，我們可以隨意修改代碼然后查看效果，並且線上的代碼都是經過壓縮和打包了的，很難閱讀，怎么辦？
於是，我想到了使用代理：
+-------------+ \ / +---------------+
| client |-----×---→| Internet |
+-------------+ / \ +---------------+
| ↑
| |
| +-------------+ |
+----→| proxy |-----+
+-------------+
我們在 client 端做相應配置，讓他的請求強制指向 proxy，然后 proxy 轉發請求到目標 server，proxy 上的請求和響應都是透明的，通過篡改 client 到 proxy 的請求，或者篡改 server 到 proxy 的響應，就可以實時查看這些人為修改在 client 端的效果了。本文目的就是說明 proxy 是如何操作的。
二、通過 Fiddler 代理
windows 下著名的 http(s) 代理軟件 fiddler 使用比較廣泛，mac 下可以使用 charles 代理，由於使用人群相對偏少，本文就不細說，感興趣的可以 PM 我。charles 是一個跨平台的軟件，windows 下也可以使用，不過個人偏好 fiddler。OK，我們來看看 fiddler 是如何一步一步完成網絡代理的。
1. 配置客戶端
這里說的客戶端包括手機、平板甚至電腦。一般的 android / IOS 設備都可以設置代理：
step 1. 當連接好網絡之后（相信你在一個 wifi 環境下進行開發），點擊右側的箭頭按鈕，我使用的是 android 手機，IOS 也比較好找，在 設置>Wi-Fi 中找到對應的網絡，右側有個圓圈包着的 i 圖標，點擊進入：
step 2. 一般代理方式有兩種，手動和自動，將其設置為手動，然后填寫，你電腦的 IP（為啥呢？因為 proxy 是你的電腦，client 的請求要全部轉發到你的電腦上，然后使用 fiddler 軟件去分析/替換請求），windows 下使用 ipconfig 可以看到本機 IP，linux/unix 下使用 ifconfig 查看：
step 3. 設置端口，端口可以隨意設置，但最好大於 3000，數值比較小的端口可能被系統占用了。
這里需要注意一點，由於 client 相對我們電腦的 fiddler 來說是一個遠程設備，所以要在 Allow Remote Computers to Connert 選項上打上勾勾。
step 4. 進入手機瀏覽器，輸入網址：
step 5. 然后把你的眼睛挪到電腦屏幕上看看 fiddler：
到這里，我相信你已經看明白了整個 proxy 的原理。至於 fiddler 如何替換包，如何修改包，如果調試，不是本文敘述的重點，下面演示一個簡單的替換。
2. 調試
請求百度的頁面，我們把百度的 logo 換成博客園的：
step 1. 在 AutoResponder 中添加一項：
step 2. 進入你的瀏覽器（UC下清空緩存，如果緩存中有百度圖片，他會使用緩存，並不發出這個請求），打開百度頁面：
然后你就發現，貌似哪里有點不對~ 除此之外，你還可以將線上文件替換到本地，比如線上的 xyz-min.js 替換成本地的 xyz.js 然后修改 xyz.js 的內容，直接調試線上 bug，異常方便！
三、其他工具
有人會說，我沒有實體機，那我建議你在電腦上安裝虛擬機，android 和 IOS 的虛擬機都比較好安裝。
有人會說，我電腦太卡，跑不動虛擬機，那我建議你就是用上述方式。
有人會說，.....，（如果沒實體機也沒虛擬機，那你開發個毛線呀）。
Fiddler 和 Charles 都是 HTTP(s) 層的抓包軟件，如果你是 websocket 開發調試，建議使用 wireshark，網絡七層協議，這個軟件能抓除數據鏈路層之外的所有層信息，出於安全考慮，它抓到的包是不能篡改的。
還有一些比較好用的工具，如利用 pac 文件配置系統代理，weinre 調試等，這里簡單介紹下 weinre：
1. 安裝
npm install –g weinre
2. 打開
weinre -httpPort 7999 -boundHost -all-
- httpPort 監聽端口
- boundHost –all- 綁定主機
3. 說明都寫在圖片里頭，相信聰明的你可以悟到
四、小結
移動端開發不比 PC 輕松，調試只是需要注意的一個小點，還有很多很多未知的東西等着我們去探索，本文也算是拋磚引玉，如果您有更好的移動端調試方案，希望可以分享出來，一起交流。