Remote Browser Debugging with VSCode

README.md

How to remotely debug your React Application + Webpack from VSCode

1. Set up your .vscode/launch.json file with the code given above. Note that the code is approximate - your project's might differ.
2. Run your development server - in my case, with Webpack Dev Server, via a npm script such as npm start.
3. Set a breakpoint in your main JS/JSX module.
4. Switch to the Run & Debug in VSCode - usually second option of the VS Code left side bar.
5. Run the Debug in Chrome Canary task.

Useful Resources

1. https://code.visualstudio.com/docs/nodejs/debugging-recipes
2. https://medium.com/@auchenberg/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f
3. https://gist.github.com/jarshwah/389f93f2282a165563990ed60f2b6d6c
4. https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate

launch.json

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Debug in Chrome Canary",
    "request": "launch",
    "type": "pwa-chrome",
    "webRoot": "${workspaceFolder}/<your_src_path>",
    "url": "http://<your_landing_URL>",
    "runtimeExecutable": "canary",
    "sourceMapPathOverrides": {
      "webpack:///./~/*": "${webRoot}/node_modules/*",
      "webpack:///./*": "${webRoot}/*",
      "webpack:///../*": "${webRoot}/*",
      "webpack:///*": "*"
    }
  }]
}

webpack.config.js

// Based on https://gist.github.com/jarshwah/389f93f2282a165563990ed60f2b6d6c
// source: ./<asset>
// target: ./<asset>
{
  resolve: {
    root: [ // older webpack config
      path.join(__dirname, '/'), // source at ./
    ]
    devtool: "source-map", // many options, but this one works best: https://webpack.js.org/configuration/devtool/
    output: {
      filename: '[name].js',
      path: path.join(__dirname, '/'), // compile to ./
      // The following line makes the magic to remotely debugging the browser on VSCode
      devtoolModuleFilenameTemplate: 'file://[absolute-resource-path]' // map to source with absolute file path not webpack:// protocol
    }
  }
}