react h5网站如何真机测试

使用 Chrome 远程调试（Android）

确保手机和电脑在同一局域网，打开手机开发者选项中的 USB 调试 和 USB 安装。通过 USB 连接电脑，在 Chrome 浏览器地址栏输入 chrome://inspect，勾选 Discover USB devices。手机打开 H5 页面后，电脑端会显示设备列表，点击 inspect 即可调试。

使用 Safari 远程调试（iOS）

iPhone 需开启 Web 检查器（设置 > Safari > 高级），通过数据线连接 Mac。在 Mac 的 Safari 中打开 开发 菜单，选择对应的设备及网页进行调试。

本地服务器真机访问

启动本地开发服务器（如 npm start），获取电脑的局域网 IP（如 192.168.x.x）。手机连接同一 Wi-Fi，在浏览器输入 http://<电脑IP>:<端口号> 访问项目。需确保防火墙允许端口通信。

使用代理工具抓包

配置工具如 Charles 或 Fiddler，手机 Wi-Fi 设置代理指向电脑 IP 和端口（如 8888）。安装工具证书后，可捕获和分析 H5 页面的网络请求。

云真机测试平台

通过 BrowserStack 或 Sauce Labs 等平台在线调试。上传项目或输入 URL，选择目标设备和浏览器型号，实时交互测试兼容性。

生成二维码快速访问

使用 ngrok 或 localtunnel 将本地服务暴露为公网 URL：

npx localtunnel --port 3000

生成的 URL 转换为二维码，手机扫码即可访问。

注意事项

• Android 需注意跨域问题，可在 webpack.config.js 中配置 devServer.allowedHosts: 'all'。
• iOS 的 Safari 调试需 macOS 系统。
• 真机测试时关闭电脑 VPN，避免网络隔离。