How to debug an ember application with VS Code

debug_ember_app_in_vscode.md

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: