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>      

1. 将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);
         通路頁面之後，點選書簽。      

1. 手機通路使用charles代理到本地，通路需要調試的頁面。

   可以看到連接配接的target