Language Selection

简体中文English
Home About Us Developers' Blog Debugging Mobile Web Page
Monday, 26 March 2012 06:22

Debugging Mobile Web Page

Written by  Zhang Jiachao

在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.jsSocket.IO上的Mobile Web调试工具.

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

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

About Us Portfolios Technical Competence News & Blog

 

Founded in 2009, EveBit Digital, a CMMI3 Certified Company, has grown to become one of China’s foremost PHP Outsourcing Companies.

As professionals, we specialize in delivering sophisticated PHP Solutions and Websites custom-designed to meet each client’s unique requirements using Open Source Technologies, including Zend Framework, Magento, Joomla!, TYPO3, Drupal, WordPress and Android / iOS for Mobile Applications.

Under the guidance of our Certified Zend and Magento Engineers, we employ the very best web technologies available for eCommerce Solutions, Content Management Systems (CMS), Custom Applications, Mobile Internet and Integrated Business Systems.

Email: info[AT]evebit.com  Phone: +86-27-82701147  Online Inquiry: Send your inquiry by Inquiry Form

CMS Professionals

Our team provides full levels of CMS solutions from personal blog, small firm brochure to news portal and eCommerce. We are the few company in the world, who delivered commerical projects for all the major PHP based CMS systems such as WordPress, Joomla!, TYPO3 and Drupal.

Web to Mobile solutions

Starting from PHP, covering web and mobile; we offer a complete suite of tools and services to build / upgrade cross-platform browsing experiences on CMS and eCommerce systems. We have helped clients deployed Joomla! and Magento based projects not only on web, but also as android and iOS applications.

Magento Professionals

We've built a reputation for expertise with Magento, the most sophisticated eCommerce platform. We offer an end-to-end service from stunning designs to seamless integration with ERP and payment gateways. From 2012,  five of developers passed the Magento Certified Developer, which more than any company in China.

Zend Certified Professional

EveBit Digital has a large team worked with Zend Framework in a number of different contexts, such as bespoke applications and collaborated on enterprise-level projects with organisations and governments; some of our engineers passed the most authoritative Zend Certified Engineer.

Our Associations

Click on the logos below to find out more about our awards, accolades and professional associations.

Copyright © 2012-2015 EveBit Digital  All Rights Reserved.
武汉伊锐数码技术开发有限公司  版权所有  鄂ICP备13005424号