Debug Ember app with VSCode

I’ve spent sometimes to get myself familiar with Ember framework lately. And since VSCode is my editor of choice, getting Ember to debug directly in VSCode is a win for me.

To get this working, you need a few steps:

1. Install Chrome
2. Install VSCode and VSCode Chrome Debug extension
3. Install Ember (of course)
4. Config ember-cli to generate inline source-maps

Edit your ember-cli-build.js

/* eslint-env node */
const EmberApp = require(‘ember-cli/lib/broccoli/ember-app’);
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
babel: {
sourceMaps: ‘inline’
},
});
return app.toTree();
};

5. Config VSCode to debug ember app.

Edit the launch.json file (under .vscode)

{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Launch local”,
“type”: “chrome”,
“request”: “launch”,
“runtimeExecutable”: “/Applications/Google Chrome.app/Contents/MacOS/Google Chrome”,
“runtimeArgs”: [ “--remote-debugging-port=9222” ],
“url”: “http://localhost:4200/",
“sourceMapPathOverrides”:
{
“ember-quickstart/*”: “${workspaceRoot}/app/*”
},
“port”: 9222,
“diagnosticLogging”: true
},
]
}

6. Close all Chrome instance and start using command: (You could find similar command for windows or linux)

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — remote-debugging-port=9222

7. Start your ember app by running ember s on your terminal

8. On VSCode, hit F5 and now you could hit breakpoints in your ember application

Happy debugging!