【cordova】hybrid app调试(同样适用于移动端浏览器或webview)

前几天发现身边好多人都不知道怎么调试cordova app,调页面的时候改一次看一下,甚至用alert来查看数据的值,这无疑极大地影响了工作效率和工作的心情,在此记录一下调试cordova app的方法,很简单,有需要的同学可以看一下(移动端浏览器或原生app里的webview也同样适用)。

作案工具

1.一部手机(开启了usb调试)
2.一台电脑(装有chrome)
3.一根数据线

操作步骤

步骤简单到令人发指,想分个1、2、3都不知道怎么分

1.确认作案对象,直接打开你的cordova app,开到你打算调试的页面

2.手机和电脑相连(我默认你的usb调试,adb什么的都是弄好了的,如果没有,请直接google或百度),在chrome地址栏里输入chrome://inspect,这里如果是第一次连接,会请求usb调试。
此时pc浏览器里是下面这样的

《【cordova】hybrid app调试(同样适用于移动端浏览器或webview)》 Paste_Image.png

3.点击上图的inspect,进入developer页面,如下

《【cordova】hybrid app调试(同样适用于移动端浏览器或webview)》 Paste_Image.png

4.至此,我们便可以在浏览器里调试了,剩下的就是具体的调试操作了,做过web开发的应该会比较熟chrome调试(然而我不熟。。。)。

常用的一些调试操作

断点调试

点击上面的Source,然后在左边可以找到这个页面对应的js等文件,在代码行前打断点,然后进行操作就可以了(只是大体说一下,如果需要深究的话,可以自行去找资料哦)

《【cordova】hybrid app调试(同样适用于移动端浏览器或webview)》 Paste_Image.png

查看localstorage、数据库等里边的数据

点击上边Resources,左边的列表,一目了然,去探索吧!

《【cordova】hybrid app调试(同样适用于移动端浏览器或webview)》 Paste_Image.png

……

最后有些常见问题

1.有些同学说不行,貌似如果是第一次的话,需要越过祖国母亲的防火墙 – –
悄悄推荐给你们个好用的科学上网软件,免费,速度也可以,叫xx-net,我用了很长时间了,特别稳定,从没出过问题,前提需要有谷歌账号(这东西不随随便便就注册吗←_←),做编程的会科学上网是必须的。

2.关于左侧页面预览窗口,有的手机没有那个窗口,大概就是不支持吧……不过做了更改之后手机页面也会相应改变的,只是选标签的时候就只能在html代码里一点一点找了,稍微麻烦一些。

3.还有些手机确确实实就进不了developer页面,因为它在inspect页面,什么都不显示,我手头个别老手机就是这样。

    原文作者:asAnotherJack
    原文地址: https://www.jianshu.com/p/1c5b307c315a
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞