此文已由作者張含會授權網易雲社區發布。

歡迎訪問網易雲社區，了解更多網易技術產品運營經驗。

開發過程問題排查

1. Chrome Emulation關鍵詞：使用方便

• 模擬各種設備尺寸、像素比、自定義userAgent

• 模擬觸摸、經緯度、重力感應

• 模擬4g網絡等不同類型的網絡

1. 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"

線上問題排查

1. Charles 的Map Local工具 關鍵詞：快速定位問題

2. Weinre 關鍵詞：簡單易用、專治疑難雜癥

使用步驟如下：

1. 安裝 npm install -g weinre

2. 運行 weinre --httpPort 8080 --boundHost -all-

3. 調試 方法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);
            訪問頁面之後，點擊書簽。

4. 手機訪問 使用charles代理到本地，訪問需要調試的頁面。 可以看到連接的target

   

免費體驗雲安全(易盾)內容安全、驗證碼等服務

更多網易技術、產品、運營經驗分享請點擊。

相關文章：
【推薦】 網易七魚 Android 高性能日誌寫入方案

mobile web頁面調試方法