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

时间:2021-01-04 03:13:59

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

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

左边是手机的模拟操作器,右边是大家熟悉的开发人员工具,也可以在手机上操作,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 调试

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

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

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

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

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

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

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

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

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

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

以下是usb调试授权提示:

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

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

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

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

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

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

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

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

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

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

祝各位顺利配置成功!

最后,奉上官网的配置设置,需要FQ哦,大家都懂的。

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