移動設備瀏覽器、微信內置瀏覽器調試方法(親測可行)


做移動設備前端開發的時候,比較頭疼的問題是調試。特別是有些問題在pc上不出現,只出現在移動設備上。

使用alert()? 個人覺得不方便而且有點low

 

1.weinre 

附上鏈接 http://people.apache.org/~pmuellr/weinre/

搭建環境不算復雜,有點基礎的人估計5分鍾就能搭建好。

調試界面在pc瀏覽器上,需要移動設備和PC在同一局域網下。

安裝:

  1.安裝node(不懂請百度、bing、google)  

      2.npm install -g wenire (-g 代表全局安裝)

使用:

      1.啟動wenire   命令行執行命令  weinre -boundHost 192.168.1.13 -httpPort 8080

        -httpPort 可選參數,是啟動端口,默認8080,也可修改為其他可用端口

        -boundHost 必選參數,weinre啟動的IP地址

        還有其他參數平時用得不多,需要請參考以上鏈接

      2.在html或者其他目標文件中引入 <script src="http://192.168.1.13:8080/target/target-script-min.js#anonymous"></script>

        注意需要修改IP和端口,與第一步設置的IP 端口一致

      3.在Chrome或Safari瀏覽器中打開http://192.168.1.13:8080/client/#anonymous

    注意需要修改IP和端口,與第一步設置的IP 端口一致

      4.在移動設備上訪問所需調試的頁面

2.vConsole

附上鏈接 https://github.com/WechatFE/vConsole

搭建環境也很簡單,在移動設備上提供了一套接近PC瀏覽器的調試界面。目前感覺是移動設備調試最好用的一個工具,沒有之一

使用:

  1.在html或者其他目標文件中引入 <script src="vconsole.js"></script>

     

      2.在移動設備上訪問所需調試的頁面,頁面右下角有個綠色的按鈕,點擊后彈出調試框

      如果沒有綠色的按鈕,請在pc上看network面板中vconsole是否請求加載

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM