如何在安卓设备上测试React+TypeScript Web应用？连接失败求助

一、解决跨设备连接超时问题 #

1. 修正本地服务绑定地址 #

默认React开发服务器只监听localhost，其他设备无法访问。启动项目时必须把服务绑定到0.0.0.0，让服务监听所有网络接口：

# npm启动
HOST=0.0.0.0 npm start
# yarn启动
HOST=0.0.0.0 yarn start
# Vite项目需修改vite.config.ts
export default defineConfig({
  server: {
    host: '0.0.0.0'
  }
})

2. 配置McAfee防火墙 #

你的连接大概率被McAfee拦截了，按以下步骤处理：

• 打开McAfee控制台，找到「防火墙」模块
• 先临时关闭防火墙测试，能正常连接的话，再设置永久规则：
  • 添加入站/出站规则，允许React开发服务器的端口（默认3000）通行
  • 或者直接授权npm.exe/node.exe的网络访问权限

3. 检查Windows Defender防火墙 #

即便装了McAfee，Windows自带防火墙可能仍在生效：

• 打开「Windows Defender防火墙」→「高级设置」
• 新建入站规则：
  • 规则类型选「端口」，下一步
  • 选择TCP，输入端口号（如3000），下一步
  • 勾选「允许连接」，下一步
  • 全选所有网络类型，下一步
  • 命名规则（比如「React Dev Server」），完成
• 重复上述步骤新建出站规则

4. 验证网络连通性 #

• 在PC命令提示符执行ping 安卓设备IP，确认设备间能互通
• 如果还是连不上，换个端口试试，比如修改package.json的start命令：PORT=3001 react-scripts start

二、React移动端测试的替代方法 #

1. Chrome DevTools 设备模拟 #

不用真实设备，直接在PC端Chrome模拟移动端：

• 按F12打开DevTools，点击左上角的设备图标（Toggle Device Toolbar）
• 选择预设设备型号或自定义分辨率，实时测试响应式布局

2. ngrok内网穿透 #

如果同一WiFi下连接始终有问题，用ngrok把本地服务暴露到公网：

• 下载解压ngrok，执行ngrok http 3000（3000是本地服务端口）
• 生成公网URL后，安卓设备直接访问该URL即可

3. React Native Web（适配长期项目） #

如果应用后续要兼容原生端，可以用React Native Web打包，直接在安卓模拟器或真机安装测试，但这个方案学习成本较高，适合长期迭代的项目

内容的提问来源于stack exchange，提问作者shinchan97