Live edit and debug your React apps directly from VS Code โ€” without leaving the editor ๐Ÿ”ฅ ๐ŸŽ‰๐ŸŽˆ

Demo of React app being live edited and debugged from VS Code

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

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

4. Start your React app by running npm start in your favorite terminal

5. 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.

--

--

--

Developer Experience @stripe / Alum @code , @microsoft , @citrix , @podio , @vodafone , @zyb / @WEF Global Shaper / @coldfrontconf founder / @goog

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Typechecking With React PropTypes

Open Sourcing the Magnificent Escape Action

null vs undefined

Deploy web application on Firebase hosting

After sign in to Firebase for the first time.

I built a digital signage manager for a music festival using Next.js and Dato CMS.

React JS

Immutability in TypeScript

Hello! I have been working on my portfolio website for the past week and I feel as though I haveโ€ฆ

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kenneth Auchenberg

Kenneth Auchenberg

Developer Experience @stripe / Alum @code , @microsoft , @citrix , @podio , @vodafone , @zyb / @WEF Global Shaper / @coldfrontconf founder / @goog

More from Medium

Supercharge your app with runtime type-checking using ZOD

Level up with TypeScript

npm startโ€ฆ NPM START!?

Customizing a Drawer Element in a Quick App