移動端真機調試

移動端調試困難

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

那麼，有什麼什麼方法，可以讓咱們調試移動端的適配的時候，像調試PC端同樣直觀呢？本文旨在爲你提供移動端的調試方法，但願可以爲你打開新的一扇門。

本文會給出三種真機調試方法，你能夠選擇本身最喜歡的一款~

移動端真機調試方法

1. chrome真機調試
2. weinre調試
3. spy-debugger調試

簡單說明一下每一種方式的優缺點：

第一種: chrome真機調試，有一個很大的侷限性就是，只能調試手機端的chrome瀏覽器，對於UC，QQ這些瀏覽器均不適用，所以在調試兼容問題時，幫助不大，可是最大的優勢是: 簡單快捷。

第二種: weinre調試方式，安裝和適用不復雜，適用於全平臺的調試，即任何手機的任何瀏覽器皆能夠調試，不過須要手機和電腦在同一個網段下。

第三種:spy-debugger，安裝稍微複雜一點，spy-debugger集成了weinre，不過還增長了抓包工具，使用最爲方便。

下面咱們開始具體介紹如何使用這三種調試方法：

1.chrome真機調試

手機端下載好chrome瀏覽器，使用USB鏈接到PC，打開手機的USB調試模式。
而後在PC端打開chrome瀏覽器，在地址欄輸入: chrome://inspect. 勾選"discovery usb device"。而後在手機端瀏覽網頁，就能夠看到以下的頁面，點擊inspect，進行調試。(鑑於個人工做電腦是加了域的，由於並不能使用這個方式，若是有和我同樣狀況的童鞋，能夠考慮使用另外兩種調試方式)

2.wenire真機調試

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> 

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

而後，咱們在本地啓動一個服務器，能夠是IDE集成的服務器，或者是http-server,我使用的是http-server.啓動以後，咱們在手機端訪問要調試的網頁。而後就會發現targets下面增長了記錄。

這時，咱們就能夠點擊Elements進行調試。

修改樣式時，會在手機端即時生效，而且也能夠查看控制檯信息，惟一一點就是，不能進行斷點調試。

最後，在調試結束以後，別忘記刪除嵌入的script。

除了這種方法以後，還介紹了在手機端保存一段Js代碼，在須要調試某個頁面時，點擊執行JS,可是如今瀏覽器爲了安全起見，已經再也不支持此方法。默認的方法是搜索，而非執行，因此不可取。

3.spy-debugger真機調試  https://github.com/tengrenli/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

2. 啓動: spy-debugger

3. 設置手機的HTTP代理

   代理的地址爲 PC的IP地址 ，代理的端口爲spy-debugger的啓動端口(默認端口爲：9888)默認端口是 9888。

   若是要指定端口: spy-debugger –p 8888

   Android設置步驟:設置 - WLAN - 長按選中網絡 - 修改網絡 - 高級 - 代理設置 - 手動

   iOS設置代理步驟：設置 - 無線局域網 - 選中網絡 - HTTP代理手動

4. 手機安裝證書(node-mitmproxy CA根證書)

   第一步：生成證書：

   生成CA根證書，根證書生成在 /Users/XXX/node-mitmproxy/ 目錄下(Mac)。

   spy-debugger initCA

   第二步：安裝證書：

   把node-mitmproxy文件夾下的 node-mitmproxy.ca.crt 傳到手機上，點擊安裝便可。

   Spy-debugger啓動界面，一樣，在手機端刷新頁面以後，targets中會有記錄

以我曾經作的京東遊戲的頁面展現一下效果，當咱們在手機上選中一個元素時，能夠在電腦上看到相應的信息，這樣咱們就能夠看出有多是什麼樣式不兼容致使了UI的異常了，一樣，還能夠在控制檯中看到JS的log信息，對於移動端調試來講很是有幫助。

]

總結:

1. chrome inspect應用場景有限
2. weinre安裝簡單，使用過程當中須要增長和刪除script，若是調試頁面不少的狀況下，不適用。
3. spy-debugger安裝略複雜，可是使用過程很是愉快。