在vscode中调试CocosCreator插件主进程

1,695 阅读3分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第32天,点击查看活动详情

又见插件主进程调试

编写过cocos creator插件的小伙伴,相信都会遇到一个比较头疼的问题,如何调试自己编写的主进程代码。

简单的逻辑,你可以console.log完成调试工作,但是断点调试,是开发过程中的硬性需求,今天要介绍的就是在vscode里面编写调试代码。

如何使用

  1. 下载CocosCreator插件:DebugMainProcess,并启用该插件。
  2. 安装vscode插件:cc-plugin-debugger
  3. 使用vscode打开插件项目,launch.json中新建一个configuration

  1. 运行configuration,在vscode中找到插件主进程的js代码,设置断点,当编辑器运行到该处时,vscode就会自动断下。

调试方案之一:Chrome Devtools

之前我也研究过,如何在Chrome中调试,其原理就是从命令行以调试模式(--inpect)启动cocos creator,然后在Chrome中监听端口,进行debug。

为什么Chrome可以调试?

这一切的背后,都是调试协议的功劳。

chrome devtools只是调试的前端,我们在里面的断点等操作,最终都是通过调试协议告诉了node,当node执行到断点时,同样也会通过调试协议告诉外部程序,感兴趣的可以了解下Chrome Devtools Protocol,简称CDP。

vscode的可以调试c++、js、java、c#等等语言,这么强大的调试功能背后,都离不开调试协议。

调试方案之二:Vscode

使用Chrome Devtools调试有许多不方便的地方:

  • 必须命令行启动,并开启inspect选项。对于习惯dashboard打开项目,比较麻烦,而且需要输入断点选项,也很麻烦。
  • Chrome里面需要设置监听的inspect选项的端口
  • 编写和调试代码,需要频繁的切换

随着了解的深入,一个node程序,其实是存在一个调试server,用来和外部程序交互,而inspect选项,其实就是打开了这个debug protocol server。

换而言之,这个debug server只需要打开就能调试node程序,当我们启动一个node服务后,node允许我们通过:

process._debugProcess(process id)

强制开启调试模式,这样我们就无须重新启动inspect,就能直接调试已经被node加载的代码。

开启调试server后,我们还需要将调试工具连接到调试server,vscode对node的调试其实支持的已经非常成熟了,在launch.json中新建一个如下配置:

{
  "type": "node",
  "request": "attach",
  "name": "CCMainProcessDebug",
  "port": 9229,
  "skipFiles": ["<node_internals>/**"]
}

然后我们运行这个Configuration,vscode就会去连接本地端口为9229的debug server。

如果一切顺利,你就可以非常happy的debug了。

不足之处:

目前还没整明白如何支持sourcemap,所以目前还不能直接在ts代码中下断点,只能在js代码中下断点。

Creator查看主进程ID

image.png