如何调试VSCode扩展本身？

调试 VSCode 扩展需先安装 VSCode、Node.js 和 vsce 工具，并用 yo code 生成项目，其中 .vscode/launch.json 配置了名为 "Extension" 的调试任务，类型为 extensionHost，启动时会加载当前扩展到新窗口（标有 “[Extension Development Host]”），在该窗口中可测试命令或触发事件，原始编辑器中的断点将生效；若断点未命中需检查编译输出路径 outFiles 及 TypeScript 编译状态，推荐使用 tsc -w 监听文件变化并重启调试会话以应用更改，还可通过添加 console: "integratedTerminal" 查看日志，整体依赖扩展宿主机制实现进程隔离与调试连接。

调试 VSCode 扩展本身其实非常直接，VSCode 提供了内置的支持来让你在开发过程中快速测试和调试自己的扩展。以下是具体操作步骤和关键点。

1. 准备调试环境

确保你已经：

• 安装了 Visual Studio Code
• 安装了 Node.js（推荐 LTS 版本）
• 全局安装了 vsce（VSCode 扩展打包工具）：npm install -g vsce
• 用 yo code 生成了一个扩展项目（需要先安装 Yeoman）

生成的项目中会包含 .vscode/launch.json 和 package.json，这些是调试的关键配置文件。

2. 使用默认启动配置

打开你的扩展项目，在 .vscode/launch.json 中应该能看到一个名为 "Extension" 的调试配置，它长这样：

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "runtimeExecutable": "${execPath}",
  "args": [
    "--extensionDevelopmentPath=${workspaceFolder}"
  ],
  "outFiles": [
    "${workspaceFolder}/out/**/*.js"
  ]
}

这个配置的意思是：启动一个新的 VSCode 实例（称为“扩展宿主”），并加载当前项目作为正在开发的扩展。

点击调试侧边栏中的“运行”按钮，VSCode 会：

Vuex参考手册 中文CHM版

Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如 零配置时空旅行般（基于时间轴）调试，以及状态快照 导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！

3

查看详情

• 编译你的 TypeScript（如果有）
• 启动一个新窗口（标题通常带有 “[Extension Development Host]”）
• 在这个窗口中激活你的扩展

3. 在开发窗口中测试功能

新打开的窗口就是你的“测试环境”。你可以像正常使用一样操作命令、触发事件等。

例如，如果你注册了一个命令 command:hello.world，可以在命令面板（Ctrl+Shift+P）里执行它。

此时，你在原始代码中设置的断点会被触发，可以查看变量、调用栈、单步执行等。

4. 调试技巧和常见问题

• 确保 outFiles 指向正确的编译输出路径（如 out/**/*.js）
• 如果断点显示为灰色，说明未命中，检查是否代码被正确编译和加载
• 修改代码后，需要重新编译（或开启 tsc -w 监听）再重启调试会话
• 可在 launch.json 中添加 console: "integratedTerminal" 查看后台输出
• 使用 debug console 可以执行表达式、调用 API

基本上就这些。只要项目结构正确，VSCode 的调试体验很流畅。关键是理解“扩展宿主”机制：你的代码在一个独立进程中运行，而调试器连接的是那个进程。

以上就是如何调试VSCode扩展本身？的详细内容，更多请关注php中文网其它相关文章！