nightire/debug_ember_app_in_vscode.md

It worked for me only with adding sourcemaps path overrides:

"sourceMapPathOverrides": {
    "myappname/*": "${workspaceRoot}/app/*"
},

So I have only been ever to debug ember apps by using "launch" in vscode which is a pain because you have to reopen the browser console everytime and it's a huge waste of time. BUT FINALLY today I got ATTACH working!

I'm on a Windows machine BTW using Windows 10.

My "attach" config looks like:

{
	"type": "chrome", //Requires the "Debugger for Chrome" vscode extension
	"request": "attach",
	"name": "attach", //Can be whatever name you want to give this config
	"port": 9222, //This needs to be the same port as the remote debugging port that you launch Chrome with
	"urlFilter": "http://localhost:4200*",
	"webRoot": "${workspaceFolder}",
	"sourceMapPathOverrides": {
		//"myappname" is from the environment.js "modulePrefix" property.
		"myappname/*": "${workspaceFolder}/app/*"
	}
}

Then I modified the shortcut to Chrome on my machine to add "--remote-debugging-port=9222"
NOTE: I had to wrap this in double quotes to get it to work for me...

So the "Target" property for me looks like:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" "--remote-debugging-port=9222"

Then in ember-cli-build.js add:

babel: {
    sourceMaps: 'inline'
}

That looks like:

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    babel: {
      sourceMaps: 'inline'
    }
  });

  return app.toTree();
};

All this and my breakpoints in vscode hit the correct source:

👊

It worked for me only with adding sourcemaps path overrides:

"sourceMapPathOverrides": {
    "myappname/*": "${workspaceRoot}/app/*"
},

Thanks, I could also map tests and mirage.

 "sourceMapPathOverrides": {
        "appname/tests/*": "${workspaceFolder}/tests/*",
        "appname/mirage/*": "${workspaceFolder}/mirage/*",
        "appname/*": "${workspaceFolder}/app/*"
      }

Cannot make it work. Breakpoint shows as Unbound and app stops in "dist/assets/finalfile.js"
Below is my configs. Any advice?

{
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "attach",
      "port": 9222,
      "urlFilter": "http://localhost:4200*",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        // "emberjs-tutorial/*": "${workspaceRoot}/app/*",
        "emberjs-tutorial/*": "${workspaceFolder}/app/*"
      }
    },    

    
  ]
}

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      extension: 'scss',
    },
    babel: {
      sourceMaps: 'inline'
    },
    // sourcemaps: { enabled: true, extensions: ['js'] }
  });