移動端webview調試


問題所在點:明明自己在chrome瀏覽器上寫代碼寫的好好得,可是一到了手機得webview里面就各種不行,原因是兼容性導致報錯致使運行失敗。找不到原因只能一步步彈窗提示,大大增加了開發得時間。經過一小波小游戲開發,安利下總結得移動端webview調試技巧。

安卓手機+windows調試

需要條件:1.安卓開發人員需要對你頁面調試得webview添加setWebContentsDebuggingEnabled得靜態方法。

              2.windows電腦可以翻牆或者安裝chrome-inspect離線開發者工具包

                     翻牆工具:https://www.jb51.net/softs/600864.html

                     chrome-inspect離線開發者工具包:http://www.cnblogs.com/slmk/p/7591126.html

              3.手機連接電腦,開發者選項,打開usb調試,電腦正常安裝手機驅動。

做好提前准備后,在手機chrome中訪問網頁或者打開開啟setWebContentsDebuggingEnabledchrome方法得webview,chrome瀏覽器訪問chrome://inspect/#devices

 

可以看到有手機得型號,下面是可以調試得網頁,點擊inspect

 

可以看到跟在chrome瀏覽器調試差不多得環境,這樣就很方便調試啦

問題:1.可能會遇到調試斷掉得情況,這個東西還沒有那么穩定

        2.點擊inspect打開得是空白頁,那基本上就是不能翻牆或者離線開發包得問題

iphone+mac調試

需要條件:1.調試app內嵌webview必須是ios銅須使用xcode打的包,線上得不行

第一步:打開蘋果手機 設置 > Safari瀏覽器 > 高級 ,打開javascript和Web檢查器

 

第二步: 打開 Mac 上的 Safari瀏覽器 > 偏好設置 > 高級,勾選在菜單中顯示“開發”菜單

 

第三步: 用數據線連接你的 Mac 電腦和蘋果手機,並選擇信任設備。然后在手機的 Safari瀏覽器 中打開你需要調試的頁面,並在電腦上點擊下圖紅框的位置。

 

第四步:點擊之后就會出現如下圖所示的。

 

iOS + windows 調試

npm install remotedebug-ios-webkit-adapter -g
remotedebug_ios_webkit_adapter --port=9000

  

大概率會顯示

remotedebug-ios-webkit-adapter failed to run with the following error: ios_webkit_debug_proxy.exe not found. Please install 'scoop install ios-webkit-debug-proxy'

  

然后你運行

scoop install ios-webkit-debug-proxy

  

大概率會顯示

scoop : 無法將“scoop”項識別為 cmdlet、函數、腳本文件或可運行程序的名稱。請檢查名稱的拼寫 ,如果包括路徑,請確保路徑正確,然后再試一次。

  

安裝 scoop 

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

  

然后測試下安裝 輸入 scoop help

小概率報錯,請將 scoop 添加到 path

然后啟動 remotedebug 即可

remotedebug_ios_webkit_adapter --port=9000

  

打開 chrome://inspect/#devices,並添加對應的監聽端口

 

在 Remote Target 里面可以看到待監聽的頁面,點開調試即可


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM