Skip to content

VSCode 调试脚本指南

本调试功能建立在 Node.js 的调试基础之上,无需依赖特定的 AP 插件即可进行调试。我们对动态编译文件路径、源映射等繁琐配置进行了优化,旨在减轻创作者的手动配置负担。然而,需要注意的是,目前暂不支持对神岛 API 进行调试。

在调试过程中,你可以选择 完整编译HMR编译 两种编译模式。HMR编译 模式推荐用于调试,因为它能够自动监听文件变化并自动编译,从而允许你在修改 ts 文件的同时进行调试。而 完整编译 模式则需要手动编译,且只能在编译后的 js 文件上进行断点调试。

捆绑 JS 文件调试

配置 launch.json

  1. 创建 launch.json 文件

    • 初次调试时,你需要创建 launch.json 文件。如果已存在,可跳过此步骤。

    创建 launch.json 文件

  2. 选择调试配置

    • 在调试配置选择框中,有三种类型可供选择:
      • Arena Debugger(目前不支持):远程调试神岛编辑器,并返回数据。
      • ArenaPro Client Debugger:本地调试客户端的捆绑 JS 文件。
      • ArenaPro Server Debugger:本地调试服务端的捆绑 JS 文件。

    选择调试配置

  3. 自动配置

    • 选择配置后,VSCode 会自动生成对应的调试配置。

    自动配置

  4. 新增配置

    • 你可以使用右下角的配置按钮进行新增配置。

    新增配置

编译并调试文件

在调试之前,你需要选择 HMR编译 模式进行编译。这样,调试器会自动监听文件变化并自动编译,从而允许你在修改 ts 文件的同时进行调试。

  • 推荐关闭将编译脚本上传到神岛编辑器的功能,以便进行本地调试。

    关闭上传功能

  • 推荐开启 debugger 模式,这样打包后的捆绑文件不会压缩和混淆,方便查看运行时变量等数据。

    开启 debugger 模式

  • 开启 HMR 服务器后,你可以在入口文件开始的任意 ts 文件里设置断点,然后按下 F5 进行调试。

    调试过程

单个 JS 文件调试

为了满足对快速调试单个 JS 脚本而非整个项目的需求,VSCode 提供了单个 JS 文件的调试功能。只需在任意的 .js.mjs.cjs 文件中设置断点,然后运行该文件进行调试。

  • 在编辑器的右上角,找到并点击 快速Debugger 按钮即可开始调试。

  • 快捷键:Alt+D

    单个 JS 文件调试

注:默认非捆绑文件的 .js 文件会被解析为 ECMAScript 模块。