## 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:

    ``` json
    {
      "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:

	``` javascript
	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:

    ``` json
    "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 <kbd>f5</kbd> key. That's it; you should see something like below:

![image](https://user-images.githubusercontent.com/1104018/40173991-3be676ea-5a06-11e8-9ecb-1265e94092a7.png)