Ionic2入门教程(十)如何debug一个Ionic应用

如何debug一个Ionic应用

系列教程看这里
Ionic2入门教程(一)安装和环境配置
Ionic2入门教程(二)进阶配置:Android打包
ionic2入门教程(三)高仿网易公开课(1)
ionic2入门教程(四)解读目录结构
ionic2入门教程(五)如何使用IonicPage
ionic2入门教程(六)地图服务(谷歌、高德、百度定位)
ionic2入门教程(七)来一个五星评分
ionic2入门教程(八)高仿网易公开课(2)
ionic2入门教程(九)样式修改和主题切换

0、一些调试的方法

1、console.log

console.log("string");//提示信息
console.log(var)//变量值

在控制台输出代码相关的值或信息,你可以通过输出的信息基本判断一些错误。
以chorme为例,F12键,迅速进入开发者模式,点击console,即可查看程序对应输出的相关信息。

Ionic2入门教程(十)如何debug一个Ionic应用

2、检查源代码和元素

使用浏览器的开发者工具,可以检查要素的DOM、样式甚至运行的源代码!

1.Elements & Styling

通过顶部左方的检查当前视图的元素,在界面选择你想查看的元素,能够看到对应的html和css,这个主要是用于调整样式。
这样调试或构建应用程序UI,可以检查DOM元素的顺序和它们的样式,从哪个类来,哪些是被覆盖的。
Ionic2入门教程(十)如何debug一个Ionic应用

2.Source

源码主要是为了在里面设置断点,左边的列表是文件夹,右边展示对应的源码。

Ionic2入门教程(十)如何debug一个Ionic应用

3.断点

断点是调试应用程序最好的方法之一,因为总是打印出你的值是相当费时的。
设置好断点后,进行触发该事件的行为,刷新或者点击或者输入啊啥的,右上方对应调试操作。

Ionic2入门教程(十)如何debug一个Ionic应用

当你把鼠标hover到代码上时,可以显示对应的值。这一步就可以很容易地检查传递给函数的对象,然后传递给视图转换的参数。

Ionic2入门教程(十)如何debug一个Ionic应用

3、检查数据库

在开发工具中导航到应用程序,并在菜单的左侧向下深入到IndexedDB,我们就可以找到该应用程序的实际存储。在这个区域内,我们可以很容易地看到所有的存储数据。我们甚至可以再次检查我们的数据库对象!

Ionic2入门教程(十)如何debug一个Ionic应用

4、远程调试

这一步的前提是打包安装在手机上哦~通常用来调试只有手机上出现的错误,布局和电脑上显示不同或者功能问题

如果你的应用程序运行在模拟器或设备上,你可以使用所谓的远程调试。
因为我们的应用程序运行在webview中,所以我们可以通过连接到我们设备的PC上的浏览器连接到它。
这是Ionic的另一种混合应用的美妙之处。调试真的非常容易!

对于Android

在chorme中输入:chrome://inspect/#devices

Ionic2入门教程(十)如何debug一个Ionic应用

在remote下会出现你的设备,这时候,在手机中打开应用,这时候会出现一个选项,点击inspect即可打开调试界面~
这时候按照前面几种方法来修改样式或者设置断点,不同的是浏览器不再显示界面了,取而代之的是你的手机屏幕~
这个方法的缺点在于需要翻墙,就是inspect后出现白色界面的情况

5、真机调试

adb devices
ionic cordova run android;

https://ionicframework.com/do...

相关推荐