移動端調試困難
很多時候，我們在進行移動端開發時，都是先在PC端使用手機模拟器進行調試，沒有問題後，我們才會在手機端的浏覽器進行測試。
這個時候，如果沒有出現問題，皆大歡喜。
但是一旦出現問題，我們就很難解決，因為缺乏可視化的界面。
不似在PC端，我們能直覺的去改變樣式，或者是進行斷點調試。
有時，在移動端我們不得不借助于alert來調試，但是這樣的調試方法效率極其低下。
很多時候，都是靠經驗，或者是靠排除法。
甚至，我們不得不歸結為是浏覽器的實作問題。
那麼，有什麼什麼方法，能夠讓我們調試移動端的适配的時候，像調試PC端一樣直覺呢？
本文旨在為你提供移動端的調試方法，希望能夠為你打開新的一扇門。
本文會給出三種真機調試方法，你可以選擇自己最喜歡的一款~
移動端真機調試方法
- chrome真機調試
- weinre調試
- 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安裝
全局安裝：
1. npm install –g weinre 局部安裝：
1.
npm install weinre 啟動：
1. 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真機調試
最後，再介紹一下spy-debugger方法。用這個方法，我們不再需要自己增加和删除腳本。
Spy-debugger内部內建了weinre，通過代理的方式攔截所有html自動注入weinre所需的js代碼。
簡化了weinre需要給每個調試的頁面添加js代碼。
spy-debugger原理是攔截所有html頁面請求注入weinre所需要的js代碼。讓頁面調試更加友善。
特性：
- 頁面調試＋抓包
- 操作簡單
- 支援HTTPS。
- spy-debugger内部內建了weinre、node-mitmproxy、AnyProxy。
- 自動忽略原生App發起的https請求，隻攔截webview發起的https請求。對使用了SSL pinning技術的原生App不造成任何影響。
- 可以配合其它代理工具一起使用(預設使用AnyProxy)
Spydebugger安裝與使用
全局安裝：
1. npm install –g spy-debugger 啟動：
1. spy-debugger 設定手機的HTTP代理：
- 代理的位址為PC的IP位址，代理的端口為spy-debugger的啟動端口(預設端口為：9888)預設端口是 9888。
- 如果要指定端口：
spy-debugger–p8888
- Android設定步驟：設定 - WLAN - 長按選中網絡 - 修改網絡 - 進階 - 代理設定 - 手動。
- iOS設定代理步驟：設定 - 無線區域網路 - 選中網絡 - HTTP代理手動。
手機安裝證書(node-mitmproxy CA根證書)：
第一步：生成證書
生成CA根證書，根證書生成在 /Users/XXX/node-mitmproxy/ 目錄下(Mac)。
1. spy-debugger initCA 第二步：安裝證書
把node-mitmproxy檔案夾下的 node-mitmproxy.ca.crt 傳到手機上，點選安裝即可。
Spy-debugger啟動界面，同樣，在手機端重新整理頁面之後，targets中會有記錄。
以我曾經做的京豆遊戲的頁面展示一下效果，當我們在手機上選中一個元素時，可以在電腦上看到相應的資訊。
這樣我們就可以看出有可能是什麼樣式不相容導緻了UI的異常了，同樣，還可以在控制台中看到JS的log資訊，對于移動端調試來說非常有幫助。
總結
1、chrome inspect應用場景有限。
2、weinre安裝簡單，使用過程中需要增加和删除script，如果調試頁面很多的情況下，不适用。
3、spy-debugger安裝略複雜，但是使用過程非常愉快。
最後，謝謝閱讀。如果本篇博文給您帶來了一點啟發或者是幫助，請幫忙點個Star吧：https://github.com/YvetteLau/Blog，非常感謝~
作者：前端小姐姐