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

weinre官網http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html
安裝weinre

weinre可以通過npm按照(推薦的)
npm install -g weinre
在這裏插入圖片描述
執行下面的命令來啓動:

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):

注意:標紅的部分是你自己的IP地址和端口號,自己適配去調;

2,我們也可以將一段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:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章