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