遠程調試H5：weinre+ngrok

最近作H5開發時，常常遇到在chrome模擬器上樣式顯示正常，在手機上卻出現樣式錯誤的狀況，這時僅僅使用chrome模擬器來調試很難解決問題，因而開始琢磨怎麼在PC端遠程調試手機頁面。

weinre使用比較簡單，首先用npm安裝weinre:

npm install -g weinre

啓動服務監聽端口：

weinre --boundHost 10.75.6.51 --httpPort 9999

瀏覽器打開服務地址：

10.75.6.51:9999

在待調試頁面中引入下圖中的js文件：

找到debug地址，並在瀏覽器中打開：

手機上訪問待調試頁面，會看到weinre能監聽到：

還能夠對頁面元素審查：

weinre兼容性挺強，並且能支持微信端頁面的調試，到此爲止，若是頁面請求使用的是http，那weinre已經能夠解決調試問題了。

可是若是要調試https請求的頁面，僅僅使用weinre沒法解決，由於在頁面中須要引入調試的js文件，weinre啓動的是http服務，因而使用反向代理軟件ngrok，它能夠作地址映射，並支持http/https/tcp等，使用也比較簡單：

這是官網下載地址：https://ngrok.com/download，或者能夠直接使用npm下載：

npm install -g ngrok

而後啓動ngrok：

ngrok http 10.75.6.51:9999

其中地址：中子域名由ngrok生成，每次啓動可能不同，能夠使用下面命令自定義子域名，但須要付費用戶才能使用- -

ngrok http -subdomain=test 10.75.6.51:9999

啓動後能夠打開 http://127.0.0.1:4040 查看鏈接信息：

oh，回到weinre調試這個話題~如今能夠在html中這樣引入js了：

參考資料：
http://yujiangshui.com/multidevice-frontend-debug/
http://www.cnblogs.com/chaojidan/p/4430213.html
http://www.undefinednull.com/2015/03/17/remote-debugging-localhost-with-weinre/