Debugging EmberJS with VScode

#ember #vscode #debugging

I found quite a few resources describing this topic, but it took me a while to figure out how to apply it to my setup. So this will (hopefully) help me remember when I need it next time. All paths are relative to your workspace.

First you will need the Debugger for Chrome extension in your VScode.
Now you will need to create a configuration for VScode debugger:

// .vscode/launch.json
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome", 
      "request": "launch",
      "name": "EmberJS",
      "port": 9222,
      "runtimeArgs": [ "--remote-debugging-port=9222" ],
      "url": "http://localhost:4200",
      "sourceMapPathOverrides": {
        "admin/*": "${workspaceFolder}/admin/app/*"
      }
    }
  ]
}

Let's decipher individual lines:

"type": "chrome",

VScode can have multiple debugging configurations. And this configuration will use the Debugger for Chrome extension.

"request": "launch",

After starting the debugger in VScode, the extension will launch new Chrome instance.

"name": "EmberJS",

This config will appear in Chrome debugger under this name.

"port": 9222,

Chrome debugger will connect to this port.

"runtimeArgs": [ "--remote-debugging-port=9222" ],

Chrome will be launched with remote debugging port enabled. You will need to fill in the same number as you used in the port configuration.

"url": "http://localhost:4200"

Chrome will be launched with this URL loaded in a tab. The value in my example is the default URL ember server runs on.

"sourceMapPathOverrides": {

Browsers use source maps to be able to translate minified/compiled JS back to human-readable form. But in complicated setups, like I have the source maps have wrong file paths. This hash will provide a way to correct those:

"admin/*": "${workspaceFolder}/admin/app/*"

Left side: This is the value of ENV.modulePrefix variable in your config/environment.js file (in my case it's admin). Plus slash and asterisk at the end to cover all the subdirectories.
Right side:
- ${workspaceFolder} - variable with path to your workspace folder.
- admin - is the subfolder in your workspace that is the root of your project. Wherever package.json file lives.
- app - is the actual source code subdirectory of your app. Folder app is typical for projects before module unification. After module unification lands, it will be probably src.

And the last ingredient is enabling source maps:

// admin/ember-cli-build.js

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