Skip to content

Instantly share code, notes, and snippets.

@nightire
Created May 17, 2018 11:21

Revisions

  1. nightire created this gist May 17, 2018.
    48 changes: 48 additions & 0 deletions debug_ember_app_in_vscode.md
    Original 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)