本文介绍一种基于局域网的实时调试方案：通过 vs code 的 live server 在本地启动 https 开发服务器，使 iphone 直接访问并自动热更新，无需反复上传至线上环境。
本文介绍一种基于局域网的实时调试方案：通过 vs code 的 live server 在本地启动 https 开发服务器，使 iphone 直接访问并自动热更新，无需反复上传至线上环境。
在开发基于 Three.js 的 WebAR 项目时，频繁部署到线上托管平台（如 GitHub Pages、Vercel 或免费静态主机）不仅耗时，还难以快速验证摄像头权限、AR 渲染性能及移动端交互细节。更高效的方案是构建一个本地可访问、支持 HTTPS、具备热重载能力的开发环境。
✅ 推荐工作流：VS Code + Live Server（HTTPS 模式）
-
安装与配置
- 安装 VS Code（免费开源）；
- 安装扩展 Live Server（推荐使用支持 HTTPS 的分支：vscode-liveserver-https）；
- 确保你的 PC 和 iPhone 连入同一 Wi-Fi 局域网（这是关键前提）。
-
启用 HTTPS（AR 必需）
浏览器（尤其是 Safari/iOS）强制要求 WebAR（如 ARKit/WebXR）必须运行在安全上下文（即 https:// 或 localhost）。由于 localhost 无法从 iPhone 访问，需自签名证书：# 使用 Git 自带的 OpenSSL（Windows/macOS 均适用） openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes
将生成的 cert.pem 和 key.pem 放入项目根目录，并在 VS Code 设置中配置 Live Server HTTPS 路径（参考插件文档）。
dmap-jsapi-skill下载DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
启动服务并访问
- 在 VS Code 中打开项目文件夹，右键 index.html → “Open with Live Server (HTTPS)”；
- 终端将显示类似 https://192.168.1.100:5500 的地址；
- 在 iPhone Safari 中输入该地址（注意：首次访问会提示“不信任证书”，需手动点击「详细信息」→「访问」→「继续前往…」）；
- 此后任意保存代码（.js, .html, .glb 等），页面将自动刷新，iPhone 端实时同步变更。
⚠️ 注意事项
- iOS Safari 对 WebXR 支持有限，建议同时测试 Chrome for iOS（虽底层仍为 WebKit，但部分实验性 API 更早启用）；
- 确保 index.html 中 <meta name="viewport"> 设置合理（如 width=device-width, initial-scale=1, user-scalable=no），避免缩放干扰 AR 摄像头画面；
- 若遇 navigator.xr 未定义，请检查是否启用了 #webxr 实验标志（Safari 技术预览版）或改用 model-viewer 等兼容性更强的轻量方案；
- 防火墙可能拦截端口，如无法访问，请临时关闭防火墙或添加入站规则（端口 5500）。
? 替代方案（非 VS Code 用户）
- Node.js 用户：npx http-server -S -C cert.pem -K key.pem -p 5500；
- Python 用户（需 Python 3.11+）：python -m http.server --bind 0.0.0.0:5500 --cgi --directory . --ssl-key-file key.pem --ssl-cert-file cert.pem；
- 全平台工具：Localhost.run（反向代理，适合无局域网场景，但延迟略高）。
通过这套本地调试链路，你将告别“写代码 → 打包 → 上传 → 清缓存 → 刷新 → 等加载”的低效循环，真正实现“所见即所得”的跨设备 AR 开发体验。
