在PC端的开发中我们拥有很多, 但是Mobile端的调试相对比较麻烦一些, 不光要在浏览器上调试, 而且很多都需要在真实的设备上来调试, 设备的类型/制造商/操作系统, 网络环境都会影响Web的调试.
PC上开发
从我的经验来看我一般先是使用Safari的模拟User Agent来开发Mobile Page, 开启Safari, 选择设置, 偏好设置，高级, 显示”开发”工具菜单, 这样你就能在Safari的菜单中看到”开发”了, 然后就可以选择一些User Agent:
但是有时可能还需要模拟Android Safari上的User Agent, 如
Google Nexus One: Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus
Android Tablet: Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; device Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Safari/533.1
只需要选择”Other”把自定义的User Agent输入进去即可.
模拟器上调试
当然Safari的也不比差, 在桌面的Safari开发完成后, 还需要在模拟器上进行调试, iOS的Simulator需要安装, 是用于开发Apple系列产品如Mac, iPhone, iPad上的集成开发环境, 包括IDE, Instruments,以及最新的Mac OS X和iOS SDK.安装完后, 在/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications这个目录下, 打开就可以运行了, 界面如下:
这样你就可以看到底部有Safari的浏览器, 通过打开设置->Safari->开发者->高级->调试控制台, 设置为开就可以打开Safari的控制台了, console.log/console.error的输出都会出现在控制台里面.
Android的Emulator安装请参考
在模拟器上使用HOST文件
使用模拟器通常需要绑定开发环境的host, iPhone的模拟器会使用你Mac电脑的host文件, 这个比较方便, 而Android的Emulator修改host会比较麻烦, 因为它不会使用你本机的host文件, 下面来说一下怎么修改:
1.在android-sdk/tools/目录下启动Android Virtual Device(AVD): emulator -avd myAvdNameHere -partition-size 128
2. adb remount
3. adb push /etc/hosts /system/etc
设备上调试
最后就是设备调试阶段, 同样iPhone越狱的手机可以在Cydia安装这款软件来修改host文件, Android手机同样也有的方法.
对于Mobile上的调试还有一个很有用的bookmark工具, 它是由Google的Steve Souders创建的一个针对Mobile的调试工具列表, 如 , , , , , 等, 其中有些已经集成了(云端Json数据存储平台), 这样就可以很方便地在PC上分析Mobile的数据了, iPhone上的安装请看.
远程调试
刚才说了Mobile上的数据不太好分析, 如果能在PC上调试Mobile上的页面就好了, 所以也出现了很多远程调试工具, 下面介绍几个:
1. , 这是一个很强大的远程调试工具, 是”WEb INspector REmote”的缩写, 通过它你可以在PC上使用Safari的开发者工具来调试Mobile上的页面, 你也可以在线使用或是下载的客户端软件.
2. , 这是一个Javascript命令行工具, 它也提供了远程调试的功能.
3. , Opera浏览器提供的开发者工具, 也很方便, 如果你的网站是需要兼容Opera的话可以试一下.
4. , 建立在和上的Mobile Web调试工具.
5. , 通过USB调试模式和android sdk自带的工具同时使用chrome的开发工具远程调试android上的页面.
6. , 安装了后就可以同步手机设备和PC，然后就可以在PC上远端调试Mobile上的页面。