對於cordova應用的調試,最方便調試方式還是作為h5應用在瀏覽器來調試,調試好了再打包cordova應用和打包apk。然而h5應用時的效果跟最終在安卓手機運行還有少數情況會不一樣,因此,也需要有能在手機調試的方案
首先,打開vue1的以下文件,修改一下,添加調試常用的debugger和console.log
把vue1的打包配置修改一下,讓打包后的js文件盡量保留原樣以方便調試時看
修改webpack的生產環境(prod)配置文件
注釋掉以下內容
PS:注釋掉的UglifyJsPlugin用於js打包、壓縮、混淆
PS:上述修改在調試后要改回來
然后使用build打包(跟一般打包一樣)
PS:注意,此次打包輸出的js文件名稱的隨機數不會改變,但實際上文件內容是變了。原因可能是開發的js文件內容沒變
后面的操作就跟平時一樣,最后插上手機開始調試
手機調試開始后,打開chrome瀏覽器(只能chrome,其他ie什么都不行),點開f12調試,然后在此進入遠程設備調試工具
最左邊找到調試的手機,中間是該設備運行着的程序,最后點右邊的inspect開始調試
成功后看到如下界面,就可以開始調試了
PS:此處有可能是一個白屏,本博客有解決方式
可以看到可以用debugger打斷點,變量值也能看
console.log輸出也有效
PS:此方法依然比較麻煩,尤其是在修改代碼后,vue1要build,拷文件到www,然后cordova run,總體還是非常費時間,還需要找更好的辦法