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:
- Install Chrome
- Install VSCode and VSCode Chrome Debug extension
- Install Ember (of course)
- 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!