移動端調試困難

很多時候，我們在進行移動端開發時，都是先在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.weinre真機調試

Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的遠程調試工具，借助于網絡，可以在PC上直接調試運行在移動設備上的遠程頁面。

本地服務器: 可以使用http-server、tomcat等,也可以使用編譯器集成的服務

weinre安裝

全局安裝: npm install