VS Code 的 Thresh 调试器

这是一个为 Thresh 设计的 VS Code 调试适配器。

Thresh 调试器支持：单步执行、继续、断点、评估 和 变量访问。

官方的 QuickJS 发布并不支持任何调试功能。

Thresh 调试器需要一个分支版本的 QuickJS，该版本进行了最少的必要更改以支持调试。

FTA Thresh 调试

安装 Thresh 调试器

在 VS Code 中安装 Thresh 调试器 扩展。

项目改造

升级项目依赖

 fta upgrade -p=thresh -f=buildtime -v=0.54.41

开启 dev 模式的 sourceMap

// config/index.js

// ··················
const config = {
  // ··················
  thresh: {
    // ··················
    enableSourceMap: true,
  },
}
// ··················

设置 vscode 的 debug 配置建立和 Thresh 应用的监听连接（使用 vscode 调试器附加 + 连接）

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "附加到 Thresh",
      "type": "thresh",
      "request": "attach",
      "trace": false,
      "log": false,
      // 这里的端口号要和 thresh 应用的 package.json 中的 scripts.dev:thresh 指定的端口号一致
      "devPort": 9527,
      "localIp": "10.190.xx.xx"
    }
  ]
}

同时也可以使用 thresh 调试器内置的模版自动创建 debug 配置

一定要注意 devPort 的设置

使用 Thresh 调试器

• 切换到调试视图并按下齿轮下拉菜单。
• 选择调试环境 "附加到 Thresh"。
• 按下绿色的 '播放' 按钮开始调试。

现在，您可以逐步执行 FTA Thresh 项目的调试了，设置并击中断点。

QuickJS 不提供事件循环，因此调试器应该（可选，但建议）定期从您的事件循环中调用，以检查消息。否则，直到下一次调用 Javascript 时，调试器消息可能会未被处理。这可以使用以下方法完成：

在连接上调试插件之后先执行一下 thresh 应用中的代码

调试面板