你可以在应用运行于 localhost 时，通过把它暴露为一个公开 HTTPS URL 来在移动设备上测试。手机和平板无法访问你笔记本上的 127.0.0.1，但一个 localhost 隧道能立刻弥合这个鸿沟。
为什么移动设备无法访问 localhost
当你在笔记本上运行开发服务器时，它监听在一个回环地址（127.0.0.1 或 localhost）上，只有你的机器能访问。即使你的手机在同一个 Wi-Fi 网络，输入 http://192.168.x.x:3000 也常因防火墙规则、HTTPS 要求或 CORS 策略而失败。
一个 localhost 隧道给你的手机一个标准 HTTPS URL，转发到你的本地进程——无需网络配置。
移动测试能捕捉而模拟器会遗漏的东西
- 真实的触摸目标、滚动行为和手势处理。
- iOS 和 Android 设备上的实际视口尺寸。
- 移动浏览器的怪癖（Safari、Chrome、应用内 WebView）。
- 真实硬件上的性能，而非模拟环境。
- 相机、地理定位和设备特定 API 行为。
- 移动浏览器上的 OAuth 和深度链接重定向。
分步：用 PortPreview 做移动测试
- 在本地启动开发服务器（例如端口 3000 上的
npm run dev）。 - 运行
npx portpreview 3000获取一个公开 HTTPS URL。 - 在手机浏览器里打开该 URL（如果团队这样分享链接，就扫一个二维码）。
- 在真实设备上测试响应式布局、导航、表单和认证流程。
- 把同一个 URL 分享给 QA 或设计同事做跨设备审查。
移动测试清单
响应式布局
在手机和平板上验证断点、字体缩放、图片加载和溢出行为。
触摸交互
在真实触摸输入下测试点按目标、滑动手势、下拉刷新和粘性头部。
认证流程
OAuth 重定向和魔法链接登录在移动浏览器上行为不同。在设备上测试完整的认证循环。配置细节见 OAuth 回调测试。
性能
在中端设备上测量页面加载、JavaScript 包影响和图片优化——不只是你的开发笔记本。
可靠的移动 localhost 测试技巧
- 使用 HTTPS：许多移动功能（service worker、安全 cookie、地理定位）需要 HTTPS，隧道默认提供。
- 测试时禁用缓存：硬刷新或用无痕模式避免陈旧资源。
- 测试多个设备：iOS Safari 和 Android Chrome 处理 CSS 和 JavaScript 的方式不同。
- 保持隧道活跃：关闭 CLI 会话后 URL 就停止工作。
与团队分享移动预览
不要录制屏幕截图，分享隧道 URL 让同事在自己的设备上测试。阅读如何分享你的本地开发服务器了解协作工作流。
免费开始使用 PortPreview，从 localhost 快速做移动测试。