WebStorm 2016.3 EAP, 163.6512: React Native

Posted on by Ekaterina Prigara

A new WebStorm 2016.3 EAP (163.6512) build is now available! You can download it here, or if you have the EAP build (163.6110) from the last week installed, you should soon get a notification in the EAP about a patch update.

Debugging React Native apps

With WebStorm you can now run and debug mobile apps developed with React Native! Together with the React and Flow support we believe WebStorm can become a great and powerful tool for development with React Native. We’d appreciate your feedback on this new feature!

debug-react-native

We assume that you already have React Native installed and configured for the iOS or Android development. We really recommend you to install Watchman on macOS, it helped us make the app running with no errors when we were developing and testing the new feature.

Now create a new React Native Run/Debug configuration in WebStorm, select the target platform and hit Ok. Make sure the path to the React Native CLI package is correct. Put the breakpoints in your code and start the Debug session.

react-native-configuration

Once the emulator opens for the first time, go to the in-app developer menu and select Remote JS Debugging. The WebStorm built-in debugger will then connect to the emulator and you can debug your app.

For a detailed list of the issues addressed in this EAP build, please see the Release notes.

Learn more about other new features in WebStorm 2016.3:

  • WebStorm 2016.3 EAP, 163.3094: Integration with Flow; PostCSS support; Smarter Rename for TypeScript; More features in Angular CLI integration; Grouped generated files in the Project view; Option to generate an .editorconfig file; Code style option for arrow functions.
  • WebStorm 2016.3 EAP, 163.3512: Integration with Docker for Node.js apps; Bundled Fira Code font; San Francisco font is default on OS X; Flow tool window with file and project errors.
  • WebStorm 2016.3 EAP, 163.3983: ESLint autofix; Automatic detection of TypeScript version in the project; Undo commit action; Test names now available in the Go to symbol.
  • WebStorm 2016.3 EAP, 163.4396: Create new React apps with Create React App from the Welcome screen; Improvements in Angular 2 support.
  • WebStorm 2016.3 EAP, 163.4830: Integration with Stylelint; Find usages for ES6 default exports; Updates Angular 2 live templates; New inspection “TypeScript import can be shortened”.
  • WebStorm 2016.3 EAP, 163.5219: Better support for ES6 object destructuring.
  • WebStorm 2016.3 EAP, 163.6110: TypeScript language service is now used by default for code completion and analysis; New inspections for ES6; New icons; Faster search in Git log; Git Remotes management;

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

JetBrains WebStorm Team

Comments below can no longer be edited.

37 Responses to WebStorm 2016.3 EAP, 163.6512: React Native

  1. resure says:

    October 20, 2016

    Is there any plans on adding SQL support to WebStorm? Postgres and MySQL powered node.js apps are not rareness nowadays and lack of that type of functionality doesn’t allow to use WS for full-stack development.

    • Dennis Ushakov says:

      October 23, 2016

      There are no specific plans, you can vote for this issue to track the updates

  2. Mörre Noseshine says:

    October 21, 2016

    Did anything change in the type detection/suggestion system? Rhetorical question, sorry, something *did* change or I would not ask, right.

    Until very recently, last EAP or the one before, I still got all my JSDoc based types in the popup. Type the first few characters, hit CTRL-SPACE, get a list of the JSDoc types I declared with @typedef. Now they are all gone with the latest EAP!

    • Konstantin Ulitin says:

      October 24, 2016

      The simplest case works for me. Maybe File | Invalidate Caches and restart will help? If not, could you please create an issue in YouTrack with broken code sample?

      • Mörre Noseshine says:

        October 24, 2016

        Done: WEB-23875 Member inference issues in 163.6512

        • Ekaterina Prigara says:

          October 26, 2016

          Thank you!

  3. Vanson says:

    October 26, 2016

    GREAT! Will try this new EAP!

  4. vonovak says:

    October 28, 2016

    Awesome!!

  5. Sergii Shymko says:

    November 4, 2016

    Tried the React Native debugger on the latest PhpStorm EAP build. It was a little slow (compared to Xdebug for PHP), but it worked! Great job!

    What’s the difference between “Run” vs “Debug” for a React Native profile? Both of them do start the debug session when the “Debug JS Remotely” is enabled on a device/emulator.

    • Konstantin Ulitin says:

      November 4, 2016

      Executed commands are the same, the only difference is that the node process, which is usually debugged, is simply runned.

  6. Sergii Shymko says:

    November 18, 2016

    Is there a way to configure which device/emulator to use? The “Run/Debug Configuration” does not seem to allow passing arguments “–simulator” and “–device”.

  7. Andy Craven says:

    December 4, 2016

    I have followed the instructions above and everything seems to have been done correctly.

    The App launched, I enabled Remote JS Debugging.

    The react-native-start tab content looks good.

    The Debugger tab says: Connected to localhost:64098

    The Console tab ends with: [intellij] Debugging session started successfully.

    But, it simply will not hit a breakpoint.

    Can you help please?

  8. Andy Craven says:

    December 5, 2016

    I have followed the instructions above and everything seems to have been done correctly.

    The App launched, I enabled Remote JS Debugging.

    The react-native-start tab content looks good.

    The Debugger tab says: Connected to localhost:60217

    The Console tab ends with: [intellij] Debugging session started successfully.

    But, it simply will not hit a breakpoint. Have I missed a step?

    PS: I posted this a couple of days ago but it seems to have disappeared.

    • Ekaterina Prigara says:

      December 5, 2016

      Can you please provide a bit more details on where your breakpoint is set? Is that the code that is executed on some action or on the app load?

      • Andy Craven says:

        December 6, 2016

        Thanks for your reply.

        I have a breakpoint set in the render() method of App.js on a line containing:

        const store = createStore( reducers, {}, applyMiddleware( ReduxThunk ) );

        I would expect the breakpoint to hit on app load but also on app refresh.

        It does neither.

        I have tried placing a breakpoint in various places without success.

        • Konstantin Ulitin says:

          December 7, 2016

          Are breakpoints resolved, i.e. do they get ‘v’ mark when debugging is started? Have you tried putting them in some repeated or user-initiated action which happens not only on app start?

          • Andy Craven says:

            December 9, 2016

            Hi

            When I check in the Debugger Tab and view all breakpoints I can see it.

            I placed the breakpoint on: import App from ‘./src/App’;

            in the index.ios.js

            but still nothing when the app loads or when I refresh the simulator, no matter when I place a breakpoint.

            Andy

          • Andy Craven says:

            December 14, 2016

            Did you get me reply to this on the 9th Dec?

            Thank you.

          • Konstantin Ulitin says:

            December 14, 2016

            Hi. Could you please check if breakpoint will work for the following code:
            function f() {
            console.log(“f”); // breakpoint here
            setTimeout(f, 1000);
            }
            f();

            Aslo, I suggest to continue the discussion in a support request.

  9. Andy Craven says:

    December 16, 2016

    Hi Konstantin,

    I have solved it and it was most likely my stupidity.

    I was seeing that a Component was not being found when I tried to import it.

    I come from a PHP background so assumed that if I placed a breakpoint prior to that point in the code it would fire BUT it I guess because babel etc are transpiling the code the error happens before the code executes.

    Once I fixed the error BOOM!! the breakpoint fired.

    I have tested it all over and all is well.

    Thanks for your patience.

    • Ekaterina Prigara says:

      December 19, 2016

      Great to hear that it works now 🙂

  10. Jérôme Chesne says:

    December 19, 2016

    Trying to use debugger without success.

    My breakpoints doesnt have the ‘v’ mark.

    My log is :

    /usr/local/bin/node –debug-brk=65151 –expose_debug_as=v8debug /Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/launcher.js –port=8081 –sourcesStoragePath=/Applications/MAMP/htdocs/ambassadeur_app/.tmp/reactNativeBuild
    Debugger listening on port 65151
    [intellij] Downloaded debuggerWorker.js (Logic to run the React Native app) from the Packager.

    [intellij] Starting debugger app worker.

    [intellij] Established a connection with the Proxy (Packager) to the React Native application

    [intellij] Debugging session started successfully.

    I have placed one breakpoint on my line : console.log(“f”); in my index.ios.js file but without success.

    Nothing happened, i dont know what i have done wrong…

    • Konstantin Ulitin says:

      December 19, 2016

      Do these log “f” messages appear in the console tab?

      • Jérôme Chesne says:

        January 4, 2017

        Yes it is.

        • Jérôme Chesne says:

          January 4, 2017

          Ok, it was my fault, i was using the wrong node interpreter, my bad, everythings work perfectry now !

  11. Rahman Usta says:

    January 8, 2017

    It doesn’t work, I use Windows 10 and latest react-native and Webstorm.

    • Ekaterina Prigara says:

      January 9, 2017

      What exactly doesn’t work? Does it work in the terminal?

  12. Andy says:

    January 13, 2017

    Is it possible to attach a debugger to an already running React Native app?

  13. Nate Good says:

    February 13, 2017

    Are embedded source maps supported?
    I am trying to debug a fresh ignite app and getting and error that looks like this:
    [intellij] [Warning] Couldn’t import script at . Debugging won’t work: Try reloading the JS from inside the app, or Reconnect the debugger: Cannot GET /json;base64,eyJ2…

    Can you possibly tell me how I must configure my project to successfully start the debugger? It works as expected in Chrome BTW.

    Instructions to setup an ignite project: https://github.com/infinitered/ignite#arrow_down-install

    • Ekaterina Prigara says:

      February 13, 2017

      Sorry, at the moment inline source maps are not supported. Please see the related issue on our tracker: https://youtrack.jetbrains.com/issue/WEB-23848
      We hope to find a solution to that soon.

  14. ubaid mir says:

    February 14, 2017

    How to fix this? As soon as i start debugger
    [intellij] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon…

    • Konstantin Ulitin says:

      February 14, 2017

      Looks like another debugger is trying to connect to the packager, i.e. default. Please ensure that there is no Chrome tab with started application.

      • ubaid says:

        February 14, 2017

        No that is not the case.This message pops up

        Couldn’t import script at . Debugging won’t work
        .

        • Konstantin Ulitin says:

          February 14, 2017

          Looks similar to WEB-23848. Please watch it to get notified about updates.

  15. Dejan says:

    May 17, 2017

    Breakpoints don’t seem to work with Hot Reloading enabled – has anyone else had any success with this?