移動端開發調試工具神器--Weinre使用方法
阿新 • • 發佈：2018-07-27
-a 移動設備 提示 child 必備 當前 eat 版本號 ins
前端開發調試必備：
- DOM操作斷點調試；
- debugger斷點調試；
- native方法hook（個人暫時還沒有試過，不知效果如何）；
- 遠程映射本地測試；
- Weinre移動調試（詳細介紹）；
像Dom斷點調試和debugger斷點調試我認為是大家經常用到的方法，或者是當前比較火狐下比較流行的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!如果沒有什麽問題的話，我們打開谷歌瀏覽器（-webkit內核）輸入：http://127.0.0.1:8080/ 會看到以下界面
以上這個便是廬山正面目了，上圖的“debug client user interface”是weinre的Debug客戶端，點擊進入後看到目前還沒有被測試的網頁：
Targets顯示的none
OK!那麽我們繼續，添加Debug Target
有兩種方式：
- Target Script（需要向頁面中添加一個js）：
<script src="http://192.168.1.69:8080/target/target-script-min.js#anonymous" type="text/javascript"></script>
註意：標紅的部分是你自己的IP地址和端口號，自己適配去調；
- 我們也可以將一段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);
最後：手機測試：
- 手機連接Wifi,必須和電腦在同一段網絡，我用的是XAMPP模擬服務器，大家可以上網查用法，然後用自己的手機測試你要測試的網頁即可；
現在回到電腦端 http://127.0.0.1:8080 點擊“debug client user interface:” 如果沒有問題的話，就已經成功添加了Debug Target:
提示：註意手機不要鎖屏，不然調試會斷開！
- 調試開始：
自己可以查查各個組件！
移動端開發調試工具神器--Weinre使用方法