环境准备

如果要调试,可以使用快捷打包模式生成App,默认就是调试模式;使用打包服务器打包的话,一定不要勾选“发布模式”选项。android4.4以及以上版本,勾选或不勾选增强型浏览器选项都可调试,android4.4以下版本必须勾选增强型浏览器选项才可调试。

通过上面的步骤生成App并安装到手机上,接下来介绍如何使用电脑调试。

Android

可以使用Windows系统或者Mac OS X系统,这里以Windows系统为例。

1. 安装chrome32以及以上版本。3.2.1版本开始,已经自带浏览器,点批处理“启动Chrome浏览器”即可启动,或者studio中选中.w用浏览器运行会自动启动。

2.打开手机的USB调试选项,在系统设置的开发人员选项里面 。android 4.2以及以上版本如果系统设置里面没有开发人员选项,可以找到设置内关于里面的“版本号”,并连续点击N次,这样设置里会多出开发人员选项。

3. 用数据线把手机和电脑进行链接,系统会识别出手机,可以在我的电脑管理里面看看设备管理器中有没有未识别的USB设备,如果没有,那说明驱动正常,如果有感叹号,建议安装XX助手、豌豆荚之类的,会自动安装驱动。

4. 打开手机内安装好的应用,并打开需要调试页面。

5. 在启动好的chrome内输入

chrome://inspect/#devices

1)如果驱动没问题,页面中会列出手机型号和显示打开的页面,点inspect就可以打开监控页面,这样就和调试普通web页面一样调试WeX5写的页面了。如下图所示:
aaaa

2)如果驱动没问题,页面不会列出手机型号和显示打开的页面,需要科学上网。如下图所示:

true

科学上网可选择XX-Net工具或其他。
6. 如果使用的是3.2.1并用了自带的浏览器,并且上上面页面中显示的是chrome30, chrome33, chrome36, chrome39, chrome42版本,那跳过本步骤,否则需要学习爬墙技术。由于某特色,这里需要做点技巧以保证正常访问google的服务器。可以使用hosts替换dns方法来解决,步骤为:

a. 复制C:\Windows\System32\drivers\etc下的hosts到桌面

b. 用记事本打开hosts文件,在最后增加

    203.208.46.178 chrome-devtools-frontend.appspot.com

由于ip不定期会访问不了,自行百度ip并测试下是否可以ping通,然后替换。

c. 复制桌面上的hosts文件到C:\Windows\System32\drivers\etc
这里先要复制出来在复制进去是由于Windows7以及以上系统的安装策略导致不能直接修改,WinXP的化可以直接修改。

IOS

IOS必须使用Mac OS X下的Safari,在Windows下的Safari在2012已经停止开发,不支持调试。

1. 设置手机允许调试。在手机的设置里面

关闭:设置\Safari\不跟踪

打开:设置\Safari\高级\Web检查器

2. 设置Safari允许调试。打开Safari\偏好设置

Safari打开调试选项

3. 手机打开安装好的应用,并打开需要调试的页面

4. 启动Safari,在菜单中的IOS Simulate中选择对应的页面即可调试

打开移动设备调试页面

参考资料:

https://developer.chrome.com/devtools/docs/remote-debugging

http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-web-inspector.html