Degugging a react native / expo app with webstorm












0















I can't debug my react native / expo app in WebStorm, but I can in Visual Studio Code.
I have a react native app that I can successfully run using expo. I set up the configuration according to the info on this site:



https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/#debugging-expo



When I click "run" or "debug" and "Debug JS Remotely" is turned off, the bundler builds a JS bundle and the app starts on my devices.
But once I turn on "Debug JS Remotely", the bundler only says:




Starting custom debugger by executing: : [my working directory] [my working directory again]




and never goes on to build the JS bundle.
After a short while, a red screen appears on the device, and it says:




Unable to connect with remote debugger



Timeout while connecting to remote debugger



onFailure
DevSupportManagerImpl.java:851



onFailure
WebsocketJavaScriptExecutor.java:83



run
WebsocketJavaScriptExecutor.java:142



handleCallback
Handler.java:790



dispatchMessage
Handler.java:99



...




The bundler doesn't say anything more than the message above.
As soon as I turn off remote debugging, the the bundler starts building again and finishes with



"Building JavaScript bundle: finished in ...ms"



as usual, but the device, again, shows the red screen with aforementioned messages, or doesn't show anything but the regular white screen with a message at the bottom saying "Downlading JavaScript bundle 100,00%". I either have to stop and restart within WebStorm or I have to close the expo app and re-open it. Either way will make the app start again on my device.



This is my first time working with javascript, react native, expo, so I am not sure, but it should be possible to debug in WebStorm directly, right? As mentioned, in Visual Studio Code everything including debugging works fine, so I don't think it's anything in the code. Maybe someone here has an idea where the problem lies?



node -v: v11.6.0
react-native -v: react-native-cli: 2.0.1, react-native: 0.57.1



Any help will be greatly appreciated! Thanks in advance!










share|improve this question













migrated from superuser.com Jan 23 at 13:25


This question came from our site for computer enthusiasts and power users.























    0















    I can't debug my react native / expo app in WebStorm, but I can in Visual Studio Code.
    I have a react native app that I can successfully run using expo. I set up the configuration according to the info on this site:



    https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/#debugging-expo



    When I click "run" or "debug" and "Debug JS Remotely" is turned off, the bundler builds a JS bundle and the app starts on my devices.
    But once I turn on "Debug JS Remotely", the bundler only says:




    Starting custom debugger by executing: : [my working directory] [my working directory again]




    and never goes on to build the JS bundle.
    After a short while, a red screen appears on the device, and it says:




    Unable to connect with remote debugger



    Timeout while connecting to remote debugger



    onFailure
    DevSupportManagerImpl.java:851



    onFailure
    WebsocketJavaScriptExecutor.java:83



    run
    WebsocketJavaScriptExecutor.java:142



    handleCallback
    Handler.java:790



    dispatchMessage
    Handler.java:99



    ...




    The bundler doesn't say anything more than the message above.
    As soon as I turn off remote debugging, the the bundler starts building again and finishes with



    "Building JavaScript bundle: finished in ...ms"



    as usual, but the device, again, shows the red screen with aforementioned messages, or doesn't show anything but the regular white screen with a message at the bottom saying "Downlading JavaScript bundle 100,00%". I either have to stop and restart within WebStorm or I have to close the expo app and re-open it. Either way will make the app start again on my device.



    This is my first time working with javascript, react native, expo, so I am not sure, but it should be possible to debug in WebStorm directly, right? As mentioned, in Visual Studio Code everything including debugging works fine, so I don't think it's anything in the code. Maybe someone here has an idea where the problem lies?



    node -v: v11.6.0
    react-native -v: react-native-cli: 2.0.1, react-native: 0.57.1



    Any help will be greatly appreciated! Thanks in advance!










    share|improve this question













    migrated from superuser.com Jan 23 at 13:25


    This question came from our site for computer enthusiasts and power users.





















      0












      0








      0








      I can't debug my react native / expo app in WebStorm, but I can in Visual Studio Code.
      I have a react native app that I can successfully run using expo. I set up the configuration according to the info on this site:



      https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/#debugging-expo



      When I click "run" or "debug" and "Debug JS Remotely" is turned off, the bundler builds a JS bundle and the app starts on my devices.
      But once I turn on "Debug JS Remotely", the bundler only says:




      Starting custom debugger by executing: : [my working directory] [my working directory again]




      and never goes on to build the JS bundle.
      After a short while, a red screen appears on the device, and it says:




      Unable to connect with remote debugger



      Timeout while connecting to remote debugger



      onFailure
      DevSupportManagerImpl.java:851



      onFailure
      WebsocketJavaScriptExecutor.java:83



      run
      WebsocketJavaScriptExecutor.java:142



      handleCallback
      Handler.java:790



      dispatchMessage
      Handler.java:99



      ...




      The bundler doesn't say anything more than the message above.
      As soon as I turn off remote debugging, the the bundler starts building again and finishes with



      "Building JavaScript bundle: finished in ...ms"



      as usual, but the device, again, shows the red screen with aforementioned messages, or doesn't show anything but the regular white screen with a message at the bottom saying "Downlading JavaScript bundle 100,00%". I either have to stop and restart within WebStorm or I have to close the expo app and re-open it. Either way will make the app start again on my device.



      This is my first time working with javascript, react native, expo, so I am not sure, but it should be possible to debug in WebStorm directly, right? As mentioned, in Visual Studio Code everything including debugging works fine, so I don't think it's anything in the code. Maybe someone here has an idea where the problem lies?



      node -v: v11.6.0
      react-native -v: react-native-cli: 2.0.1, react-native: 0.57.1



      Any help will be greatly appreciated! Thanks in advance!










      share|improve this question














      I can't debug my react native / expo app in WebStorm, but I can in Visual Studio Code.
      I have a react native app that I can successfully run using expo. I set up the configuration according to the info on this site:



      https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/#debugging-expo



      When I click "run" or "debug" and "Debug JS Remotely" is turned off, the bundler builds a JS bundle and the app starts on my devices.
      But once I turn on "Debug JS Remotely", the bundler only says:




      Starting custom debugger by executing: : [my working directory] [my working directory again]




      and never goes on to build the JS bundle.
      After a short while, a red screen appears on the device, and it says:




      Unable to connect with remote debugger



      Timeout while connecting to remote debugger



      onFailure
      DevSupportManagerImpl.java:851



      onFailure
      WebsocketJavaScriptExecutor.java:83



      run
      WebsocketJavaScriptExecutor.java:142



      handleCallback
      Handler.java:790



      dispatchMessage
      Handler.java:99



      ...




      The bundler doesn't say anything more than the message above.
      As soon as I turn off remote debugging, the the bundler starts building again and finishes with



      "Building JavaScript bundle: finished in ...ms"



      as usual, but the device, again, shows the red screen with aforementioned messages, or doesn't show anything but the regular white screen with a message at the bottom saying "Downlading JavaScript bundle 100,00%". I either have to stop and restart within WebStorm or I have to close the expo app and re-open it. Either way will make the app start again on my device.



      This is my first time working with javascript, react native, expo, so I am not sure, but it should be possible to debug in WebStorm directly, right? As mentioned, in Visual Studio Code everything including debugging works fine, so I don't think it's anything in the code. Maybe someone here has an idea where the problem lies?



      node -v: v11.6.0
      react-native -v: react-native-cli: 2.0.1, react-native: 0.57.1



      Any help will be greatly appreciated! Thanks in advance!







      webstorm






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 10 at 11:52









      menowmenow

      31




      31




      migrated from superuser.com Jan 23 at 13:25


      This question came from our site for computer enthusiasts and power users.









      migrated from superuser.com Jan 23 at 13:25


      This question came from our site for computer enthusiasts and power users.


























          1 Answer
          1






          active

          oldest

          votes


















          0














          The issue is tracked at WEB-35719, please follow it for updates






          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54328340%2fdegugging-a-react-native-expo-app-with-webstorm%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            The issue is tracked at WEB-35719, please follow it for updates






            share|improve this answer




























              0














              The issue is tracked at WEB-35719, please follow it for updates






              share|improve this answer


























                0












                0








                0







                The issue is tracked at WEB-35719, please follow it for updates






                share|improve this answer













                The issue is tracked at WEB-35719, please follow it for updates







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 10 at 16:25









                lenalena

                52.4k37484




                52.4k37484
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54328340%2fdegugging-a-react-native-expo-app-with-webstorm%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Plaza Victoria

                    In PowerPoint, is there a keyboard shortcut for bulleted / numbered list?

                    How to put 3 figures in Latex with 2 figures side by side and 1 below these side by side images but in...