Tips & Tricks

Debugging React Apps Created With Create React App in WebStorm

Note: This post was updated in June, 2021.

The create-react-app package can help us bootstrap a new React app with a ready-to-use development environment that uses Webpack, Babel, ESLint, and other tools. In this post, you’ll learn how to start the process of debugging a React application that is running on the localhost.

If you have never used the JavaScript debugger in WebStorm before, we recommend watching this video first to learn how to get started. The same principles you learn there can be applied to our other IDEs, including IntelliJ IDEA, PhpStorm, and PyCharm.

Generate an application with create-react-app

With WebStorm, you don’t have to download create-react-app in advance – during the project generation stage, the IDE can download and run it using npx.

Select File | New Project from the main menu, then, in the New Project dialog, select React as the project type, and specify the application name (blog_react) and a parent folder for it (WS).

Generate a React application with Create React App.

When you click Create, WebStorm downloads and runs create-react-app, which generates an app with a React-specific structure, and downloads all the required dependencies.

Learn more about Creating a new React application.

You do not need to define any run/debug configurations yourself, as WebStorm has already created two default ones for you:

  • npm start, to launch your app in development mode.
  • Debug Application, to debug your app.

Set breakpoints in your code

WebStorm recognizes line breakpoints, exception breakpoints, and conditional breakpoints. To set a line breakpoint, click the gutter next to the executable line of code where you want the application to suspend. To remove a breakpoint, just click on it.

Setting and removing breakpoints.

Run the application in development mode

You can do this in several ways:

  • Open the built-in terminal and type npm run start.
  • Double-click the start task in the npm tool window.

Run a React app in the development mode from the npm tool window.

  • Open your package.json file, click on the Run Script gutter icon next to the start script, and select Run ‘npm start’ from the list.

Run a React app in the development mode from package.json.

  • Select the npm start run/debug configuration from the list on the toolbar and click on the Run button next to the list.

Run a React app in the development mode via a run/debug configuration.

No matter which method you use, WebStorm launches the predefined npm start run/debug configuration. When the app is compiled and the Webpack dev server is ready, the Run tool window shows that the app is running in the browser at http://localhost:3000/.

React app is running in the development mode.

Note that when the dev server is running, the app will automatically reload if you change any of the source files.

Launch a debugging session

You can now start debugging your app right from the Run tool window! Just hold Ctrl+Shift / ⌘⇧ and click the URL address where the application is running. WebStorm launches the auto generated Debug Application run/debug configuration, the browser opens at http://localhost:3000/, and the Debug tool window appears showing you the call stack and variables.

Start a debugging session from the Run tool window.

Of course, you can also select the Debug Application run/debug configuration from the list on the toolbar and click the Debug button next to the list of configurations in the top right-hand corner of the IDE.

Examine the suspended application

Once a breakpoint is hit, WebStorm opens the Debug tool window, where you can explore the call stack and variables, step through the code, set watchers, evaluate variables, and do all the other things that you can normally do when debugging. You can consult the Examine suspended program and Step through the program docs to learn more about this process.

Debugging session

Known limitations

  • The breakpoints that are put in the code and executed on page load might not be hit when you open an app under a debug session for the first time. This is because the IDE needs to get the source maps from the browsers to be able to stop on a breakpoint you’ve placed in the original source, and that only happens after the page has been fully loaded at least once. As a workaround, you can 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 map doesn’t guarantee the most precise debugging experience. We recommend that you use 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 have any problems debugging your application, please contact our support team. Please share information about your IDE version, the breakpoint locations and, if possible, your project.

More on using React in WebStorm:

The WebStorm team

Comments below can no longer be edited.

83 Responses to Debugging React Apps Created With Create React App in WebStorm

  1. Avatar

    Divya van Mahajan says:

    January 29, 2017

    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

      Ekaterina Prigara says:

      January 30, 2017

      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.

      • Avatar

        Iwa says:

        June 29, 2019

        You should not assume anything! Make things simpler even if requires more work. The mindset should be I have to teach dumb ass developer how to do silly configurations.

        • Ekaterina Prigara

          Ekaterina Prigara says:

          July 1, 2019

          Hello Iwa,
          I’ve improved the blog post based on that feedback adding the links.
          Have you experienced any problem when following this tutorial? I would appreciate your feedback.

  2. Avatar

    Richard says:

    February 15, 2017

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

    Richard says:

    February 15, 2017

    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

      Ekaterina Prigara says:

      February 15, 2017

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

      • Avatar

        Richard says:

        February 17, 2017

        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?

        • Ekaterina Prigara

          Ekaterina Prigara says:

          February 21, 2017

          Please try to disable and re-enable extension in the browser. If that doesn’t help, please send us the content of your IDE log folder (menu Help – Show log) to our tracker youtrack.jetbrains.com/issues/WEB or tech support https://intellij-support.jetbrains.com/hc/en-us/requests/new
          Thanks!

          • Avatar

            Richard says:

            February 22, 2017

            Before getting your latest reply, I tried restarting both Chrome and WebStorm which seems to have resolved the problem. I’m now able to hit the breakpoints. Thanks.

          • Avatar

            rob says:

            February 10, 2019

            This is what worked for me (disable / re-enable the jetbrains ide support extension in chrome). Seems like a bug? I wasted many hours futzing around before finding this. I would put it into the main instructions and documentation to avoid having other people waste countless hours on this problem.

            • Ekaterina Prigara

              Ekaterina Prigara says:

              February 11, 2019

              Hello Rob,
              Sorry to hear about that. What IDE version do you use?
              Starting with WebStorm 2017.3, released at the end of 2017, the IDE doesn’t require a Chrome extension for debugging client-side apps in Chrome. Though it’s still possible to use it with the additional configuration, we do not recommend that.

  4. Avatar

    Michael Reynolds says:

    February 21, 2017

    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?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      February 21, 2017

      Have you updated the type of the source maps in webpack.config.js to devtool: ‘source-map’? Did it help?

      • Avatar

        Michael Reynolds says:

        February 21, 2017

        That did it. Thanks. It’s interesting that it wasn’t required before it was ejected.

        • Ekaterina Prigara

          Ekaterina Prigara says:

          February 21, 2017

          Yes, that’s weird, I also had the same issue and I believe it shouldn’t be like that. Hope it will be fixed soon.

  5. Avatar

    Alon Diamant says:

    March 2, 2017

    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

      Ekaterina Prigara says:

      March 3, 2017

      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?

      • Avatar

        Alon Diamant says:

        March 4, 2017

        Nope. Not at all protected. Completely accessible. Don’t think it is that kind or problem.

        • Ekaterina Prigara

          Ekaterina Prigara says:

          March 6, 2017

          Is that a folder in your project? Can you please share your project with us via our issue tracker or tech support request.
          Thanks!

          • Avatar

            Alon Diamant says:

            March 6, 2017

            It is indeed a folder in my project.
            I’m sorry, I can’t share the source code. If I have time later this month, I’ll create an example-project and share it.

            Anyways, now others know – so I hope less frustration will occur.

            • Ekaterina Prigara

              Ekaterina Prigara says:

              March 7, 2017

              Thanks! We’ll let you know if we encounter the same exception and will be able to reproduce the problem.

  6. Avatar

    Kurt Smith says:

    March 7, 2017

    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

      Ekaterina Prigara says:

      March 7, 2017

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

    George Mamalakis says:

    March 10, 2017

    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

      Ekaterina Prigara says:

      March 10, 2017

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

      • Avatar

        George Mamalakis says:

        March 10, 2017

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

    Jim Constantine says:

    March 26, 2017

    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

      Ekaterina Prigara says:

      March 27, 2017

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

      • Avatar

        Jim says:

        March 27, 2017

        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

          Ekaterina Prigara says:

          March 28, 2017

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

    Hendrik says:

    April 19, 2017

    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

      Ekaterina Prigara says:

      April 19, 2017

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

  10. Avatar

    Konstantin says:

    May 13, 2017

    Doesn’t work in 2017.1
    Did everything as instructed:
    1. created new app with create-react-app
    2. started it, waited until it emerged in a browser
    3. created javascript debug configuration with “localhost:3000” as a URL
    4. …
    5. Launched debugging

    “JB” icon in chrome remains green with “Not connected” tooltip. And Webstorm says “Waiting for connection from JetBrains IDE Support extension for Chrome (IDE port 63343).”

    Ports are same in both extension and IDE. Tried to “telnet 127.0.0.1 63342” — it worked.

    Can you please give me a little hint on how can I troubleshoot this?

    Thanks!

    • Ekaterina Prigara

      Ekaterina Prigara says:

      May 15, 2017

      Can you please make sure that the ports are the same in the IDE and in the extension? In your comment you’ve mentioned 2 different port numbers: 63343 and 63342.
      If it still doesn’t work, please send us the content of your IDE log folder (menu Help – Show logs) to https://youtrack.jetbrains.com/issues/WEB
      Thank you!

  11. Avatar

    Gant says:

    May 28, 2017

    Now suddenly i have this. Can not debug at all
    Error running debugred: com.intellij.ide.browsers.BrowserLauncherImpl$checkCreatedProcess$1 cannot be cast to java.lang.Runnable

  12. Avatar

    Amrish says:

    June 7, 2017

    Can I debug application from the scratch? like from route.js? If so please suggest me

    • Ekaterina Prigara

      Ekaterina Prigara says:

      June 7, 2017

      Please reply to my comment in your other thread.

  13. Avatar

    Dimitrios Proios says:

    June 19, 2017

    Hello I amwondering how it is possible to debug a create-react-app node module (I want that to figure out why the webpack dev-server cannot forawrd a message to a proxy)
    I am trying and dont know how to properly a breakpoint for the server part of the application. Any ideas?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      June 20, 2017

      You can create a new Node.js run/debug configuration in the IDE. In the JavaScript file field you need to specify the file that starts the web server (in case of create-react-app it’s a file in the react-scripts module) and pass the required parameters. You then need to start this configuration instead of running npm start.
      However, we tried debugging react-scripts and had no luck either in WebStorm, now using Node.js debugger in Chrome. We’re still investigating why.

  14. Avatar

    Steve says:

    June 23, 2017

    I’m getting this too:
    com.intellij.ide.browsers.BrowserLauncherImpl$checkCreatedProcess$1 cannot be cast to java.lang.Runnable

    Saw suggestion to uninstall and reinstall Chrome plugin to fix it. I tried that, and it’s still happening fr me

    • Avatar

      lena_spb says:

      June 23, 2017

      Steve, looks similar to https://youtrack.jetbrains.com/issue/WEB-27106. Please make sure that the port opened by WebStorm (usually 63342) matches the one specified in Chrome extension settings (chrome-extension://hmhgeddbohgjknpmjagkdomcpobmllji/options.html)

  15. Avatar

    Harry Kapsales says:

    July 20, 2017

    I’ve had no luck with this
    Using Webstorm 2016.1.3 & Google chrome
    Have verified all settings:
    port = 63342
    url = ‘http://localhost:3000/’
    src remote url = ‘webpack:///src’

    devtool: ‘source-map’ in /node_modules/react-scripts/config/webpack.config.js

    Set break point in click handler that executes after page has loaded

    Webstorm is able to connect to chrome. console.log(…) statements successfully write to the webstorm console but breakpoints are not honored. Debugger indicates that it is connected to chrome

    • Ekaterina Prigara

      Ekaterina Prigara says:

      July 21, 2017

      Sorry, there have probably been various changes in the way how webpack and source maps are configured in the newer versions of create-react-app, we haven’t tested that for the old WebStorm versions. Please try the latest WebStorm 2017.2, it doesn’t require any configuration at all. Thanks!

  16. Avatar

    Piotr Jander says:

    July 24, 2017

    Just reporting that the link to Developing mobile apps with React Native in WebStorm at the bottom of the article is broken.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      July 25, 2017

      Thanks for noticing. I’ve updated the link.

  17. Avatar

    Dave says:

    August 21, 2017

    If you’re using a shared project within your project, how would you setup sourcemaps so that you can debug that too as part of the whole app’s debug.

    For example we have a folder that sits at the root of our Web App that contains a library we created for shared React Components to be used in projects. With webpack we create a lib folder which is where we compile that to under /build.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 21, 2017

      Do you mean how to configure webpack to generate the correct source maps?

      • Avatar

        Dave says:

        August 21, 2017

        I think so. Setup is:

        Our Web App:
        /build
        /lib (where we compile the shared lib to)
        Search.js (I want to put a breakpoint here somehow)
        bundle.js

        /shared-react
        /src
        /components

        shared-react project
        /src
        /components
        Search.js

        In our web app we import those modules from shared-read
        e.g. import { Search,
        } from ‘@companyName/shared-react’;

        • Avatar

          Dave says:

          August 21, 2017

          btw, for some reason the indents got stripped in my last comment. Basically it’s shared-react project: /src/components/Search.js is imported into Our web project which has a build folder, so build/lib, build/bundle.js, etc. so picture it that way

  18. Avatar

    Dave says:

    August 21, 2017

    so basically it’s a node module, one of our own….that I want to debug into from our web project

    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 22, 2017

      Have you already tried debugging this setup yourself? Do you generate source maps when compiling your library? Is the file you want to put the breakpoint in (lib/Search.js) a compiled file, not the source, right?

  19. Avatar

    Preston Tighe says:

    August 28, 2017

    I’m using WebStorm 2017.2.2, Serverless, and Webpack. Everything works the first time but not any following request. Here is more info: https://stackoverflow.com/questions/45915139/webpack-webstorm-serverless-debug-source-map-issue. Could this be a Webstorm issue?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      August 29, 2017

      Unfortunately, very hard to tell without testing that on a real project. Any chance you can send your project to our tech support for the investigation: https://intellij-support.jetbrains.com/hc/en-us/requests/new? Or may be you know a simple similar project we can use. It’s also important what Node.js version you use.

      • Avatar

        Preston Tighe says:

        August 29, 2017

        Alright I just submitted my request. I uploaded the exact project I’m working on.

        • Ekaterina Prigara

          Ekaterina Prigara says:

          August 30, 2017

          Thank you!

  20. Avatar

    David Scrève says:

    October 3, 2017

    It simply does not work with WebStorm 2017.2.4….and IntelliJ IDEA 2017.2 simply crash when launching npm start…
    Any help would be appreciated.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 4, 2017

      Can you please give us a bit more details? What error message do you see? Can you run npm start for this app from the terminal?

  21. Avatar

    Reto says:

    October 24, 2017

    Hi

    I just tried to follow the instructions but debugging does not work.
    When I start the debugger, I get the following message in the console:

    Error in event handler for (unknown): TypeError: Cannot read property ‘trace’ of undefined at ext.backgroundPage.sendMessage.response (chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js:499:20)

    The chrome extension and debugging work fine for “plain” html5/JS projects.
    WebStorm 2017.2.4

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 25, 2017

      This error message shouldn’t actually affect debugging (it’s caused by AdBlock). For me debugging works fine with “react-scripts”: “1.0.14” and WebStorm 2017.2.5.

      Can you please describe where the breakpoints are put in your app? Or maybe you can send us your application? You can create a new issue on our tracker or contact our support.

      As we’ve mentioned in 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. But if you reload it in the browser when the debugging session is already running, they will be hit.

  22. Avatar

    Carl says:

    December 9, 2017

    Using WebStorm 2017.3 and new to REACT. I was looking for this exact information. It was very helpful. I am adding this comment in case another newbie like myself finds your post.

    > created a new project with create-react-app
    0. Opened my project with WebStorm
    1. In WebStorm terminal, I entered npm start
    2. http://localhost:3000/ in opened in my default browser: Chrome
    3. Set the configuration per instructions above, plus made sure Chrome was my default browser.
    4. Went to step 5
    5. per instructions
    6. Opened app.js and placed a breakpoint in
    Welcome to React
    started debug, hit the breakpoint
    Chrome opened as set by the configuration
    Clicked resume program in the debug window.
    Restarted debug hit the breakpoint
    Chrome opened as set by the configuration
    Changed the Welcome to React text to Hello World
    Clicked resume program in the debug window.
    Clicked resume program in the debug window, the changed appeared in Chrome.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      December 11, 2017

      Thanks!

  23. Avatar

    Bram says:

    December 21, 2017

    This works for me but opens the app in Chrome, but my default browser is Firefox.

    Any info on how to get this to work in Firefox?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      December 21, 2017

      The app should open in the emulator, but Chrome is used by React Native and WebStorm as debugging backend. There’s no way to use Firefox instead, sorry.

  24. Avatar

    Jeff Schuler says:

    June 3, 2018

    When debugging a React Native Sample app (iOS in this case running on a real device) with IntelliJ Ultimate, when doing console.log(“some text”), the text will only display one time in a row in the console window. For example if I log something when a button is pushed, the log will happen the first time. On subsequent pushes no text is logged unless some other text is logged in between. However I found if I have two log statements in a row for that button push, even with the same text, the logging always happens to the console. If I turn off debugging and just log to the Xcode console, the logging works as expected. My setup is having IntelliJ launch the Chrome browser.

    These instructions were taken from: https://blog.jetbrains.com/webstorm/2016/12/developing-mobile-apps-with-react-native-in-webstorm/

    • Ekaterina Prigara

      Ekaterina Prigara says:

      June 3, 2018

      Hello Jeff,

      If the same message, from the same line of code was logged several times in a raw, instead of repeating the message, WebStorm shows a number of times it was logged next to it (and actually, Chrome’s DevTools do the same). I’ve reported an issue asking to make this label more visible: https://youtrack.jetbrains.com/issue/WEB-33118 Please follow it for the updates.

  25. Avatar

    li sanny says:

    August 19, 2018

    How to debug Vue cli project using WebStorm ? And the jetbrain chrome extension has long time since last update.

  26. Avatar

    Makoto says:

    October 17, 2018

    At first the instructions did not work, but it worked when I followed the instructions for WebStorm 2016, instead of 2017. I am using WebStorm 2018.2 on Debian. This issue happens everytime I create a new configuration. I’m not sure if this is intended or if its a bug.

    • Ekaterina Prigara

      Ekaterina Prigara says:

      October 17, 2018

      Hello,
      Can you please describe what exactly didn’t work? Thanks!

      • Avatar

        Makoto says:

        October 17, 2018

        When I followed the “WebStorm 2017.1+” instructions, the debugger did not pause at breakpoints. I placed a breakpoint at the first line of index.js, but that was not hit on step 5. Configuring the mapping was required for breakpoints to be hit, and breakpoints were not hit when I did not configure mappings.

        I just checked the documentation, and it does not mention configuring mappings, so I believe this is a bug.

        • Ekaterina Prigara

          Ekaterina Prigara says:

          October 18, 2018

          Breakpoints on import statements can’t be reliably hit in general because this code doesn’t really exist in the compiled sources. Does the problem persist if you check the Ensure breakpoints are detected when loading scripts option in the debug configuration without mappings? What IDE version do you use? Thanks!

          • Avatar

            Makoto says:

            October 18, 2018

            Yes, I’ve tried enabling “Ensure breakpoints are detected when loading scripts”. The same breakpoints were used to test both methods (instructions for 2016 and 2017). The IDE I use is Webstorm 2018.2.

            • Ekaterina Prigara

              Ekaterina Prigara says:

              October 19, 2018

              Please provide more information about these breakpoints. Where exactly they’ve been set. As I’ve mentioned breakpoints on the import statements can’t be hit in any debugger.

  27. Avatar

    Chris says:

    December 12, 2018

    I have a microservice application created with react. My backend is simulated with node.js at the moment. My frontend consists of three javascript applications, that are rendered using tailor.

    I followed these instruction from above (using phpstorm 2018.2.5 instead).

    I use devtool: ‘source-map’ in the webpack.config.js of every microservice and configured a Javascript Debug Job, where I added the remote URL.

    Everything seems to work, when I set a breakpoint in the microservice, that is rendered first by tailor.

    But a breakpoint in another service is never hit. The source mapping is configured in every microservice webpack.config.js. Even in the webpack://. folder, only the code from the firstly loaded microservice is shown.

    I figured, that I could run every microservice standalone and debug it this way. But since service 1 might trigger an event in service 2, debugging the wohle application is more suitable.

    Has anyone an idea, how to debug such an application inside the IDE?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      December 12, 2018

      Hello Chris,
      To be honest, we have never tested a setup like that. Tailor is this tool: https://github.com/zalando/tailor, right? Have you seen any tutorials explaining this configuration or any sample open source apps that use it that we can test?
      Are you able to debug this app in the browser using DevTools?

  28. Avatar

    Sebastian says:

    February 2, 2019

    Why do I need to run it first before attaching Debugger? Because if it is already running to the end, then it will crash if there is a bug, I thought the purpose of Debug is to run single step until the line that causes the error?

  29. Avatar

    eagle says:

    March 8, 2019

    Don’t suppose I can use Chromium instead right?

    • Ekaterina Prigara

      Ekaterina Prigara says:

      March 11, 2019

      You can use any Chrome-based browser. You can configure the browser by clicking the … button next to the Browser field in the JavaScript debug configuration.

  30. Avatar

    Alexander says:

    March 24, 2020

    The video that you recommend to watch is inaccessible.