Supercharge your React debugging workflow with Visual Studio Code and Chrome debugging.

by Bruce Bentley ( @bruce_bentley )

In the most recent release of our Chrome Debugger for Visual Studio Code, we have landed a bunch of improvements to our sourcemapping-engine, which enables us to support live-editing and debugging out of the box with create-react-app.

This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.

You can now write code, set a breakpoints, make a changes to the code, and debug your newly modified code — all from your editor 🔥🎉🎈

1. Download the latest release of Visual Studio Code and install the Chrome Debugger
2. Create your React app using create-react-app
3. Use the following config for your launch.json file to configure the Visual Studio Code debugger and put it inside .vscode/ in your root folder.

   {
      "version": "0.2.0",
      "configurations": [
          {
              "name": "Chrome",
              "type": "chrome",
              "request": "launch",
              "url": "http://localhost:3000",
              "webRoot": "${workspaceRoot}/src"
          }
      ]
   }

4. Start your React app by running npm start in your favorite terminal.
5. Start debugging in Visual Studio Code by pressing F5 or by clicking the green debug icon.

🎈🎉 Happy debugging! 🎉🎈

The Chrome debugger now supports Webpack’s Hot Module Replacement mechanism, which pushes module changes to the browser by running a local file watcher.

The Chrome debugger is now able to pickup these changes and re-applies the newly generated HMR sourcemap to the loaded source files on the fly. This enables the live editing and debugging experiences, without adding a need for more file watches or background tools.