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.

In this post, we’ll go through the steps required to debug such apps right in WebStorm (or IntelliJ IDEA, PhpStorm, PyCharm, or RubyMine). If you have never used JavaScript debugger in WebStorm before, we recommend watching this video first to learn how to get started.

0. Open an app generated with create-react-app.

1. Run npm start to 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.

2. Wait till the app is compiled and the Webpack dev server is ready. Open http://localhost:3000/ to view it in the browser.

cra-app-is-running

3. Create a new JavaScript debug configuration in WebStorm (menu Run – Edit configurations… – Add – JavaScript Debug). Paste http://localhost:3000/ into the URL field.

4. In WebStorm 2017.1 (now available under the Early Access Preview)

No additional configuration is needed: go to step 5!

4. In WebStorm 2016 (.1, .2 and .3)

Configure the mapping between the files in the file system and the paths specified in the source maps on the dev server. This is required to help WebStorm correctly resolve the source maps.

The mapping should be between the src folder and webpack:///src

Add this value to the table with the project structure in the debug configuration like this:

cra-rc
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 webpack:///src/index.js

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

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

cra-debug

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:

react-live

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).
  • When using webpack-dev-server on Windows, it’s recommended to disable the IDE Safe write feature, otherwise, the app won’t be updated on-time on changes. This issue is fixed in Webpack 2.

– JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged , , . Bookmark the permalink.

29 Responses to Debugging React apps created with Create React App in WebStorm

  1. Divya van Mahajan says:

    Unclear how this is supposed to work. I just purchased WebStorm. Created a new app with create-react-app. Then I tried to follow this article – and it doesn’t work.
    Things missed.
    1. Install Chrome and Install JetBrains-IDE-Support extension for Chrome.
    2. “clicking the Debug button next to the list of configurations.”??? — Please put in a screenshot. This took a while to figure out.

    • Ekaterina Prigara says:

      Have you been able to get it working?
      I will add links to our help system regarding both points. When writing the post, I assumed the reader has some experience with WebStorm.

  2. Richard says:

    Stuck on step “4. In WebStorm 2016 (.1, .2 and .3)” I’m using WebStorm 2016.3.3. Not sure how to create the mapping “between the src folder and webpack:///src”. I’ve tried, to no avail, clicking around to “add this value to the table with the project structure in the debug configuration like this”. How do I do this?

  3. Richard says:

    Got past my problem with step 4. I’m doing this on Windows, so the UI might be a little more confusing that on a Mac. In the “Run/Debug Configurations” panel it is not very obvious (wasn’t obvious to me) that their was an editable second column field to the right of the “src” field.

    • Ekaterina Prigara says:

      Thanks for your feedback. I will add a gif that shows how to do that.
      Does debugging work fine for you now?

      • Richard says:

        Unfortunately, no. Despite putting multiple breakpoints in both the “index.js” and “App.js” files (both files created by the create-react-app tool), I’m not able to hit any of the breakpoints with the WebStorm IDE debugger.

        The “npm start” command seems to be working -the app is running fine at http://localhost:3000/. The Webpack Hot Module Replacement is also working fine. Editing and saving changes to either the index.js or App.js files results in instant updates to the site at http://localhost:3000/.

        But clicking on the Debug button next to the list of configurations on the top right corner of the IDE does nothing but bring up this message in the WebStorm console: “Waiting for connection from JetBrains IDE Support extension for Chrome. Please ensure you have installed the extension and IDE port configured (current port 63342)”

        As far as I can tell the JetBrains IDE Support Chrome extension is installed and configured with port 63342.

        Not sure what to try next?

  4. Michael Reynolds says:

    Thanks for the post. It works great after creating a new react app with create-react-app. I noticed that it does not work after ejecting. Could you please comment on the configuration for an ejected app?

  5. Alon Diamant says:

    FYI: there is a bug with 2017.1 EAP.

    When I tried to follow this guide with a somewhat complex application, WebStorm has an internal error:


    2017-03-02 02:31:27,940 [14959128] ERROR - ebugger.JavaScriptDebugProcess - IdeaLoggingEvent[message=Cannot decode sourcemap http://localhost:3001/static/build/client.bundle.js.map, throwable=java.io.IOException: Cannot get content of directory: file:///home/user/workspace/company/product/src/client
    at com.intellij.openapi.vfs.newvfs.impl.VirtualDirectoryImpl.contentsToByteArray(VirtualDirectoryImpl.java:420)
    at com.intellij.javascript.debugger.FileResolverByContentKt.selectMostSimilarFile(fileResolverByContent.kt:130)
    at com.intellij.javascript.debugger.FileResolverByContentKt.selectMostSimilarFile(fileResolverByContent.kt:110)
    at com.intellij.javascript.debugger.FileResolverByContentKt.resolveFileBySourceUrl(fileResolverByContent.kt:76)
    at com.intellij.javascript.debugger.JavaScriptDebugProcess.createSourceMapSourceResolver(JavaScriptDebugProcess.kt:967)
    at com.intellij.javascript.debugger.JavaScriptDebugProcess$decodeSourceMap$2.invoke(JavaScriptDebugProcess.kt:947)
    at com.intellij.javascript.debugger.JavaScriptDebugProcess$decodeSourceMap$2.invoke(JavaScriptDebugProcess.kt:74)
    at org.jetbrains.debugger.sourcemap.SourceMapDecoderKt.a(SourceMapDecoder.kt:179)
    at org.jetbrains.debugger.sourcemap.SourceMapDecoderKt.decodeSourceMap(SourceMapDecoder.kt:59)
    at com.intellij.javascript.debugger.JavaScriptDebugProcess.decodeSourceMap(JavaScriptDebugProcess.kt:947)
    at com.intellij.javascript.debugger.JavaScriptDebugProcess.decodeSourceMap$default(JavaScriptDebugProcess.kt:945)
    at com.intellij.javascript.debugger.sourcemap.SourceMapLoaderKt.findSourceMap(SourceMapLoader.kt:152)
    at com.intellij.javascript.debugger.JavaScriptDebugProcess.findSourceMapBeforeAdd(JavaScriptDebugProcess.kt:751)
    at com.intellij.javascript.debugger.JavaScriptDebugProcess$MyDebugEventListener.scriptAdded(JavaScriptDebugProcess.kt:580)
    at sun.reflect.GeneratedMethodAccessor226.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at com.intellij.util.EventDispatcher.dispatch(EventDispatcher.java:99)
    at com.intellij.util.EventDispatcher.access$200(EventDispatcher.java:35)
    at com.intellij.util.EventDispatcher$2.invoke(EventDispatcher.java:79)
    at com.sun.proxy.$Proxy105.scriptAdded(Unknown Source)
    at org.jetbrains.wip.WipScriptManager.scriptParsed(WipScriptManager.kt:100)
    at org.jetbrains.wip.WipVm$2.invoke(WipVm.kt:51)
    at org.jetbrains.wip.WipVm$2.invoke(WipVm.kt:16)
    at org.jetbrains.jsonProtocol.EventMap.handleEvent(EventMap.kt:49)
    at org.jetbrains.wip.WipCommandProcessor.eventEmitted(WipCommandProcessor.kt:33)
    at com.jetbrains.debugger.wip.extension.DebuggerService$invoke$2.invoke(DebuggerService.kt:116)
    at com.jetbrains.debugger.wip.extension.DebuggerService$invoke$2.invoke(DebuggerService.kt:65)
    at com.jetbrains.debugger.wip.extension.JbWipVm$queueProcessor$1.consume(JbWipVm.kt:16)
    at com.jetbrains.debugger.wip.extension.JbWipVm$queueProcessor$1.consume(JbWipVm.kt:13)
    at com.intellij.util.concurrency.QueueProcessor.lambda$null$0(QueueProcessor.java:106)
    at com.intellij.util.concurrency.QueueProcessor.runSafely(QueueProcessor.java:223)
    at com.intellij.util.concurrency.QueueProcessor.lambda$wrappingProcessor$1(QueueProcessor.java:106)
    at com.intellij.util.concurrency.QueueProcessor.lambda$null$2(QueueProcessor.java:203)
    at com.intellij.util.concurrency.QueueProcessor.runSafely(QueueProcessor.java:223)
    at com.intellij.util.concurrency.QueueProcessor.lambda$startProcessing$3(QueueProcessor.java:203)
    at com.intellij.openapi.application.impl.ApplicationImpl$2.run(ApplicationImpl.java:332)
    at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
    at java.util.concurrent.FutureTask.run(FutureTask.java:266)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)
    ]

    There is no clear notification of this, and it is plainly infuriating seeing it simply not work, silently..

    Anyways, changing the devtool to eval-source-map worked, for now – I can now debug server side (via nodemon) and client side (browser debug) at the same time.

    • Ekaterina Prigara says:

      Hi Alon,

      It seems that the IDE somehow can’t access the home/user/workspace/company/product/src/client folder. Is that a project folder? Can you open and modify the content in it in the IDE?

  6. Kurt Smith says:

    Never hits a breakpoint for me. Everything appears to start up correctly. Nothing meaningful in the log. You guys should probably pull this as a viable debugging option until you get the kinks worked out.

    running chrome 56.0.2924.87 (64-bit)

    WebStorm 2016.3.3
    Build #WS-163.12024.17, built on January 31, 2017

    • Ekaterina Prigara says:

      Hi Kurt,
      Can you please provide a bit more details? What react-scripts version do you use? Have you ejected the app or not? Where the breakpoint is put? Thanks!

  7. George Mamalakis says:

    Hi,

    Is there a way to debug React apps that haven’t been created with Create React App? Because I’ve bought a SmartAdmin theme that has its own webpack.config.js and I don’t know how to debug it with Pycharm 2016.3.2 (Pycharm works exactly the same way as Webstorm does when creating React apps). I assume that the problem is the source mapping. In my case, I don’t know how to find the analogous http://localhost:3000/static/js/bundle.js.map in order to see how main.js is called in my case and configure Pycharm’s mapping accordingly.

    (I’ve followed all steps mentioned in this post (except for the source mapping), webpack starts, Pycharm calls the browser with IDEA’s plugin which explains that it’s debugged by IDEA, but breakpoints obviously don’t work)

    If you have any suggestions on how to make Webstorm/Pycharm integrate with external webpack.config.js files, I -and I suppose everyone else having bought a custom theme- would be glad to know.

    Thank you for your help in advance, and thanks for this guide!

    George.

    • Ekaterina Prigara says:

      Hello George,
      I would recommend you to try PyCharm 2017.1 EAP: https://www.jetbrains.com/pycharm/nextversion/ It’s not a stable version yet, but soon will be. In this update we’ve improved the debugging experience with webpack and in most cases debug should work without any additional configurations (but make sure you have devtool: ‘source-map’ in your webpack.config.js). Please give it a try!

      To find the analogue for static/js/bundle.js.map and configure debugging in PyCharm 2016.3.2, try to check the output – filename path in the webpack.config.js and add .map to it. If that doesn’t help, please contact our tech support, we’d be happy to help, but we would need to project sources (at least webpack.config.js).

      • George Mamalakis says:

        Thanks Ekaterina!

        I’ll try your suggestions starting from my current version. I’ll come back with my findings in order to help others facing analogous problems.

  8. Jim Constantine says:

    Here’s my setup:
    Mac OS X 10.12.4
    Chrome Version 57.0.2987.110 (64-bit)
    WebStorm 2017.1
    Build #WS-171.3780.79, built on March 17, 2017
    Chrome not default browser
    Installed Chrome – JetBrains IDE Support extension

    * newly created “create-react-app”
    * created a run/debug config
    * debug
    * chrome opens (not on a new tab)
    * nothing happens
    * Waiting for connection from JetBrains IDE Support extension for Chrome (IDE port 63343). – in debugger tab

    • Ekaterina Prigara says:

      Can you please try to restart Chrome.
      Has you started the app with npm start first, before debugging?

      • Jim says:

        I’ve restarted Chrome. That didn’t help.
        The app was started with npm start first.
        Restarting WebStorm as well had no effect.

        • Ekaterina Prigara says:

          Can you please check that the port numbers are the same in the IDE (Preferences | Build, Execution, Deployment | Debugger) and in Chrome extension (right-click on the extension icon – Options).

  9. Hendrik says:

    I am a newbie too. I got the debugger attached, but no breakpoints were hit.

    Solution: change some file, such that page is reloaded. And voila!

    Thanks for the tutorial

    • Ekaterina Prigara says:

      Do you have a breakpoint in the code that is executed only on the page load? Reloading should help then, right.

Leave a Reply

Your email address will not be published. Required fields are marked *