使用chrome的Devices调试移动端Web遇到的一些问题

移动端web开发我一般使用VCsonole和chrome://inspect/#devices这两种方式进行真机上的调试。下面介绍一下使用chrome进行真机上的调试：

1. 电脑安装adb

adb包下载:

• win
• mac

使用命令cd到进行解决的adb驱动，执行./adb start-server

2. 开启手机的USB调试

手机连接电脑，打开USB调试（文件传输）

3. 用chrome的devices进行调试

在chrome浏览器中输入chrome://inspect/#devices，打开如下界面:

image.png

如果已经连接了手机并且开启USB调试，界面应该如下:

image.png

这个时候点击inspect就会跳出模拟调试界面

一些常见的问题

1. 点击"inspect"打开的调试界面为空白问题？

解决方式： 第一次加载需要安装一些google的依赖，需要翻墙解决

2. 无法启动adb，有如下图报错

image.png

解决方式: 先关掉adb进行, 执行如下命令:

./adb kill-server
./adb start-server

3. 点击连接无法打开chrome://inspect/#devices, 浏览器出现如下提示 ：

image.png
解决方式: 确认地址是chrome://inspect/#devices，而不是https://chrome//inspect/#devices