VSCode调试Ember.js需手动配置：安装Node.js 18/20 LTS、全局ember-cli；在ember-cli-build.js设babel.sourceMaps='inline'；.vscode/launch.json中正确配置webRoot和sourceMapPathOverrides映射；仅启用Ember Language Support等必要扩展并禁用冲突插件。
VSCode 本身不内置 Ember.js 支持，必须手动配置调试、语法高亮和源码映射，否则断点不生效、console.log 位置错乱、launch.json 启动失败是常态。
安装 Ember CLI 并确认 Node.js 环境
Ember 开发依赖 ember-cli 命令行工具，它对 Node.js 版本敏感。当前（2026年）推荐使用 Node.js 18.x 或 20.x LTS，避免用 21+ 的实验版本——ember new my-app 在非 LTS 版本下可能因 node-gyp 编译失败而卡住。
- 运行
node -v和npm -v验证基础环境；若未安装，从nodejs.org下载 LTS 安装包，勾选 “Add to PATH” - 全局安装 CLI：
npm install -g ember-cli；验证用ember -v，输出应含ember-cli: X.Y.Z - 新建项目时，直接在 VSCode 终端中执行
ember new my-app，不要用 GUI 文件管理器手动建文件夹再打开——Ember CLI 会自动生成.vscode/和必要配置
启用 sourceMap 并验证生成效果
Ember 默认不开启 inline sourceMap，导致 VSCode 调试器无法将浏览器中的 JS 行号映射回 .hbs 或 .js 源文件，断点点击无效或跳转到压缩后代码。
- 编辑项目根目录下的
ember-cli-build.js，在EmberApp构造函数中添加babel: { sourceMaps: 'inline' }配置 - 确保
ember serve启动后，浏览器开发者工具的 Sources 面板里能看到app/下的原始文件（而非assets/vendor.js），且每个文件末尾有//# sourceMappingURL=...注释 - 如果只看到
assets/my-app.js且无 sourceMap，检查是否漏写babel配置，或误加在options外层对象中
配置 launch.json 实现断点调试
VSCode 的 launch.json 必须匹配 Ember 的开发服务器行为，否则 F5 启动后无反应或报 Can't find runtime target 错误。
立即学习“前端免费学习笔记（深入）”；
- 在项目根目录创建
.vscode/launch.json，内容为：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Ember App",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///./app/*": "${webRoot}/app/*",
"webpack:///./tests/*": "${webRoot}/tests/*"
}
}
]
}-
webRoot必须指向项目根目录（不是app/子目录），否则断点解析失败 -
sourceMapPathOverrides是关键：Ember 打包后 sourceMap 中的路径前缀是webpack:///./app/...，需显式映射回本地app/目录结构 - 启动前务必先在终端运行
ember serve，再点 VSCode 的「运行 → 启动调试」，不要让 VSCode 自己拉起服务
安装必要扩展并禁用冲突插件
VSCode 对 Ember 的语法支持较弱，Volar、ESLint React 插件等会干扰 Handlebars 模板解析，甚至导致 .hbs 文件内 {{this.property}} 提示“未定义”。
- 只安装以下扩展：
Ember Language Support（提供.hbs高亮与基本补全）、ESLint（配合项目自带的.eslintrc.js）、Prettier（注意关闭对.hbs的格式化，避免破坏双大括号结构） - 禁用
Volar、Vetur、Auto Close Tag（它会在{{#if}}中错误闭合}}） - 在
settings.json中加入："files.associations": { "*.hbs": "handlebars" }，确保.hbs文件被识别为 Handlebars 语法
最常被忽略的是 sourceMapPathOverrides 映射规则——Ember 的 Webpack 输出路径和实际文件路径不一致，不手动覆盖就永远调试不了组件逻辑。别指望“自动检测”能搞定这个。
