1. 程式人生 > >chrome瀏覽器遠端除錯移動端Web頁面

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