chrome瀏覽器遠端除錯移動端Web頁面
1.Android系統的移動裝置
a.開啟 USB除錯模式;具體設定請自行百度;
b.用USB資料線連線手機裝置,並同意這臺計算機進行USB除錯;
c.在瀏覽器位址列輸入chrome://inspect 或者about:inspec;可以顯示出裝置的名稱,在下圖中 ‘2013023’ 即為裝置名稱;
d.在瀏覽器中隨意開啟一個頁面或者在app中開啟一個webview的頁面,出現如下圖所示 點選 inspect 即可除錯
提示:再除錯webview裡的頁面的時候,若無法顯示出webview中開啟頁面的連結,則需要在app內設定 setWebContentsDebuggingEnabled 的值為 true
2.ios系統的移動裝置
使用ios-webkit-debug-proxy來配置除錯,詳細介紹請參考官方說明 https://github.com/google/ios-webkit-debug-proxy/
這裡只介紹在windows系統上的安裝除錯
a.安裝scoop,安裝scoop之前檢查Windows PowerShell 的版本,並確保版本不低於3
在系統的搜尋中輸入 Windows PowerShell ,出現類似命令列的視窗,再輸入 $PSVersionTable.PSVersion 命令, 即可看到版本號(箭頭指向的位置)
版本號為5,然後輸入 iex (new-object net.webclient).downloadstring('https://get.scoop.sh') 即可下載安裝
安裝完成會有success的提示
b.接著輸入
scoop bucket add extras
scoop install ios-webkit-debug-proxy
若要解除安裝 ios-webkit-debug-proxy 使用 scoop uninstall ios-webkit-debug-proxy 命令
c. 安裝完成之後,按照輸入如下命令即可
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
d.在瀏覽器位址列輸入localhost:9221