移動端真機調試

標籤：網路   行動裝置   伺服器   device   刪除   disco   調試運行   設定   interface   

移動端調試困難

很多時候，我們在進行移動端開發時，都是先在PC端使用手機模擬器進行調試，沒有問題後，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。但是一旦出現問題，我們就很難解決，因為缺乏可視化的介面。不似在PC端，我們能直觀的去改變樣式，或者是進行斷點調試。有時，在移動端我們不得不藉助於alert來調試，但是這樣的調試方法效率極其低下，很多時候，都是靠經驗，或者是靠排除法。甚至，我們不得不歸結為是瀏覽器的實現問題。

解決方案策略

主要介紹三種調試方法，皆可行，至於選擇哪一種方式，就看自己的喜歡了。

1. chrome真機調試
2. weinre調試
3. spy-debugger調試 
   先說一下每一種方式的優缺點。 
   第一種，chrome真機調試，有一個很大的局限性就是，只能調試手機端的chrome瀏覽器，對於UC，QQ這些瀏覽器均不適用，因此在調試相容問題時，協助不大，但是最大的優點是: 簡單快捷。 
   第二種，weinre調試方式，安裝和適用不複雜，適用於全平台的調試，即任何手機的任何瀏覽器皆可以調試，不過需要手機和電腦在同一個網段下。 
   第三種，spy-debugger,安裝時，稍微複雜一點，spy-debugger整合了weinre，不過還增加了抓包工具。使用最為方便。

下面逐一介紹這三種方法:

chrome真機調試

手機端下載好chrome瀏覽器，使用USB串連到PC，開啟手機的USB偵錯模式。 
然後在PC端開啟chrome瀏覽器，在地址欄輸入: chrome://inspect. 勾選”discovery usb device”。然後在手機端瀏覽網頁，就可以看到如下的頁面，點擊inspect，進行調試。(鑒於我的工作電腦是加了域的，因為並不能使用這個方式，如果有和我一樣情況得童鞋，可以考慮使用另外兩種調試方式)

weinre

Weinre(WebInspector Remote)是一款基於Web Inspector(Webkit)的遠端偵錯工具，藉助於網路，可以在PC上直接調試運行在行動裝置上的遠程頁面。

 
本機伺服器，可以使用http-server、tomcat等,也可以使用編譯器整合的服務

weinre安裝

全域安裝: npm install –g weinre 
局部安裝: npm install weinre 
啟動: weinre –httpPort 8090 –boundHost -all- 
如果是局部安裝的話，需要在前面加上 node_modules/.bin/ 
相信前端的童鞋都會用npm包管理工具，對於這個工具，我就不展開了，如果沒有安裝npm的，自行安裝。

weinew啟動參數說明: 
–httpPort: 設定Wninre使用的連接埠號碼，預設是8080 
–boundHost: [hostname | Ip | -all-]: 預設是 ‘localhost’. 
–debug [true | false] : 這個選項與–verbose類似， 會輸出更多的資訊。預設為false。 
–readTimeout [seconds] : Server發送資訊到Target/Client的逾時時間， 預設為5s。 
–deathTimeout [seconds] : 預設為3倍的readTimeout， 如果頁面超過這個時間都沒有任何響應， 那麼就會中斷連線。

8080連接埠使用方式較多，所以我選擇了指定8090連接埠。 
啟動了weinre之後，我們在瀏覽器中輸入localhost:8090.顯示如下介面，表示已經啟動成功。 

點擊debug client user interface，進入調試頁面。 

當前的targets中內容為空白。

現在，我們需要做另外一點操作，在我們要調試的頁面中，增加一個指令碼。

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>

• 1

• 1

記住將localhost換成你的IP地址.

然後，我們在本地啟動一個伺服器，可以是IDE繼承了伺服器，或者是http-server,我使用的是http-server.啟動之後，我們在手機端訪問要調試的網頁。然後就會發現targets下面增加了記錄。

這是，點擊Elements進行調試。 

修改樣式時，會在手機端即時生效，並且也可以查看控制台資訊，唯一一點就是，不能進行斷點調試。 
還有就是，在調試結束之後，別忘記刪除嵌入的script。

除了這種方法之後，還介紹了在手機端儲存一段js代碼，在需要調試某個頁面時，點擊執行JS,但是現在瀏覽器為了安全起見，已經不再支援此方法。預設的方法是搜尋，而非執行，所以不可取。

spy-debugger

最後，再介紹一下spy-debugger方法。用這個方法，我們不再需要自己增加和刪除指令碼。

Spy-debugger內部整合了weinre，通過代理的方式攔截所有html自動注入weinre所需的js代碼。簡化了weinre需要給每個調試的頁面添加js代碼。spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js代碼。讓頁面調試更加方便。

特性: 
1、頁面調試＋抓包 
2、操作簡單 
3、支援HTTPS。 
4、spy-debugger內部整合了weinre、node-mitmproxy、AnyProxy。 
5、自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。 
6、可以配合其它代理工具一起使用(預設使用AnyProxy)

Spydebugger安裝與使用 
1.安裝: 全域安裝 npm install –g spy-debugger 
局部安裝 npm install spy-debugger

2.啟動: spy-debugger,如果是局部安裝，需要加 node_modules/.bin

3.設定手機的HTTP代理 
代理的地址為 PC的IP地址 ，代理的連接埠為spy-debugger的啟動連接埠(預設連接埠為：9888) 
預設連接埠是 9888。 
如果要指定連接埠: spy-debugger –p 8888 
Android設定步驟:設定 - WLAN - 長按選中網路 - 修改網路 - 進階 - 代理設定 - 手動 
iOS設定代理步驟：設定 - 無線區域網路 - 選中網路 - HTTP代理手動 
4.手機安裝認證(node-mitmproxy CA根憑證) 
掃一掃安裝: 

Spy-debugger啟動介面，同樣，在手機端重新整理頁面之後，targets中會有記錄 

總結: 
1.chrome inspect應用情境有限 
2.weinre安裝簡單，使用過程中需要增加和刪除script，如果調試頁面很多的情況下，不適用。 
3.spy-debugger安裝略複雜，但是使用過程非常愉快。

移動端真機調試