mobile web頁面除錯方法
阿新 • • 發佈:2018-11-02
此文已由作者張含會授權網易雲社群釋出。
歡迎訪問網易雲社群,瞭解更多網易技術產品運營經驗。
開發過程問題排查
Chrome Emulation關鍵詞:使用方便
模擬各種裝置尺寸、畫素比、自定義userAgent
模擬觸控、經緯度、重力感應
模擬4g網路等不同型別的網路
browser-sync
關鍵詞:提升開發效率 安裝步驟: npm install -g browser-sync // 以當前目錄為根,啟動一個靜態伺服器,檔案修改頁面自動重新整理 browser-sync start --server --files "css/.css, .html" // 設定代理 browser-sync start --proxy "127.0.0.1:8000/buyer" --files "css/.css, .html"
線上問題排查
Charles 的Map Local工具 關鍵詞:快速定位問題
Weinre 關鍵詞:簡單易用、專治疑難雜症
使用步驟如下:
安裝 npm install -g weinre
執行 weinre --httpPort 8080 --boundHost -all-
除錯 方法1:
<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
將localhost替換為機器電腦IP,插入需要除錯的頁面。 ps:如果是線上或者測試環境頁面可以用charles Map Local本地修改。
方法2: 手機chrome瀏覽器,新增書籤,長按可以編輯書籤,為: javascript:(function(e){e.setAttribute("src","http://localhost:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0); 訪問頁面之後,點選書籤。
手機訪問 使用charles代理到本地,訪問需要除錯的頁面。 可以看到連線的target
更多網易技術、產品、運營經驗分享請點選。
相關文章:
【推薦】 網易七魚 Android 高效能日誌寫入方案