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

@nerdybeast

This comment has been minimized.

nerdybeast commented May 17, 2018

Fun tip for windows users, if you launch chrome from your task bar or desktop shortcut you can set the remote debugging port in the properties so that it's enabled every time you launch chrome:

screenshot_24

@benedikt-buchert

This comment has been minimized.

benedikt-buchert commented Oct 6, 2018

It worked for me only with adding sourcemaps path overrides:

"sourceMapPathOverrides": {
    "myappname/*": "${workspaceRoot}/app/*"
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment