Debugging Mobile Web Page

原文地址：http://adamlu.com/?p=642

Debugging Mobile Web Page

在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的开发者工具也不比Firebug差, 在桌面的Safari开发完成后, 还需要在模拟器上进行调试, iOS的Simulator需要安装XCode, XCode是用于开发Apple系列产品如Mac, iPhone, iPad上的集成开发环境, 包括IDE, Instruments,iOS Simulator以及最新的Mac OS X和iOS SDK.安装完XCode后, 在/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications这个目录下, 打开iOS Simulator就可以运行了, 界面如下:

这样你就可以看到底部有Safari的浏览器, 通过打开设置->Safari->开发者->高级->调试控制台, 设置为开就可以打开Safari的控制台了, console.log/console.error的输出都会出现在控制台里面.

Android的Emulator安装请参考http://developer.android.com/guide/developing/devices/emulator.html

在模拟器上使用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安装mobile terminal这款软件来修改host文件, Android手机同样也有修改host的方法.

对于Mobile上的调试还有一个很有用的bookmark工具Mobile Perf bookmarklet, 它是由Google的Steve Souders创建的一个针对Mobile的调试工具列表, 如 Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, Zoompf等, 其中有些已经集成了Jdrop(云端Json数据存储平台), 这样就可以很方便地在PC上分析Mobile的数据了, iPhone上的安装请看这里.

远程调试

刚才说了Mobile上的数据不太好分析, 如果能在PC上调试Mobile上的页面就好了, 所以也出现了很多远程调试工具, 下面介绍几个:

1. Weinre, 这是一个很强大的远程调试工具, Weinre是”WEb INspector REmote”的缩写, 通过它你可以在PC上使用Safari的开发者工具来调试Mobile上的页面, 你也可以在线使用http://debug.phonegap.com/或是下载Weinre的客户端软件.

2. Jsconsole, 这是一个Javascript命令行工具, 它也提供了远程调试的功能.

3. Opera Dragonfly, Opera浏览器提供的开发者工具, 也很方便, 如果你的网站是需要兼容Opera的话可以试一下.

4. Socketbug, 建立在Node.js和Socket.IO上的Mobile Web调试工具.

5. Remote Debugging with Chrome for Android, 通过USB调试模式和android sdk自带的工具同时使用chrome的开发工具远程调试android上的页面.

6. Adobe Shadow, 安装了Adobe Shadow后就可以同步手机设备和PC，然后就可以在PC上远端调试Mobile上的页面。