如何通过Chrome远程调试android设备上的Web网站

Posted 2020-09-22 成功路上没有捷径，哪有不付出汗水得来的收获!

网上的帖子很多，但很多都是老版本的，试过了，根本不管用，花了一天时间，终于在本机试验通过了，特记录下来，以备用。有需要的朋友也可以参考。先上一张图，看看PC端chrome上调试的效果：

左边是手机的模拟操作器，右边是大家熟悉的开发人员工具，也可以在手机上操作，PC端左边屏幕会同步到手机上的界面。

下面再说一下环境配置：

1.手机端，我手机是华为荣耀4，android4.4.4，很旧的手机了，大家别笑话，但不影响本次试验。安装chrome版本为58.0.3029.83；

2.PC端，win7 64位系统，安装chrome版本为 59.0.3071.86（正式版本） （64 位）。

其实这些都不是重点，下面说一下最折腾人的地方,就是手机插上usb线之后，驱动的问题。开始一直提示adb驱动失败，找不到adb驱动程序。网上找了一大堆的文章，都无法解决问题。

现将驱动分享到这里，链接地址为：http://pan.baidu.com/s/1qYdPQGk 密码：ksw7 ，大家可以直接下载解压缩后，在设备管理器下面，找到驱动失败黄色感叹号的那一项，右键更新驱动程序，选择解压缩后的文件夹，下一步之后自动完成驱动安装。

好了，到了这里，算是成功了一般。好家伙，就这个，耽搁了我半天时间。

接下来，就是需要配置手机usb调试和PC端chrome设置了。

开启 Android 设备的 USB 调试

具体如何打开开发人员选项，大家可百度了，也可以参考这里：http://jingyan.baidu.com/article/ca41422fe156241eae99eda5.html

还有就是USB连接方式，我这里选择的是PC助手，其他的机型可能叫法不一样，大家可以都试试。

 

这里设置好之后，手机端基本上不需要再设置什么了。接下来回到PC端。

打开chrome浏览器，F12打开开发人员工具，按照下图红色圈中的方式操作即可：

 

 由于我这里已经和设备连接成功过，所以在右侧Remote devices中，有显示设备名称：CHM-CL00，并且设备状态是Connected。如果是第一次连接，或者没有连接成功，会是以下内容：

 

 这个时候，一般来说，在手机上会有一个是否允许USB调试的提示。如果没有此提示，请多次尝试拔掉usb连接线，重新插上，也可以按照官方的操作方式，撤销USB调试授权，然后拔掉usb连接线，重新插上试试看。

以下是usb调试授权提示：

 

确定授权后，在开发人员工具右边，remote device中，就会显示设备连接成功了：

 

 好了，接下来就是开始调试了。

点击Connected选项卡，会在右边显示设备名称，以及移动设备中chrome的版本号。如下图所示：

在New tab后面的文本框中，输入我们需要调试的网站网址，例如：http://www.baidu.com,然后点击open按钮，此时，百度的网址会出现在“打开新的标签页”的下方。

 

此时，在手机端打开chrome浏览器，http://www.baidu.com网站已被自动打开。此时，我们在PC端开发人员工具，Remote devices的Connected选项卡中，点击http://www.baidu.com网址后面的Inspect按钮，会打开一个新的窗口，该窗口即为我们一开始看到的远程调试android设备的界面。

好了，到此设置大功告成了，接下来就是调试了。

 

祝各位顺利配置成功！

最后，奉上官网的配置设置，需要翻墙哦，大家都懂的。

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?refresh=1