此文已由作者張含會授權網易雲社群釋出。

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

開發過程問題排查

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 高效能日誌寫入方案