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

一、安装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，输入如下命令：
Command代码
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/

F12打开开发者工具，点击左上角手机图标（第2个）
然后选择手机类型、屏幕尺寸，即可模拟web网站在
不同手机上的显示效果。