ionic调试方法总结

您可自由转发此文， 但请保留出处：Ionic在线学习网站 http://www.ioniconline.com

1. 使用ionic serve本地搭建环境(推荐)

在项目目录下(有www文件夹的目录)执行ionic serve,会显示localhost，在电脑浏览器中输入localhost即可打开调试界面，Firefox浏览器可以安装firebug来调试，chrome建议使用自带调试工具，默认F12可显示调试窗口。此种方法最为便捷，修改了代码，调试界面会自动改变。但是也有一定的局限性，有些必须在真机上调试的内容使用该方法就比较麻烦：例如调试需要调取相机接口的应用或者使用$cordovatoast插件时只有在真机上才会显示，在浏览器上会报错。

2. 使用weinre调试

2.1 weinre工作原理

Debug客户端（client）：本地的WebInspector，远程调试客户端。

Debug服务端（agent）：本地的HTTPServer，为Debug目标页面与Debug客户端建立通信。

Debug目标页面（target）：被调试的页面，页面已嵌入weinre的远程js。

客户端、目标页面与Debug服务端之间使用XMLHttpRequest (XHR)进行HTTP通信，你通常的使用情形是将Debug客户端与服务端搭建在桌面开发环境，Debug目标页面放在移动设备。

2.2 weinre的安装

weinre 的调试服务器是基于 Node.js 实现的，因此在安装 Weinre 之前先要安装 Node 运行环境。

使用二进制包安装的命令如下：

npm -g install http://example.com/path/to/apache-cordova-weinre-X.Y.Z-bin.tar.gz

还可以通过 Node 包管理工具安装：

npm -g install weinre

2.3 weinre的使用

weinre --boundHost -all-

就可以启动weinre，默认的端口是8080，也可以指定端口

weinre --boundHost -all- --httpPort 8081

服务器启动后，使用webkit内核浏览器(chrome、safari)访问 http://localhost:8080/，不出意外的话可以看到weinre的基本信息。为了让需要调试的页面被weinre检测到，需要添加Debug Target。在调试的页面中增加一个js(可参考Target Script中的Example)：

http://localhost:8081/target/target-script-min.js#anonymous

添加后在移动设备中访问该页面即可。

回到http://localhost:8080页面，点击“debug client user interface:”链接进入weinre的Debug界面，如果成功添加了Debug Target，这里可以看到它。

接下来我们就可用自己熟悉的方式调试页面了，并且调试结果会实时显示在移动设备上

3. 使用chrome的inspect调试

打包android的apk文件，并安装到手机。打开手机的开发者模式，访问电脑chrome的 chrome://inspect ， 点击要inspect的app，会打开熟悉的chrome developer tool.点击inspect，打开chrome debugger tool.

4.其他调试工具

4.1 GapDebug

https://www.genuitec.com/products/gapdebug/

4.2 PhoneGap Developer App

http://app.phonegap.com

4.3 Ionic View

http://view.ionic.io/

您可自由转发此文， 但请保留出处：Ionic在线学习网站  http://www.ioniconline.com