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

前端開發調試必備：

1. DOM操做斷點調試；
2. debugger斷點調試；
3. native方法hook（我的暫時尚未試過，不知效果如何）；
4. 遠程映射本地測試；
5. 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

有兩種方式：

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. 調試開始：

本身能夠查查各個組件！