用Mac的chorme调试安卓手机的webview的各个踩坑

背景

今天下午搞这个真机调试给我恶心到了，一直有卡点😭，所以打算写这篇文章来帮大家避一些坑，希望有帮助

设备

• 手机：realme(安卓)
• 电脑：M4pro
• 浏览器：chrome
• 连接方式：typec有线连接

接下来我先说一下正常的步骤，然后过程中有卡点的地方，会标注出来

涉及公司or个人的隐私信息已打码

操作步骤

其实主要是电脑和手机连接会出问题，连接OK之后，正常调试就行了

1. 在Mac的chrome打开 chrome://inspect/#devices ，
   勾选打开 Discover USB devices 和 Discover network targets
2. 准备一个连接线，连接mac和手机，我准备的是一个两头都是typec的连接线
3. USB连接选择 传输文件 ,不要选 “仅充电”
4. 手机打开开发者模式，然后进行各个关键配置
   大多数安卓手机，进入开发者模式，都是 设置->关于本机->版本信息, 连击版本号7次（7次之后可能还会让你输锁屏密码），完成之后就会进入开发者模式，就可以看到开发者选项，把最重要的这两个选项打开
5. 这个时候，chrome://inspect/#devices 页会如图显示 待认证，这个时候说明手机和mac连接线连接ok，只是没有完成认证
6. 完成认证，如果运气好的话，刚刚在打开 USB调试 时，手机上就会有授权弹窗，此时点击允许就行

如果没有弹窗，可以试试以下做法，这也是最卡我的地方😭：

1. 手机管家这些里面可能有拦截，设置里面搜一下，给关闭了
2. 连接过久，把连接线重新连一下
3. mac上用adb devices 命令手动发起一下授权

如果还没装 adb命令，可以先下一下:

brew install android-platform-tools

然后手动执行一下adb devices就可以主动让手机弹起授权窗
像这样chrome调试页上展示了手机型号，就说明连接OK

5. 选择要调试的webview页

6. 点击inspect即可弹出devtool，然后沿用web的方式进行调试。