cordova应用使用手机调试

野性酷女 2022-01-06 15:15 308阅读 0赞

对于cordova应用的调试，最方便调试方式还是作为h5应用在浏览器来调试，调试好了再打包cordova应用和打包apk。然而h5应用时的效果跟最终在安卓手机运行还有少数情况会不一样，因此，也需要有能在手机调试的方案

首先，打开vue1的以下文件，修改一下，添加调试常用的debugger和console.log

![181933_Dxxy_1251858.png][]

把vue1的打包配置修改一下，让打包后的js文件尽量保留原样以方便调试时看

修改webpack的生产环境（prod）配置文件

![181939_VLzG_1251858.png][]

注释掉以下内容

PS：注释掉的UglifyJsPlugin用于js打包、压缩、混淆

![181944_zq1B_1251858.png][]

PS：上述修改在调试后要改回来

然后使用build打包（跟一般打包一样）

![181952_YkBn_1251858.png][]

PS：注意，此次打包输出的js文件名称的随机数不会改变，但实际上文件内容是变了。原因可能是开发的js文件内容没变

后面的操作就跟平时一样，最后插上手机开始调试

手机调试开始后，打开chrome浏览器（只能chrome，其他ie什么都不行），点开f12调试，然后在此进入远程设备调试工具

![181957_ydj1_1251858.png][]

最左边找到调试的手机，中间是该设备运行着的程序，最后点右边的inspect开始调试

![182000_iWgX_1251858.png][]

成功后看到如下界面，就可以开始调试了

PS：此处有可能是一个白屏，本博客有解决方式

![182023_2Jv7_1251858.png][]

可以看到可以用debugger打断点，变量值也能看

![182027_kKS1_1251858.png][]

console.log输出也有效

PS：此方法依然比较麻烦，尤其是在修改代码后，vue1要build，拷文件到www，然后cordova run，总体还是非常费时间，还需要找更好的办法

转载于:https://www.cnblogs.com/cannel/p/11074387.html

[181933_Dxxy_1251858.png]: https://static.oschina.net/uploads/space/2018/0421/181933_Dxxy_1251858.png
[181939_VLzG_1251858.png]: https://static.oschina.net/uploads/space/2018/0421/181939_VLzG_1251858.png
[181944_zq1B_1251858.png]: https://static.oschina.net/uploads/space/2018/0421/181944_zq1B_1251858.png
[181952_YkBn_1251858.png]: https://static.oschina.net/uploads/space/2018/0421/181952_YkBn_1251858.png
[181957_ydj1_1251858.png]: https://static.oschina.net/uploads/space/2018/0421/181957_ydj1_1251858.png
[182000_iWgX_1251858.png]: https://static.oschina.net/uploads/space/2018/0421/182000_iWgX_1251858.png
[182023_2Jv7_1251858.png]: https://static.oschina.net/uploads/space/2018/0421/182023_2Jv7_1251858.png
[182027_kKS1_1251858.png]: https://static.oschina.net/uploads/space/2018/0421/182027_kKS1_1251858.png