Skip to content

Instantly share code, notes, and snippets.

@nightire
Created May 17, 2018 11:21
Show Gist options
  • Save nightire/38ad30167df55175853b20f025f46596 to your computer and use it in GitHub Desktop.
Save nightire/38ad30167df55175853b20f025f46596 to your computer and use it in GitHub Desktop.
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

@yshteinm
Copy link

yshteinm commented Jun 17, 2022

Cannot make it work. Breakpoint shows as Unbound and app stops in "dist/assets/finalfile.js"
Below is my configs. Any advice?

{
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "attach",
      "port": 9222,
      "urlFilter": "http://localhost:4200*",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        // "emberjs-tutorial/*": "${workspaceRoot}/app/*",
        "emberjs-tutorial/*": "${workspaceFolder}/app/*"
      }
    },    

    
  ]
}
module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      extension: 'scss',
    },
    babel: {
      sourceMaps: 'inline'
    },
    // sourcemaps: { enabled: true, extensions: ['js'] }
  });

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment