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，即可查看程序对应输出的相关信息。

2、检查源代码和元素

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

1.Elements & Styling

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

2.Source

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

3.断点

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

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

3、检查数据库

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

4、远程调试

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

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

对于Android

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

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

5、真机调试

adb devices
ionic cordova run android;

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