前面讲完了环境、插件等,剩下的就是开发和调试了,至于开发,这里就不详细论述啦,大家想了解的可以看看angular的相关基础知识。
1,android调试
(1)手机开启调试模式连接电脑,确保是调试模式连接的,一般在设置里面,打开开发者选项,然后开启USB调试模式
备注:如果不知道怎么打开调试模式,可以参考这篇文章http://jingyan.baidu.com/article/046a7b3ee3b565f9c27fa9b2.html
(2)设置chrome浏览器,这里介绍的是--disable-web-security参数。这个参数可以降低chrome浏览器的安全性,禁用同源策略,利于开发人员本地调试。步骤如下:
a,关闭所有的chrome浏览器,新建一个chrome快捷方式,右键“属性”,“快捷方式”选项卡里选择“目标”,添加 --args --disable-web-security --user-data-dir
b,然后启动chrome,如果出现下面黄色的字体就表示成功啦
(3) 电脑chrome浏览器地址栏输入:chrome://inspect/#devices ,会看到如下图的情况(上面会看到你所连接的设备的名称和信息,下面就是当前设备上可以用于在电脑上调试的页面的一下信息,地址、标题、网页大小。。。,如果没有显示设备信息,则表示没有连接好,可以插拔手机或关闭调试模式重开一下);
(4)打开页面进去,会新开一个窗口,可以进入source打断点调试啦!
2,IOS调试
IOS调试目前只是比较简单的看日志方式,一般在安卓上面调试好了,基本上问题比较少了,下面介绍一种比较简单方便的定位方式,如果大家有更好的,欢迎推荐!
(1)首先设置手机的web检查器
设置 -> safari -> 高级 ->开启web检查器
(2)打开mac电脑上safari的开发模式
点击Safari启动浏览器
点击左上Safari标志,选择偏好设置
选择高级,勾选下方的在菜单栏显示开发菜单。
如此,Safari就出现了开发菜单,右键网页元素也会出现查看元素功能了。
(3)打开你要调试的app,跳到要调试的页面