DEV Community

Michal Bryxí
Michal Bryxí

Posted on • Updated on

Debugging EmberJS with VScode

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.

  1. First you will need the Debugger for Chrome extension in your VScode.
  2. 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/*"
      }
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Let's decipher individual lines:

"type": "chrome",
Enter fullscreen mode Exit fullscreen mode

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

"request": "launch",
Enter fullscreen mode Exit fullscreen mode

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

"name": "EmberJS",
Enter fullscreen mode Exit fullscreen mode

This config will appear in Chrome debugger under this name.

"port": 9222,
Enter fullscreen mode Exit fullscreen mode

Chrome debugger will connect to this port.

"runtimeArgs": [ "--remote-debugging-port=9222" ],
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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": {
Enter fullscreen mode Exit fullscreen mode

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/*"
Enter fullscreen mode Exit fullscreen mode
  • 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'
    }
  });
};
Enter fullscreen mode Exit fullscreen mode

Example screenshot

VScode debugging in action

VScode debugging in action

Sources

Top comments (3)

Collapse
 
robaguilera profile image
Robert Aguilera

I was never was able to get this working until now. Thank you!!!!

Collapse
 
rossjha profile image
Ross Haggart

Thanks for this!

Collapse
 
salmccarty profile image
Salvatore

This was exactly what I was looking for! Just got it to work with your help!