ADB 实现手机访问电脑上运行的网站，真机调试H5网站

1. 确保准备工作完成

硬件与软件要求

硬件：一台 Android 手机、一根 USB 数据线。
软件：
- 安装 adb工具安装配置及使用教程（超详细保姆详细过程） - cyberarchitect15 - 博客园，其中包含 adb 工具。
- 确保手机已启用开发者模式 且启用 USB 调试功能。

检查环境

在终端中运行以下命令，确认 adb 已正确安装：
复制代码
```
adb version
```
连接手机后，运行以下命令，查看设备是否被识别：
复制代码
```
adb devices
```
如果设备列表为空，请检查 USB 调试是否开启，或尝试更换数据线/USB 接口。

2. 启动本地服务

在电脑上启动你需要调试的本地服务（如 Vue 开发服务器）。假设服务运行在 localhost:8001。

3. 通过 ADB 配置端口转发

使用 adb 的端口转发功能，将电脑上的本地服务映射到手机上。

命令格式

xml 复制代码

adb reverse tcp:<本地端口> tcp:<远程端口>

示例

假设你的本地服务运行在 localhost:8003，运行以下命令：

lua 复制代码

adb reverse tcp:8003 tcp:8003

这会将电脑的 8003 端口映射到手机的 8003 端口。

4. 在手机浏览器中访问

在手机浏览器中输入以下地址：

arduino 复制代码

http://localhost:8003

此时，手机会通过 adb 的端口转发访问电脑上的本地服务。

在PC端edg浏览器中输入以下地址：

bash 复制代码

edge://inspect/#devices

点击：inspect 按钮

此时会弹出与手机浏览器同步的调试页面

5. 验证连接

如果页面正常加载，说明配置成功。你可以像平常一样进行调试。

6. 注意事项

端口冲突 ：如果 8003 端口已被占用，可以更换为其他端口（例如 8080 或 3000）。
服务绑定地址 ：确保本地服务绑定到 0.0.0.0，而不仅仅是 127.0.0.1。例如，在 vue.config.js 中设置：
yaml 复制代码
```
javascript
devServer: {
  host: '0.0.0.0',
  port: 8003
}
```
防火墙设置 ：确保电脑的防火墙允许 adb 和开发服务器的端口通信。

7. 常见问题排查

问题 1：手机无法访问 `localhost`

确保 adb reverse 命令已正确执行。
检查本地服务是否正在运行，并且绑定到 0.0.0.0。

问题 2：端口转发无效

清除所有 adb 转发规则：
lua 复制代码
```
adb reverse --remove-all
```
重新执行端口转发命令。

问题 3：USB 连接不稳定

尝试更换 USB 数据线或接口。
使用 adb kill-server 和 adb start-server 重启 adb 服务。

通过以上步骤，即使手机和电脑不在同一个网络中，也可以通过 adb 让手机访问电脑上运行的网站。