PC遠程調試移動設備

咱們在移動端進行前端開發時，會遇到一個讓人頭痛但不得不面對的問題——調試。

在 PC 機器上，咱們有功能強大的 Chrome DevTools、Firebug，即使是老版本的 IE ，咱們也能夠安裝微軟提供的插件，對網頁樣式和請求信息輕鬆進行調試。但在手機、平板上，不少人就無招可施了，一個勁的 alert 查看調試信息。若是你已經厭倦了可愛又可恨的 alert 彈窗，請繼續往下閱讀。

1、先說說調試的原理

設備瀏覽器中輸入一個 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 是如何操做的。

2、經過 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，異常方便！

3、其餘工具

有人會說，我沒有實體機，那我建議你在電腦上安裝虛擬機，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. 說明都寫在圖片裏頭，相信聰明的你能夠悟到

4、小結

移動端開發不比 PC 輕鬆，調試只是須要注意的一個小點，還有不少不少未知的東西等着咱們去探索，本文也算是拋磚引玉，若是您有更好的移動端調試方案，但願能夠分享出來，一塊兒交流。

---

做者：Barret Lee
出處：PC遠程調試移動設備