Debugging React apps created with Create React App in WebStorm
With Create React App you can quickly bootstrap a new React project. And you don’t have to configure anything to get the app running – it comes with the preconfigured dev environment that uses Webpack, Babel, ESLint and other tools.
Open an app generated with create-react-app.
npm startto get the app running in the development mode.
You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm.
Wait till the app is compiled and the Webpack dev server is ready. Open http://localhost:3000/ to view it in the browser.
Save the configuration, place breakpoints in your code and start a new debug session by clicking the Debug button next to the list of configurations on the top right corner of the IDE.
Once a breakpoint is hit, go to the debugger tool window in the IDE. You can explore the call stack and variables, step through the code, set watcher, evaluate variables and other things you normally do when debugging.
This app is using Webpack Hot Module Replacement by default and that means that when the dev server is running, the app will automatically reload if you change any of the source files and hit Save. And that works also together with the WebStorm debugger! Have a look:
Please take note of these known limitations:
- The breakpoints put in the code executed on page load might not be hit when you open an app under debug session for the first time. The reason is that the IDE needs to get the source maps from the browsers to be able to stop on a breakpoint you’ve placed in an original source, and that only happens after the page has been fully loaded at least once. As a workaround, reload the page in the browser.
- Webpack in Create React App generates source maps of the type
cheap-module-source-map. This kind of source maps do not guarantee the most precise debugging experience. We recommend using
devtool: 'source-map'To make changes to the app’s Webpack configuration, ‘eject’ the app (refer to the Create React App manual to learn more).
If you’re using WebStorm 2016 (.1, .2 and .3)
The mapping should be between the
src folder and
Add this value to the table with the project structure in the debug configuration like this:
If you’re wondering how we got this mapping, check http://localhost:3000/static/js/bundle.js.map file. This is a source map file for the bundle that contains the compiled application source code. Search for index.js, the main app’s file; its path is
More on using React in WebStorm:
- Working with ReactJS in WebStorm: Coding Assistance
- Working with ReactJS in WebStorm: Linting, refactoring and compiling
- Developing mobile apps with React Native
– JetBrains WebStorm Team