使用chrome浏览器真机调试H5
开始远程调试之前,需要做好如下准备:
- 在你电脑上安装Chrome 32 或者更新的版本
- 一根连接Android设备的USB线
- 手机系统是Android 4.0+ 并且在手机上安装Android版本的Chrome浏览器。
重要:pc端的浏览器版本要比移动端的浏览器版本低
Remote browser is newer than client browser. Try `inspect fallback` if inspection fails.
远程浏览器(手机端)比客户机(pc端)浏览器更新。如果检查失败,尝试“检查备份”。
不然的话出不来inspect fallback
这个按钮,使用inspect
会报错http/ 1.1 404 not found

image.png
设置Android手机参考地址: https://jingyan.baidu.com/article/5552ef47b11479518ffbc92e.html
在Android手机上选择 设置>开发人员工具>USB调试,然后会弹出一个提示框“是否允许USB调试”,选择 **
连接并且发现手机
用USB线连接手机和电脑,然后在chrome浏览器中去找到手机。
usb连接方式选择:传输文件或者MIDI(这两个都试试,不太确定是哪个)

image.png

image.png
在电脑上的chrome浏览器中,导航到chrome://inspect**,确认 Discover USB devices 是选中状态,并且可以看到已经发现我的COL-AL10:
Prot forwarding 设置本地地址和端口号

image.png

image.png
在chrome上准备好调试网站
将要调试的网页链接打开

image.png
在弹出的窗口就可以远程调试手机上面的效果,调试的过程中保持手机屏幕始终不要关闭。

image.png