移動端真機測試

移動端真機調試方法

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

chrome真機調試

缺點：
必須手機和pc都安裝chrome瀏覽器，其餘瀏覽器無效。

優勢：
簡單快捷

方法：

手機端下載好chrome瀏覽器，使用USB鏈接到PC，打開手機的USB調試模式。

而後在PC端打開chrome瀏覽器，在地址欄輸入：chrome://inspect. 勾選"discovery usb device"。

而後在手機端瀏覽網頁，就能夠看到以下的頁面，

點擊inspect，進行調試。

ps：若是手機端是IOS則須要在MAC下操做才能夠。Windows只能抓到安卓手機

wenire真機調試

缺點：
沒法打斷點
優勢：

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

方法：
全局安裝：

npm install  – g weinre

局部安裝：

npm install weinre

啓動：

weinre  --httpPort 8090 --boundHost  -all-

weinew啓動參數說明

• httpPort：設置Wninre使用的端口號，默認是8080。
• boundHost：[hostname | Ip | -all-]: 默認是 ‘localhost’。
• debug [true | false]：這個選項與–verbose相似， 會輸出更多的信息。默認爲false。
• readTimeout [seconds]：Server發送信息到Target/Client的超時時間， 默認爲5s。
• deathTimeout [seconds]：默認爲3倍的readTimeout， 若是頁面超過這個時間都沒有任何響應， 那麼就會斷開鏈接。

控制檯啓動截圖：

啓動了weinre以後，咱們在瀏覽器中輸入localhost:8090.顯示以下界面，表示已經啓動成功。

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

當前的targets中內容爲空。

如今，咱們須要作另一點操做，在咱們要調試的頁面中，增長一個腳本。

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

其中須要把localhost改爲本身本機的IP地址

targets已經不爲none，已經能捕捉到嵌入腳本的頁面。

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

這時候，在調試的時候，移動端的頁面也同步更新。修改樣式時，會在手機端即時生效，而且也能夠查看控制檯信息，惟一一點就是，不能進行斷點調試。

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

spy-debugger真機調試

優勢：

方便，功能齊全

缺點：

安裝稍微複雜一點

特色：

1. 頁面調試＋抓包
2. 操做簡單
3. 支持HTTPS。
4. spy-debugger內部集成了weinre、node-mitmproxy、AnyProxy。
5. 自動忽略原生App發起的https請求，只攔截webview發起的https請求。對使用了SSL pinning技術的原生App不形成任何影響。
6. 能夠配合其它代理工具一塊兒使用(默認使用AnyProxy)

方法：TODO。。。