欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

如何利用Chrome devTools调试android手机上的web网站?

shiping1 的头像

遇到问题  见 http://shipingzhong.cn/node/3646 肯定有大用


如何利用Chrome devTools调试android手机上的web网站?

时间:2013-10-28 作者: 小儿猫儿 阅读次数:46

内容提示:google官网即可下载。   2、电脑系统安装了最新版的Chrome 最新版Chrome,确保开发者工具正常使用   3、Android手机装了USB驱动 在设备管理器查看是否正确安装了驱动,如无,则需要到手机的官网下载,例如:小米1S的驱动http://bbs.xiaomi.cn/thread-121613-1-3.html     【...

遇到问题  见 http://shipingzhong.cn/node/3646 肯定有大用


 【准备】

1、在Android手机上安装Chrome( Chrome for Android 

应用超市、或者google官网即可下载。

 

2、电脑系统安装了最新版的Chrome

最新版Chrome,确保开发者工具正常使用

 

3、Android手机装了USB驱动

在设备管理器查看是否正确安装了驱动,如无,则需要到手机的官网下载,例如:小米1S的驱动http://bbs.xiaomi.cn/thread-121613-1-3.html



 

 

【开始】

一、安装Android SDK

下载Android SDK,地址:http://developer.android.com/sdk/index.html,本人的机器是windows,下载的文件为adt-bundle-windows-x86,解压并释放到D:/soft/android/adt(你也可以选择其他路径)

 

二、允许Android 手机启用USB调试

1、android系统设置:“设置”》“开发人员选项”》“USB调试”;

2、手机上Chrome浏览器设置:打开Chrome浏览器,点击左下角菜单按键,“设置”》“开发者工具”》“启用USB网页调试”

 

三、运行Android SDK

1、设置环境变量:右击“我的电脑”》“属性”》“高级”》“环境变量”》编辑“PATH”变量值,在末尾添加“;D:\soft\android\adt\sdk\platform-tools”

 

2、运行adb

打开cmd,输入如下命令:

adb forward tcp:9222 localabstract:chrome_devtools_remote

 详情如图:

 

四、调试

 

1、在手机上用Chrome打开需要调试的网站

 

2、在电脑上用Chrome打开http://localhost:9222/,如图所示:

 

 

3、调试

点击需要调试的网站,熟悉的Developer Tools就出来了,如图所示:

 

 【完成】

至此,利用Chrome在android手机上调试网站的方法告一段落。

 

更详细的方法请看:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

 

更多的资料请参考:

http://www.html5rocks.com/en/mobile/profiling/

 

 

 

 

原标题:如何利用Chrome devTools调试android手机上的web网站?

本文地址:http://www.rrzhai.com/p/15962(转载请注明出处)


来自 http://www.rrzhai.com/p/15962
普通分类: