🔍 VSCode 调试脚本指南
本调试功能建立在 Node.js 的调试基础之上，无需依赖特定的 AP 插件即可进行调试。我们对动态编译文件路径、源映射等繁琐配置进行了优化，旨在减轻创作者的手动配置负担。
警告
⚠️ 注意：目前暂不支持对神岛 API 进行调试。
📋 编译模式
在调试过程中，你可以选择以下两种编译模式：
| 编译模式 | 特点 | 推荐程度 |
|---|---|---|
| HMR 编译 | 自动监听文件变化并自动编译 支持在修改 ts 文件的同时进行调试 | ⭐⭐⭐⭐⭐ 强烈推荐 |
| 完整编译 | 需要手动编译 只能在编译后的 js 文件上进行断点调试 | ⭐⭐⭐ 次要选择 |
🔄 捆绑 JS 文件调试
1️⃣ 配置 launch.json
创建配置文件
| 步骤 | 操作说明 |
|---|---|
| 1 | 初次调试时，创建 launch.json 文件（如果已存在可跳过此步骤） |
| 2 | 点击调试侧边栏，选择创建配置选项 |
选择调试类型
| 调试类型 | 功能说明 | 支持状态 |
|---|---|---|
| Arena Debugger | 远程调试神岛编辑器 | ❌ 暂不支持 |
| ArenaPro Client Debugger | 本地调试客户端捆绑 JS 文件 | ✅ 支持 |
| ArenaPro Server Debugger | 本地调试服务端捆绑 JS 文件 | ✅ 支持 |
生成配置流程
自动生成：选择配置后，VSCode 会自动生成对应的调试配置  | 新增配置：可通过右下角按钮新增配置  |
2️⃣ 调试流程
| 步骤 | 操作说明 | 截图 |
|---|---|---|
| 1 | 选择 HMR编译 模式进行编译 | - |
| 2 | 关闭编译脚本上传功能（推荐） |  |
| 3 | 开启 debugger 模式（推荐） |  |
| 4 | 在任意 ts 文件中设置断点，按下 F5 开始调试 |  |
提示
💡 提示：启用 HMR 编译模式后，你可以在调试过程中直接修改代码，系统会自动重新编译并应用更改。
📄 单个 JS 文件调试
VSCode 提供了快速调试单个 JS 脚本的功能：
| 操作 | 说明 |
|---|---|
| 设置断点 | 在 .js、.mjs 或 .cjs 文件中设置断点 |
| 启动调试 | 点击编辑器右上角 快速Debugger 按钮 |
| 快捷键 | Alt+D |
信息
📚 说明：默认非捆绑文件的 .js 文件会被解析为 ECMAScript 模块。
🔧 调试技巧
常用断点类型
| 断点类型 | 使用场景 | 设置方法 |
|---|---|---|
| 普通断点 | 在特定代码行暂停执行 | 点击代码行号左侧 |
| 条件断点 | 仅在满足条件时暂停 | 右键点击行号 → 添加条件断点 |
| 日志点 | 不暂停执行，只记录日志 | 右键点击行号 → 添加日志点 |
调试窗口功能
| 窗口 | 功能 |
|---|---|
| 变量 | 查看当前作用域中的变量值 |
| 监视 | 添加表达式并监控其值的变化 |
| 调用堆栈 | 查看函数调用链 |
| 断点 | 管理所有设置的断点 |