移動前端調試工具-Weinre真機調試

以前作移動前端調試頁面的時候就是簡單的使用Chrome模擬器調試，能知足基本基本的需求，後來發現了基於Web Inspector(Webkit)的遠程調試工具Weinre，能夠在PC端直接調試運行在移動設備上的遠程頁面，，在PC端能夠即時修改目標網頁的HTML/CSS/Javascript，調試過程可實時顯示移動設備上頁面的預覽效果，並同步顯示設備頁面的錯誤和警告信息，能夠查看網絡資源的信息，不支持斷點調試，聽起來是否是很厲害的樣子，但真正用起來卻很方便。

1.版本選擇 

Weinre最先是有Java版本的，所以網上的有些博客是Java版本的實現過程，Java版本在13年的時候已經沒有更新，因此會出現一些問題，Weinre官網如今介紹本身說是一個基於NodeJS項目，由於須要本地須要安裝Node。weinre是一個命途多舛的項目，最先被PhoneGap收購，後來PhoneGap又被Adobe收購，Adobe收購PhoneGap後把PhoneGap捐給了Apache，Apache把PhoneGap放在Cordova的項目中，Weinre也從最初的Java移植到了當前的NodeJS版本。

2.安裝（默認已安裝Node，若是沒有安裝能夠參考本人以前博客）

sudo npm -g install weinre

3.獲取ip地址（mac環境）

ipconfig getifaddr en0

4.運行weinre

weinre --boundHost 192.168.1.105

5.瀏覽器中輸入http://192.168.168.101:8080便可看到如下頁面:

6.手機上訪問須要調試的web頁面，而後在頁面底部插入腳本(最後的#anonymous標題與PC端對應)：

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

 

7.PC端瀏覽器訪問http://192.168.1.105:8080/client/#anonymous頁面，能夠看到如下效果:

 

對手機端頁面實時調試:

 

8.小結：

①有可能會出現頁面沒法顯示頁面的源代碼，請注意target中的信息，確保手機和電腦在同一局域網內；

②若是出現connection lost請即時刷新頁面，若是須要調試時間較長不想丟失連接的話嘗試用手機線和電腦連接；

③支持主流Android，iOS以及其餘平臺，不支持iOS 3.1.3及其更早平臺以及webOS 1.45或更早平臺；

④關於weinre有其餘命令的介紹能夠參考官網，以及書籤注入的方式查看手機網頁大同小異，能夠參考官網http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html