cordova應用使用手機調試

對於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，整體仍是很是費時間，還須要找更好的辦法