weinre Just-in-Time 偵錯手機上的Web頁面

標籤：技術   沒有   img   image   網頁   快速   樣式   相容問題   npm   

　　H5頁面，一般用Google瀏覽器的模擬器調試頁面。但一旦個別機型有bug，在Google又顯示不出來。

所以就得用weinre 這個工具來調試了。

　　weinre工具強大功能：在有bug的機型開啟頁面，用這個工具，可以快速定位bug，並找出解決方案。

　　　　　　　　　　　　換句話說，當你用手機開啟頁面，電腦的滑鼠放在代碼上，手機能夠顯示出這個代碼對應的哪個模組。可以即時修改樣式。

　　開始：

　　首先，得在node.js   和 npm環境下才可以使用。。。。沒有的話可以百度下怎麼安裝。安裝全域就可以。

　　其次：

　　　　1.npm -g install weinre //全域安裝weinre

　　　　2. weinre --boundHost [hostname | ip address |-all-] --httpPort [port] //啟動weinre

　　　　　　舉例：weinre --boundHost 192.168.1.130 --httpPort 9999 //啟動weinre（192.168.1.130 必須為本機地址，9999是連接埠號碼，隨便一個連接埠號碼，一般不要80或者8080）

　　　　3、開啟cmd，輸入：   weinre --boundHost 192.168.1.130 --httpPort 9999

　　　　.

 

　　　　4、開啟瀏覽器：輸入  192.168.1.130:9999

                 

　　　　　5、把“步驟1”裡面的語句放到要調試的頁面裡面<script src="http://192.168.1.130:9999/target/target-script-min.js#anonymous"></script>

　　　　　　然後點擊“步驟2”

　　　　　　

　　　　　　6.用手機開啟那個要調試的頁面，也就是<script src="http://192.168.1.130:9999/target/target-script-min.js#anonymous"></script>有這句代碼的頁面

然後重新整理的那個地址

 

　　　　　　7.點擊  步驟1，再點擊  步驟2 。就可以看手機的效果，然後在網頁上調試。一般調試相容問題可以這樣做

 

　　　　　　　　

 

weinre Just-in-Time 偵錯手機上的Web頁面