使用 weinre/spy-debugger 調試手機頁面
文章目錄
很久之前折騰過 chrome 的調試工具,感興趣可以看下這個: chrome 調試手機網頁
可是侷限性太大了：
- 需要是 Android+chrome
- 需要運行在 Android 的 chrome 上纔可以，如果進行微信/其他平臺的 H5 開發並不能很好的調試
- 有牆！實力勸退
使用 weinre 就不存在那麼多限制了，下面的操作是在 window+Andoid 和 window+iOS 都試過，親測 OK！.其他 PC 平臺應該也是大同小異
下載 weinre
#全局安裝weinre
npm install -g weinre
驗證是否安裝成功
weinre -v
# 看到下面的輸出就代表安裝成功了
運行 weinre
weinre --boundHost 192.168.0.105 --httpPort 9999
注：192.168.0.108 最好改成自己的 IP 地址 9999 爲端口號，隨便指定都行
這裏如果不指定 IP 地址，weinre 默認會運行在 localhost:8080上，如果是運行在 locaohost 上，那調試的終端在手機上，那就沒辦法找到對應的鏈接了。所以一定要指定IP
運行服務後的樣子，這會佔用一個終端，這個不要退出，退出就不能用了。根據提示， 打開
192.168.0.105:9999>
打開後會看到：
-
留意我圈起來的地方。這裏有段 script 腳本。放到你需要調試的頁面上（不用考慮跨域之類的問題，放上去就行，這也就是爲什麼之前讓你們一定要指定 IP）
-
其次。調試的頁面需要和你的 PC 在同一個 局域網，不然也是無法調試的。
開始調試
上面的步驟都完成後，打開我最近一張圖，最上面的鏈接：如：http://192.168.0.105:9999/client/#anonymous
看到這個就是有一個終端設備鏈接進來了。
點擊隔壁的 elements 就可以查看 html 代碼了，剩下的就是調試工具發揮了！
weinre 支持調試多個設備。如果有多個設備連接 targets 會有多條鏈接，點擊就可以切換
clients 就是當前調試的設備。
這樣的話無論 H5 在哪個平臺運行，都可以調試了！
文末彩蛋 spy-debugger
對於
weinre使用是挺不錯的，可是如何 debug 線上的問題，總不能每次線上出問題，我們都加入一段 js。然後推上線，在開始排查問題把。於是spy-debugger就顯得特別友好：通過手機代理的方式，自動給頁面注入相應的 JS
spy-debugger github 地址。文檔說的很清楚了，不過這邊還是自己做個記錄
安裝 spy-debugger
也是基於 node 的環境
npm install spy-debugger -g
打開 spy-debugger
- 自定義端口（8888）
# 因爲我青花瓷抓包也是8888端口
spy-debugger -p 8888
手機設置 8888 代理，安裝證書
- 打開 wifi 設置，代理選擇手動 然後根據提示填入本機 IP。代理端口就是 8888 了。
- 安裝證書：訪問 http://spydebugger.com/cert !!注意：這裏一定要連接本地代理後才訪問。不然自動跳轉的都是一些很不雅的頁面。
連接電腦代理才能到達正常的證書下載頁。
安卓下載後安裝.
iOS 要用自帶的瀏覽器訪問，然後打開設置，看到設置會多出來一條安裝證書，點擊安裝即可
微信是打不開這個鏈接的，自行到瀏覽器打開
後續的坑！
安卓手機，即使已經安裝了證書，在普通瀏覽器依舊是無法調試的。因爲的確是證書出了點問題，可是呢，在微信瀏覽器是可以調試的。所以
可以把相關連接複製到微信裏面，通過微信打開
iOS 則不存在這個問題。