使用Android模拟器进行前端开发与前端调优

上一篇介绍了模拟器在移动版页面兼容性测试中的应用。 更进一步地, 我们常常希望能在开发过程中实时预览提高开发效率 或者在网页遇到性能瓶颈时利用强大的开发者工具寻找优化方案。

Android 提供了remote debugging 功能, 可通过Chrome for Android启用USB网页调试来实现以上预想。 常规的做法是 实体设备通过USB连接PC, 成本较高。 延续上一篇的思路, 我们可以用模拟器虚拟出Android 系统环境, 然后安装Chrome for Android 进行调试, 这就是本文所介绍方法的实现原理。

偶然了解到的信息更激起了郭郭了解虚拟化技术与Web开发结合点的兴趣, 也明确了研究目的:利用虚拟化技术, 使用软件模拟出真机环境取代硬件设备。 在不影响调试效果的前提下, 降低开发时间和资金成本。当然,如果是想通过拉更多的人力、服务器、设备资源来彰显公司上层对自己部门/项目的重视程度就不是以下内容要讨论的范围了。

恰好利用这两天年假空闲,在家深入了一下ADT。

接下来说说具体的实现步骤 和本人实践中偶得的技巧。

使用过ADT的同学都应该能感到模拟器的“慢一拍”, 这是由于ADT自带的系统镜像模拟的是ARM内核的实体机, 且默认不开启宿主机硬件加速无法利用GPU等硬件资源。对于Intel CPU或显存配置高的PC, 通过开启这两项, 可以显著提升虚拟机运行速度。

关于使用英特尔® 硬件加速执行管理器(英特尔® HAXM)加速模拟器运行的资料:英文 | 中文

以上文章对操作步骤的描述都很详细, 本文就不赘述了, 这里假设你已完成HAXM的安装。 接下来依旧是多图杀猫

1.CPU-ABI选择Intel Atom(x86),同时勾选“Use Host GPU”

2.Fast virt模式启动模拟器,启动完成后可关闭eclipse 减少内存占用

 

3.下载安装包(英特尔X86架构处理器版Chrome手机浏览器), 解压后通过adt install 命令安装到模拟器虚拟出的系统中

 

5.开发者工具-勾选“启用USB网页调试”

6.端口转发(通过adb forward 命令)

7.Chrome打开local:9222(解决无法打开*.appspot.com链接的问题)

 

8.使用Chrome桌面版的开发者工具调试模拟器中的Chrome移动版网页-审查元素

 

9.使用Chrome桌面版的开发者工具调试模拟器中的Chrome移动版网页-资源面板

 

10.使用Chrome桌面版的开发者工具调试模拟器中的Chrome移动版网页-network面板

 

11.使用Chrome桌面版的开发者工具调试模拟器中的Chrome移动版网页-资源面板

 

12.使用Chrome桌面版的开发者工具调试模拟器中的Chrome移动版网页-时间轴面板

 

14.Fiddler设置:Tools-fiddler options下的Connections选项卡, 勾选“Allow remote pomputers to connect”

15.设置-更多…-移动网络-APN-修改接入点-填写本机IP及fiddler设置的端口8888(比修改“手机”host方便不少)

分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理