Created
May 17, 2018 11:21
Revisions
-
nightire created this gist
May 17, 2018 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,48 @@ ## 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)