Debugging EmberJS with VScode
Tags: ember, vscode, debugging
Published: 2018-09-14 20:58:41

---
title: Debugging EmberJS with VScode
published: true
description: Setup and explanation of the various variables.
tags: Ember, EmberJS, 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.

1. First you will need the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension in your VScode.
1. Now you will need to create a configuration for VScode debugger:
```json
// .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](https://ember-cli.com/user-guide/) `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](https://github.com/emberjs/rfcs/blob/master/text/0143-module-unification.md) lands, it will be probably `src`.

And the last ingredient is enabling source maps:

```js
// admin/ember-cli-build.js

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

## Example screenshot

<figure>
![VScode debugging in action](https://thepracticaldev.s3.amazonaws.com/i/7krvrs464f3qhj3yvg8h.png)
<figcaption>VScode debugging in action</figcaption>
</figure>

## Sources
 - https://medium.com/@minhdn/debug-ember-app-with-vscode-5f4fde511f9f
 - https://gist.github.com/jrock2004/32f0353e176294060ed1d4fa9f56d646
 - https://medium.com/front-end-hacking/solve-breakpoint-ignored-with-visual-studio-code-vscode-1-19-chrome-debugger-6d484c88b829