ADB 实现手机访问电脑上运行的网站，真机调试H5网站1. 确保准备工作完成硬件与软件要求硬件：一台 Android

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

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

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

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

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

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

adb reverse tcp:8003 tcp:8003

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

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

http://localhost:8003

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

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

edge://inspect/#devices

点击：inspect 按钮

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

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

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

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

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