移動端開發調試工具神器--Weinre使用方法

標籤：script   遠程   成功   前端開發   class   html   流行   版本號碼   比較   

前端開發調試必備：

1. DOM操作斷點調試；
2. debugger斷點調試；
3. native方法hook（個人暫時還沒有試過，不知效果如何）；
4. 遠程映射本地測試；
5. Weinre移動調試（詳細介紹）；

像Dom斷點調試和debugger斷點調試我認為是大家經常用到的方法，或者是當前比較Firefox下比較流行的Fiexbug調試工具；今天我們主要是研究Weinre調試工具的；

當然，作為前端開發人員，令人比較乏味的即使手機端各個版本的支援程度，例如就拿iphone來說，雖然都是-webkit核心，如果你添加的動畫，如-webkit-translate…….當然考慮到相容性問題，你會帶上首碼-webkit，但你本想手機端大多是支援HTML5和css3的，所以就試下了不帶首碼-webkit，結果，呵呵，那麼問題來了，iphone5s以下會有問題，以上就沒有問題，所以你懂得，最好加上首碼-webkit，不過像最近比較新的版本的Andirod對CSS3的屬性支援度還是不錯的；

接下來，我們介紹下重點：

安裝weinre

weinre可以通過npm按照（個人也是比較推薦的)

npm install -g weinre  (按照完成後，可以在cmd上，查看下版本號碼，看是否按照成功)

　　

weinre --httpPort 8080 --boundHost -all-

　　

ok!如果沒有什麼問題的話，我們開啟Google瀏覽器（-webkit核心）輸入：http://127.0.0.1:8080/ 會看到以下介面

以上這個便是廬山正面目了，的“debug client user interface”是weinre的Debug用戶端，點擊進入後看到目前還沒有被測試的網頁：

Targets顯示的none

OK!那麼我們繼續，添加Debug Target

有兩種方式：

1. Target Script（需要向頁面中添加一個js）：

<script src="http://192.168.1.69:8080/target/target-script-min.js#anonymous" type="text/javascript"></script>

　　

注意：標紅的部分是你自己的IP地址和連接埠號碼，自己適配去調；

1. 我們也可以將一段js儲存到行動裝置的書籤中
   javascript:(function(e){e.setAttribute(“src”,”http://127.0.0.1:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

最後：手機測試：

1. 手機串連Wifi,必須和電腦在同一段網路，我用的是XAMPP類比伺服器，大家可以上網查用法，然後用自己的手機測試你要測試的網頁即可；
   現在回到電腦端 http://127.0.0.1:8080 點擊“debug client user interface:” 如果沒有問題的話，就已經成功添加了Debug Target:

提示：注意手機不要鎖屏，不然調試會斷開！

1. 調試開始：

自己可以查查各個組件！

 

移動端開發調試工具神器--Weinre使用方法