Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to debug an ember application with VS Code

Step 1: Launch Google Chrome with Remote Debugging support

  • windows: <path to chrome>/chrome.exe --remote-debugging-port=9222
  • macOS: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
  • linux: google-chrome --remote-debugging-port=9222

Step 2: Install "Debugger for Chrome" extension

Step 3: Setup your application

  1. Open your ember application, add a launch setting in .vscode/launch.json, here is an example:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "attach",
          "name": "Attach to Chrome",
          "port": 9222,
          "url": "http://localhost:4200/*",
          "webRoot": "${workspaceFolder}"
    	}
      ]
    }
  2. Enable inline source maps, open ember-cli-build.js file, add an entry like:

    babel: {
      sourceMaps: 'inline'
    }
  3. (Optional) If you're using typescript, you need to enable inline source maps in tsconfig.json as well, make sure these settings are correct:

    "inlineSourceMap": true,
    "inlineSources": true,

Step 4: Enjoy It!

Now, boot up your ember application, open it in the browser, then head back to VS Code and hit f5 key. That's it; you should see something like below:

image

@benedikt-buchert

This comment has been minimized.

Copy link

benedikt-buchert commented Oct 6, 2018

It worked for me only with adding sourcemaps path overrides:

"sourceMapPathOverrides": {
    "myappname/*": "${workspaceRoot}/app/*"
},
@nerdybeast

This comment has been minimized.

Copy link

nerdybeast commented Mar 29, 2019

So I have only been ever to debug ember apps by using "launch" in vscode which is a pain because you have to reopen the browser console everytime and it's a huge waste of time. BUT FINALLY today I got ATTACH working!

I'm on a Windows machine BTW using Windows 10.

My "attach" config looks like:

{
	"type": "chrome", //Requires the "Debugger for Chrome" vscode extension
	"request": "attach",
	"name": "attach", //Can be whatever name you want to give this config
	"port": 9222, //This needs to be the same port as the remote debugging port that you launch Chrome with
	"urlFilter": "http://localhost:4200*",
	"webRoot": "${workspaceFolder}",
	"sourceMapPathOverrides": {
		//"myappname" is from the environment.js "modulePrefix" property.
		"myappname/*": "${workspaceFolder}/app/*"
	}
}

Then I modified the shortcut to Chrome on my machine to add "--remote-debugging-port=9222"
NOTE: I had to wrap this in double quotes to get it to work for me...

So the "Target" property for me looks like:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" "--remote-debugging-port=9222"

image

Then in ember-cli-build.js add:

babel: {
    sourceMaps: 'inline'
}

That looks like:

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

  return app.toTree();
};

All this and my breakpoints in vscode hit the correct source:
image

👊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.