调试 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扩展本身？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/723442.html
微信扫一扫 
支付宝扫一扫 
