Debugging Ember.js applications in Visual Studio Code

I always felt that Visual Studio Code was a really nice editor but everytime I tried it I couldn't convince myself to fully switch away from my tmux/vim-combo I have been using successfully for years.

After trying VSCode for a day or two I always got back to my old setup because though I felt the great potential of VSCode I was always missing a few features from my Vim setup.

Most of the features I was missing from my earlier tests of VSCode have been added to VSCode's great Vim-extension over time though and the editor even comes with a built-in terminal so actually it should be pretty straight forward to switch from my vim/tmux setup. The feature that I was waiting for to really dive into VSCode again though was browser-based-debugging from within the editor itself which didn't work with Ember.js-applications until recently.

There are now two ways VSCode can help you debug your Ember.js-applications:

Debugging ember-cli commands

It has been possible since the time VSCode came out to debug node.js-applications from within the editor. I have been using this feature successfully when developing ember-cli-deploy-plugins and debugging deployment-workflow-setups via config/deploy.js and I can attest to the fact that this makes it much easier to add commands to ember-cli, debug deployment workflows or simply to get a better understanding of the build internals of ember-cli.

ember-cli-commands are run via node.js so it's easy to debug them with VSCode. Here's an example of a launch.json-configuration that can be used to debug staging-deployments via ember-cli-deploy:

// launch.json
{
  "version": "0.2.0",
  "configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Deploy staging",
    "program": "${workspaceRoot}/node_modules/ember-cli/bin/ember",
    "args": [
      "deploy",
      "staging"
    ]
  }
  ]
}

Debugging Ember.js-apps

Until recently it wasn't easily possible to use the Chrome debugging extension to debug Ember.js applications from within VSCode directly because of the way ember-cli created source-maps before ember-cli -2.12.x. As time of writing this blog-post ember-cli 2.12.x is still in beta so you have to use at least 2.12.0-beta.1 for this to work.

After installing the vscode-chrome-debug-extension we first have to configure ember-cli to produce inline source-maps so that source-maps are generated with the correct mapping back to the ES6-code that we are writing with ember-cli:

// ember-cli-build.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {

  var app = new EmberApp(defaults, {
    babel: {
      sourceMaps: 'inline'
    },
  });

  return app.toTree();
};

We also need to tell VSCode were to find the actual source-files on disk so that we can set breakpoints directly in the Editor. The default settings of the chrome-debugging extension won't work unfortunately.

// launch.json
{ 
  "version": "0.2.0",
  "configurations": [
    { "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200/",
      "sourceMapPathOverrides":
      { 
        "ember-test/": "${workspaceRoot}/app/"
      }
    }
  ]
}

These settings simply tell the chrome debugger that all sources that point to your own application (in this example the application is named ember-test) can be found in your workspaces 'app'-directory. After setting this up you can add breakpoints in your code in VSCode and debug directly in your editor 🚀

VSCode-Debugging

Conclusion

Debugging ember.js-applications from within Visual Studio Code is now possible with the 2.12.x-release from ember-cli. This may not be THE single reason to switch editors and is certainly not a must-have when developing Ember.js-applications - you can of course always debug from within browser developer tools - but this is definitely a nice feature to have and reason enough to give Visual Studio Code a second look if you tried it out before and weren't convinced the benefits outweighed the switching cost from your old development setup.

I hope this was helpful, thanks for reading and as always just drop me a line on twitter (@LevelbossMike) or ping me on the Ember.js-slack if you have questions. I am also available for consulting work and would be happy to help you and your company with your Ember.js-projects.

comments powered by Disqus