一、使用浏览器帮助调试ionic生成的页面
我们在开发ionic项目的时候，经常会出现，页面效果出错，没有达到预期的效果，包括元素的css属性等不满意的地方。我们就可以使用浏览器的调试功能来查看页面布局代码，并实时动态调整。我们开发原生Android的时候，可以动态的看到预览。同样的。在开发ionic应用的时候，我们都是使用浏览器来查看效果的。知识，浏览器给我们提供了一个非常好用的调试功能，帮你快速的查看页面布局元素，以及找出布局问题。（简直比原生开发Android的界面布局调试都方便很多）。
下面更具我的经验，简绍一下使用方法和功能：
1. 一般我们使用ionic的浏览器调试命令，就可以查看效果。再我切换到ionic2的时候，使用体验就更好。 每次修改项目代码，就会被监测到，并重新编译，并在浏览器自动刷新。调试起来非常方便。在浏览器调试的命令是：ionic serve
2. 接下来就是调试，只要在浏览器页面点击键盘的F12就可启动调试界面。在调试界面我们可以查看网页元素，命令行，等，我们修改页面的时候，一般是看element（元素）选项里面的html元素布局。以及对应的css布局参数。
我们编写的页面布局代码，经过ionic解析，生成真正浏览器可以解析的html代码。通过调试模式，我们可以看到真正的代码布局以及标签事实上使用的css属性。，从图上可以看到，小三角，点击小三角展开，我们就可以看到子选项，而且我们鼠标放在选项上，对应的页面就会变蓝，非常清楚的告诉我们每个标签在网页中的位置布局。给我们调试非常方便高效的体验。
二、使用浏览器查看别人项目的界面布局
由于ionic以及react项目是动态通过代码生成网页页面，index.html文件里只有打包好的js和css。因此，我们打开别人项目的时候，看不到静态的布局代码。只看看到一大片的js代码，和css文件。那么对于我们想要参考学习人家界面布局的时候很困难。那么我们其实可以借助浏览器的调试功能更，查看到人家界面的布局。当然，我们看到的是解析过的html代码，里面糅合了ionic库的很多东西。所以我们只能大概了解布局实现。还是不可以直接得到人家的源代码。（因此呢，ionic做的软件，安全性还是很好的）