PC遠端偵錯裝置

標籤：

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

在 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 輕鬆，調試只是需要注意的一個小點，還有很多很多未知的東西等著我們去探索，本文也算是拋磚引玉，如果您有更好的移動端調試方案，希望可以分享出來，一起交流。

http://www.cnblogs.com/hustskyking/p/remote-debug-in-mobile-development.html

 

PC遠端偵錯裝置（轉）