WebStorm 2016.3 EAP, 163.6512: React Native

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

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 Early Access Preview and tagged , , . Bookmark the permalink.

37 Responses to WebStorm 2016.3 EAP, 163.6512: React Native

  1. resure says:

    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.

  2. 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!

  3. Vanson says:

    GREAT! Will try this new EAP!

  4. vonovak says:

    Awesome!!

  5. Sergii Shymko says:

    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:

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

  6. Sergii Shymko says:

    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:

    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:

    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:

      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:

        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:

          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:

            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:

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

            Thank you.

          • Konstantin Ulitin says:

            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:

    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.

  10. Jérôme Chesne says:

    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…

  11. Rahman Usta says:

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

  12. Andy says:

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

  13. Nate Good says:

    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

  14. ubaid mir says:

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

  15. Dejan says:

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

Leave a Reply

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