Debugging React-Native in WebStorm

On clicking Debug option in RUN command in Menu I invariably get the following errors:

Make sure Package Server is running.

When the Package Server is started it fails as the port 8081 is not available. 

The Package server is started again after clearing the port. 

When Debug is restarted the same error (Make sure Package Server is running).

Webstorm version - 2017.3.4

10 comments
Comment actions Permalink

What version of react-native are you using? What is your OS? Can you recreate the issue using the default React Native project created with New... | Project | React Native?

0
Comment actions Permalink

Hi Elena,

Mac OS High Sierra - 10.13.2

react-native-cli - 2.0.1

react-native - 0.51.0

I did recreate the project using webstorm and also not using webstorm and run through Webstorm Debugging. 

I met with the same issue in both cases.

Thanks

Ganesh

 

 

0
Comment actions Permalink

Could you try WebStorm 2018.1 EAP? React native integration has been re-written there

0
Comment actions Permalink

I still have this problem when using Webstorm 2018.1

0
Comment actions Permalink

Can you provide a project that shows up the issue plus a video recording of your steps, console messages, etc.?

0
Comment actions Permalink

Sure. This is all using Webstorm 2018.1, which creates the run configuration for a React Native project automatically when you create the project in Webstorm. As you can see in the video, I simply created a new project in Webstorm and ran it and tried to connect the debugger.

You can get the code for the project at:

https://github.com/asutula/webstorm-debug-test

and a video of me showing everything at:

https://www.dropbox.com/s/zmmozltvoezmwky/Webstorm.mov?dl=0

0
Comment actions Permalink

You video shows that you are using Run option to start your app:

To debug the application, you need pressing Debug button, not Run; you won't be able to attach the debugger unless you start the debug process

0
Comment actions Permalink

Ok, I tried that and it doesn't work either. Chrome launches, but the breakpoints I set in Webstorm are never hit. You can see in this video:

https://www.dropbox.com/s/d2xb2i7qf53bs2a/Webstorm2.mov?dl=0

If the correct instructions are to use Webstorm's 'debug' button instead of the 'run' button, it would be good to update the documentation at https://www.jetbrains.com/help/webstorm/react-native.html (in the 'To debug a React Native application that uses a native bundler` section) that actually says to use the 'run' button and even has a picture of it. Updating the wording in https://blog.jetbrains.com/webstorm/2016/12/developing-mobile-apps-with-react-native-in-webstorm/ could also be good because it doesn't really specify which button to use.

0
Comment actions Permalink

Looks similar to https://youtrack.jetbrains.com/issue/WEB-30737

Please try enabling js.debugger.break.on.first.statement.with.regexp Registry option (Help | Find action, type `Registry` to open the registry) - does it help?

0
Comment actions Permalink

Yes, that works!

0

Please sign in to leave a comment.