Ionic 项目调试工具

多款工具帮助你调试ionic项目,方便你的调试工作。

基本调试 (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


编辑中..