Ionic 项目调试工具

Android 其它调试工具见：http://blog.csdn.net/ioniconline/article/details/50162685

转自：http://www.ionic-china.com/doc/ionic-debug.html#Safari

• Windows调试
• 基本调试Chrome Developer
• 远程调试Remote Debugging
• 插件数据模拟Cordova Mocks
• Angularjs调试插件Batarang
• 移动端预览PhoneGap
• Mac调试
• Xcode
• Safari

基本调试 (Chrome Developer)

---

F12/更多工具-开发者工具
最常用的调试方式建议配合 Cordova Mocks/ Batarang插件


工具下载：

插件数据模拟 (Cordova Mocks)	百度下载Github下载
Angularjs调试插件 (Batarang)	百度下载
移动端预览 (PhoneGap)	百度下载官方下载phonegap.apk国内下载phonegap.ipk苹果下载

远程调试 (Remote Debugging)

---

Chrome自带的远程调试WebView
必备条件
1.Android 4.4+ 已上
2.尝试ping appspot.com不通则需要"翻墙"
2.手机开启USB调试(开发者模式)

手机数据线连接电脑
Google Chrome打开
chrome://inspect/#devices或 更多工具 – 检查设备
手机运行ionic项目(Debug编译)

找到我们的项目点击 inspect

点击Screencast图标,可以开启Screencast视图

插件数据模拟 (Cordova Mocks)

---

因为浏览器没有硬件接口所以当我们调用ngCordova插件后在浏览器调试将出现如下错误


安装插件后



Cordova Mocks支持的插件

• Barcode Scanner
• Camera
• Contacts
• Device Motion
• Device Orientation
• Device
• Dialogs
• File
• Flashlight
• Geolocation
• Globalization
• Network Information
• Vibration

Angularjs调试插件 (Batarang)

---

安装后显示在开发者工具最后标签

模版Scope

性能

依赖关系

元素属性

移动端预览 (PhoneGap)

---

使用PhoneGap我们可以在 ios/android上快速预览我们的项目(PhoneGap支持部分插件)
注意：PhoneGap不能识别中文项目名

ios/android连接wifi 输入ip:端口 点"连接"即可

Xcode

---

编辑中..

Safari

---

编辑中..