vs code 调试 cocos 脚本与真机预览是一体化流程：需以 web 平台构建，通过 launch.json 配置 chrome 调试地址（如 http://192.168.x.x:5500）、webroot 指向项目根目录，并启用 sourcemap；同时用 live server 绑定 0.0.0.0 和固定端口供真机访问，确保手机与电脑同局域网且无 ap 隔离。
VS Code 调试 Cocos 脚本 + 真机预览，不是两个独立流程，而是一套连贯动作：调试靠 launch.json 配置 Chrome/Edge，真机预览靠改 Live Server 绑定地址和端口。两者共用一个前提——项目必须以 Web 平台构建并运行在本地服务上。
VS Code 中断点调试 Cocos 游戏逻辑（Web 平台）
核心是让 VS Code 通过 Chrome DevTools Protocol 连上浏览器里运行的 Cocos 游戏脚本。Cocos Creator 3.x 默认生成的 launch.json 配置基本可用，但有几个关键点必须核对：
-
url字段必须指向你实际启动的 Web 服务地址，比如"http://localhost:7456"（不是file://协议，否则断点不命中） -
webRoot必须设为项目根目录（即含index.html的那一层），不是assets或build子目录 - 确保 Cocos Creator 已开启「预览」并生成了 Web 构建产物（
build/web-desktop或类似路径），且 VS Code 是从该构建目录启动 Live Server，而非直接打开assets - 如果用了自定义构建模板或修改过
index.html入口，需确认script标签加载的 JS 文件路径与 sourcemap 路径一致，否则调试时显示“未找到源文件”
Cocos Creator Web 构建后如何用 VS Code Live Server 启动
Creator 构建 Web 版本后，输出目录（如 build/web-desktop）里有完整的可运行网页，但直接双击 index.html 会因跨域无法加载资源。必须用 HTTP 服务启动——VS Code 的 Live Server 插件最方便，但默认配置不行：
- 右键点击
build/web-desktop目录 → “Open with Live Server”，此时它默认绑定127.0.0.1:5500，手机访问不了 - 打开 VS Code 设置（
Ctrl+,），搜索live server.settings.host，把值改成0.0.0.0 - 再搜索
live server.settings.port，设为固定端口如5500（避免每次变） - 重启 Live Server（右下角点两次「Go Live」），它会输出类似
http://192.168.1.105:5500的地址——这个才是手机能访问的 - 手机浏览器打开该地址，F12 开发者工具 → Sources 里能看到原始 TS/JS 文件（前提是构建时启用了
sourceMap）
为什么真机上断点不触发、控制台没日志
常见原因不是代码问题，而是环境链路断在中间：
- 手机访问的是
http://192.168.x.x:5500，但 VS Code 的launch.json里url写的是http://localhost:5500——调试器连不上，自然不触发断点 - Cocos Creator 构建时未勾选「启用 sourceMap」（3.8+ 在构建面板底部），导致浏览器无法映射压缩后的 JS 到源码，VS Code 找不到对应文件
- 手机和电脑不在同一局域网，或路由器开启了「AP 隔离」（常见于酒店、公司 Wi-Fi），此时即使 IP 正确也 ping 不通，换手机热点即可验证
- 项目用了
cc.resources.load异步加载 prefab 或脚本，但断点打在onLoad里，而资源还没加载完——建议在start或加个cc.log确认执行时机
真正卡住的地方往往不是语法或 API，而是服务绑定地址、sourceMap 开关、网络拓扑这三者没对齐。调通一次之后，后续新项目只要复用同一套构建 + Live Server + launch.json 模板，就能稳定复现。
