做cocos creator开发的你，是不是早就受够了来回切换编辑器调试？要么断点错位找不着对应代码，要么变量查看不顺手，想用上轻量顺手的vs code调试，搜了一圈教程还是连不上端口？今天把亲测能用的流程整理好，零基础也能一步搭好调试环境。

调试前准备：先把基础环境对齐

首先你要做两件核心准备：第一，给你的vs code装上官方适配的「cocos creator」插件，直接在插件市场搜索就能找到，它自带了调试适配和代码提示，比第三方插件兼容性好太多，不会出现版本不兼容的问题；第二，打开你的creator项目，确认构建配置里已经勾选「生成source map」——这一步是让vs code能对应上源码和打包后的代码，没开的话百分百会出现断点错位、断不对行的问题。最后一定要注意：在vs code里打开项目的时候，要直接选中creator项目的根目录，开错上层文件夹会导致后续配置找不到路径，这是新手最容易踩的第一个坑。

生成调试配置：不用手动写launch.json

很多老教程会教你手动复制粘贴launch.json代码，改来改去还容易出错，其实完全不用，vs code的cocos插件已经做了一键生成功能。打开命令面板（windows按ctrl+shift+p，mac按command+shift+p），输入「cocos: generate launch configuration」，回车之后插件会自动识别你项目的版本和输出端，你只需要选择你要调试的目标端就行：做web小游戏选web-mobile或者web-desktop，做原生应用选对应原生调试选项，几秒钟就能生成好适配好的配置文件，完全不用自己手动改端口、写路径。

启动调试：避开坑点一次连上

这里有个90%的新手都会搞反的顺序：先在cocos creator里启动项目预览，确认项目正常运行后，再切回vs code操作。先在你需要断点的代码行，点击行号左侧打好蓝色断点，再切到「运行和调试」面板，选中刚才生成好的对应配置，点击绿色启动按钮，等待1-2秒就能完成连接，之后项目运行到断点位置就会自动暂停，你可以直接在vs code里查看调用栈、监视变量，甚至直接修改变量值测试效果。

如果出现连不上的情况，先检查是不是端口被防火墙拦截，或者开了多个预览实例导致端口冲突，关掉多余进程重试就能解决。搭好这个调试环境后，不用来回切换creator和编辑器，大型项目的调试效率能提升不止一倍。整个流程下来不到十分钟，就能用上你习惯的vs code调试creator项目了。