mobile web頁面調試方法

此文已由做者張含會受權網易雲社區發佈。

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

開發過程問題排查

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

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

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

相關文章：
【推薦】 數據庫路由中間件MyCat - 源代碼篇（2）
【推薦】 debian 7上源碼編譯MongoDB 3.4版本
【推薦】 3分鐘掌握一個有數小技能：製做動態標題