問題所在點:明明自己在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 里面可以看到待監聽的頁面,點開調試即可