如何在 VS Code 中使用断点调试 Ember 插件

【问题标题】：How to debug Ember addon with breakpoints in VS Code如何在 VS Code 中使用断点调试 Ember 插件
【发布时间】：2020-10-07 23:39:17
【问题描述】：

我正在尝试使用 Ember 插件（版本 3.18）让断点在 VS Code 中工作。已尝试将 launch.json 设置为：

{
"version": "0.2.0",
"configurations": [
    {
        "type": "edge",
        "request": "launch",
        "name": "Launch Edge against localhost",
        "port": 9222,
        "runtimeArgs": [ "--remote-debugging-port=9222" ],
        "url": "http://localhost:4200",
        "sourceMapPathOverrides": {
            "dummy/*": "${workspaceFolder}/tests/dummy/app/*",
            "test-addon/*": "${workspaceFolder}/addon/*",
        }
    }
]}

它适用于在虚拟测试应用程序的文件中设置断点。但是在插件文件夹中的文件中设置断点时，VSCode 会说“断点已设置但尚未绑定”。如何解决这个问题？我假设第二个源映射路径覆盖是错误的？

【问题讨论】：

标签： visual-studio-code ember.js ember-addon

【解决方案1】：

经过一些进一步的实验，似乎第二条路径应该是：

"addon-tree-output/test-addon/*": "${workspaceFolder}/addon/*"

更新：

事实证明，这仍然不能正确破坏插件文件。例如。在插件组件文件中：

@action
click() {
   console.log('hello')  // Set breakpoint here
}
// Instead, jumps to here

虚拟源地图和供应商源地图之间可能存在一些差异？ ember-cli-build.js 中有一个选项：

babel: {
  sourceMaps: 'inline'
}

但这仅适用于虚拟测试应用，因为它在其下方的评论中声明？

【讨论】：