How to debug Ember addon with breakpoints in VS Code

Question

Am trying to get breakpoints to work in VS Code with an Ember addon (version 3.18). Have tried launch.json as:

{
"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/*",
        }
    }
]}

It works fine for setting breakpoints in files in the dummy test app. But when setting a breakpoint in files within the addon folder, VSCode says "Breakpoint set but not yet bound". How can this be fixed? I assume the 2nd sourcemap path override is wrong?

user1814277 · Answer 1 · 2020-06-18T11:40:09.227

After a bit of further experimenting, seems the 2nd path should be:

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

Update:

Turns out this still doesn't break inside addon files correctly. eg. in an addon component file:

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

Some difference between the dummy and vendor source maps perhaps? There is an option in ember-cli-build.js:

babel: {
  sourceMaps: 'inline'
}

but this only applies to the dummy test app as it states in the comment underneath it?

How to debug Ember addon with breakpoints in VS Code

1 Answers1