In our most recent release of our Chrome debugger for VS 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 🔥 🎉🎈
How to get started in 6 steps
- Download the latest release of VS Code and install our Chrome debugger
- Create your React app using create-react-app
- Use the following config for your
launch.jsonfile to configure the VS Code debugger and put it inside.vscodein your root folder. - Start your React app by running
npm startin your favorite terminal - Start debugging in VS Code by pressing
F5or by clicking the green debug icon
Happy debugging! 🎉🎈
Details
Our Chrome debugger now supports Webpack’s Hot Module Replacement mechanism, which pushes module changes to the browser by running a local file watcher.
Our 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.
/k