Debug Ember app with VSCode

Minh Dong
Minh Dong
Apr 13, 2017 · 1 min read

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”,“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 — 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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store