Back to Details

mobile-preview

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Mobile Preview

移动端预览

Expose local dev server to mobile Chrome via a public HTTPS URL using cloudflared tunnel.
通过cloudflared隧道，使用公开HTTPS URL将本地开发服务器暴露至移动端Chrome。

Prerequisites

前置条件

Install cloudflared if not present:
bash
undefined
若未安装cloudflared，请先安装：
bash
undefined

Check installation

检查安装情况

command -v cloudflared
command -v cloudflared

macOS

macOS系统

brew install cloudflared
undefined
brew install cloudflared
undefined

Workflow

操作流程

1. Detect port

1. 检测端口

Identify the dev server port:
FrameworkDefault PortConfig
Next.js3000
package.json
→ 
dev
script
Vite5173
vite.config.*
→ 
server.port
CRA3000
PORT
env var
Nuxt3000
nuxt.config.*
→ 
devServer
Remix5173
remix.config.*
Check running server port:
bash
lsof -i -sTCP:LISTEN -P | grep -E ':(3000|5173|8080|4321) '
确定开发服务器端口：
框架默认端口配置位置
Next.js3000
package.json
→ 
dev
脚本
Vite5173
vite.config.*
→ 
server.port
CRA3000
PORT
环境变量
Nuxt3000
nuxt.config.*
→ 
devServer
Remix5173
remix.config.*
检查运行中的服务器端口：
bash
lsof -i -sTCP:LISTEN -P | grep -E ':(3000|5173|8080|4321) '

2. Start dev server

2. 启动开发服务器

If not already running, start in background:
bash
npm run dev &
若服务器未运行，在后台启动：
bash
npm run dev &

or

或

pnpm dev &

Wait for the server to be ready, then verify the port.
pnpm dev &

等待服务器就绪后，验证端口是否正确。

3. Start tunnel

3. 启动隧道

Use the bundled script:
bash
bash ~/.claude/skills/mobile-preview/scripts/tunnel.sh PORT
Or run directly:
bash
cloudflared tunnel --url http://localhost:PORT 2>&1 &
Parse the 
https://xxx-xxx.trycloudflare.com
URL from the output.
使用捆绑脚本：
bash
bash ~/.claude/skills/mobile-preview/scripts/tunnel.sh PORT
或直接运行：
bash
cloudflared tunnel --url http://localhost:PORT 2>&1 &
从输出中解析出 
https://xxx-xxx.trycloudflare.com
格式的URL。

4. Share URL

4. 分享URL

Provide the tunnel URL to the user:
Mobile preview URL: https://xxx-xxx.trycloudflare.com

Open the URL above in mobile Chrome.
The tunnel is running in the background. Let me know when you're done.
将隧道URL提供给用户：
移动端预览URL：https://xxx-xxx.trycloudflare.com

请在移动端Chrome中打开上述URL。
隧道正在后台运行，完成测试后请告知我。

5. Cleanup

5. 清理操作

Terminate the tunnel process when testing is complete:
bash
pkill -f "cloudflared tunnel"
测试完成后终止隧道进程：
bash
pkill -f "cloudflared tunnel"

Troubleshooting

故障排除

  • Port conflict: Check with 
    lsof -i :PORT
    , use a different port if needed
  • Tunnel connection failure: Check firewall/VPN, try reinstalling cloudflared
  • HTTPS mixed content: Tunnel is HTTPS, so HTTP resources may fail to load. Ensure the dev server uses relative paths
  • HMR not working: WebSocket-based HMR may not work through cloudflared tunnel. Manual refresh required
  • 端口冲突：使用 
    lsof -i :PORT
    检查，必要时更换端口
  • 隧道连接失败：检查防火墙/VPN，尝试重新安装cloudflared
  • HTTPS混合内容：隧道使用HTTPS，因此HTTP资源可能加载失败。请确保开发服务器使用相对路径
  • HMR不工作：基于WebSocket的HMR可能无法通过cloudflared隧道正常工作，需要手动刷新

Notes

注意事项

  • cloudflared quick tunnel requires no signup, free, automatic HTTPS
  • URL changes on every tunnel restart
  • Tunnel sessions last approximately 24 hours (auto-expire after)
  • Be cautious with tunnels on dev environments containing sensitive data
  • cloudflared快速隧道无需注册，免费使用且自动配置HTTPS
  • 每次重启隧道时URL都会变更
  • 隧道会话时长约为24小时（到期后自动失效）
  • 若开发环境包含敏感数据，使用隧道时需谨慎