用Chrome和android SDK远程调试移动端页面

准备：

JDK，猛击我下载

Android SDK，猛击我下载

PC上的Chrome（17.0.963.66以上，因为我自己的是17.0.963.66，嘻嘻），猛击我下载

移动端的Chrome，自己搜自己的吧

开始：

一．安装JDK，详细步骤见地址，这里就不详细展开啦，猛击我看步骤

二．安装Android SDK

下载Android SDK：猛击我下载

安装Android SDK：有两个地方要注意。一是到了下面这个界面的时候，等待一下，直到它找到自己的JDK为止：




另外，安装的时候记下自己安装的路径，稍后有用。

安装完Android SDK后，打开Android SDK Manager，安装Android SDK Platform-tools，如下图。如果网速太慢，可以到这个地址下载，猛击我下载（是platform-tools文件夹的压缩包），下载后解压到安装目录下即可




配置path环境变量：在对应值后追加;<sdk>/platform-tools
其中<sdk>为你的安装路径




在cmd下输入命令adb,看到如下相关信息，表示配置成功




三．移动端设置：

打开系统的USB调试功能：设定/设置（——应用程序设置）——开发——勾选“USB调试”

打开移动端版本的Chrome：设置——开发者工具——勾选启用USB网页调试，然后随便打开一个网页。

四．连接：

进入C:\Windows\System32\drivers\etc,编辑hosts文件（可用记事本打开），添加如下配置
203.208.46.178 chrome-devtools-frontend.appspot.com，如图


为什么要追加一条配置呢？因为原来的地址是会被和谐，而这个IP是北京Google的，貌似我们的远程功能要连接google去下载something。

用你的数据线把移动端和PC连起来

打开cmd，输入命令adb devices，成功找到设备如下图：




输入命令adb forward tcp:9222 localabstract:chrome_devtools_remote（或是 添加chrome快捷方式到桌面，修改目标：<path>\chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile）

打开PC端的Chrome，输入网址：http://localhost:9222/（大家可能留意到9222是因为上面的命令而设置的，所以这个端口是可改的^_^）

如果你看到以下界面，表示你和手机连接基本没问题了




点击那个小框后，耐心等待等待。。。。。。




当你看到如下界面时，恭喜你，你成功了！！！欢乐去吧！！！