Remote Debugging Devices

作過移動端開發的童鞋相信必定遇到過，頁面在本身電腦上模擬各類手機都跑的好好的，但當程序正真在真機上運行時，總會遇到一些問題。

有了問題就得要解決啊，這時你確定想手機上要是能打開控制檯該有多好啊~

辦法固然是有滴。

首先，固然是來看看土豪們用的機器 iphone。

Safari

iOS 系統默認的瀏覽器是 safari，調試 safari 只需一下簡單幾步。

1. 打開手機上的 web 檢查器
   經過【設置】>【Safari】>【高級】>【Web檢查器】打開

1. 連接手機到電腦。連接上了之後，手機直接訪問網頁就能夠了。

2. 電腦上打開 safari，點擊 【開發】 菜單欄
   

而後就能看到手機上訪問的頁面內容了

注：若是 safari 菜單欄上沒有 【開發】，能夠經過【偏好設置】>【高級】來設置

若是是本地調試的話，有一點要注意。iphone 經過 ip 地址訪問會連接不上，須要經過用戶名.local:端口號的方式訪問，我這裏就是 david-2.local:8080。

看完 iOS，固然就要看看 Android。

Chrome

打開 Android 機上的 Chrome 控制檯同上面的方法大同小異。

1. 手機進入開發者模式，啓用 USB 調試

2. 連接手機到電腦

3. 打開 Chrome，訪問網頁

4. 電腦上一樣打開 Chrome，打開控制檯，經過【···】>【More tools】>【Inspect devices】
   

5. 選擇 Devices，而後 Inspect 就能夠了
   

注意：安卓機訪問本地服務器，用 ip 地址就能夠了，即 192.168.1.4:8080。

Safari 和 Chrome 都瞭解完了，是否是就結束了？固然不是，別忘了國內一大瀏覽渠道微信。

微信瀏覽器

要調試微信瀏覽器，就須要額外下一個軟件——微信 web 開發者工具。

安裝完成後打開軟件，切換到【移動調試】，根據提示操做就能夠了。

若是，控制檯中出現 weixin://preInjectJSBridge/fail 的錯誤，多是使用了不兼容的語法，加入相應 polyfill 能夠解決。

若是，你覺得到此就結束了，那就圖樣圖森破了。

國內絕大部分安卓機用戶都用的不是 chrome，用的都是 UC、QQ 或者自帶瀏覽器之類，水太深啊。

Weinre

剛剛使用微信開發工具的時候，文檔上有提到它是基於 weinre 的，那 weinre 是什麼，能幫咱們解決問題麼？

weinre was built in an age when there were no remote debuggers available for mobile devices.

它幾乎支持各類新老瀏覽器，並且，安裝和使用也很方便，具體安裝方法在這篇文章中寫得很詳細了。

但，再如何方便不還得裝麼，並且還要修改當前的代碼，那能不能有更好的辦法？

BrowserSync

BrowserSync 或許你們都有所瞭解，不瞭解的能夠看一下我以前介紹它的文章。

BrowserSync v2.0.0 以後就默認提供了對 weinre 的支持，當你使用 BrowserSync 啓動 server 時，能夠訪問 browsersync 的系統面板來開啓 remote debugger。

控制面板的地址在 server 啓動後的控制檯上看到，默認爲當前 server 端口號 +1，即 server 端口是 3000，那麼，browsersync 系統面板的端口就是 3001。

這樣，既不用修改任何一行代碼，又能在任何機器的任何瀏覽器上使用，是否是很完美？

寫在最後

最後，固然仍是繼續安利下本身的 Blog。

在以前將 vue 升級到 vue 2.0 並加入 vuex 以後，現又加入 graphql-js，並將 vue-router 切換到了 history 模式（點擊查看源碼）。

參考資料

1. 如何在移動設備上調試網頁

2. Remote Debugging Android Devices

3. 微信頁面開發遇到preInjectJSBridge錯誤

4. 移動端前端開發調試

5. Weinre和Browsersync - 跨設備前端調試