移動端真機調試
移動端調試困難
很多時候，我們在進行移動端開發時，都是先在PC端使用手機模擬器進行調試，沒有問題後，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。但是一旦出現問題，我們就很難解決，因為缺乏可視化的界面。不似在PC端，我們能直觀的去改變樣式，或者是進行斷點調試。有時，在移動端我們不得不借助於alert來調試，但是這樣的調試方法效率極其低下，很多時候，都是靠經驗，或者是靠排除法。甚至，我們不得不歸結為是瀏覽器的實現問題。
解決策略
主要介紹三種調試方法，皆可行，至於選擇哪一種方式，就看自己的喜歡了。
- chrome真機調試
- weinre調試
- 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安裝略復雜，但是使用過程非常愉快。
移動端真機調試