Can't debug on React Native Debugger

mcnamee / react-native-starter-kit

:rocket: A React Native boilerplate app to get you up and running very, very quickly :rocket:

MIT License

3.35k stars 865 forks source link

Can't debug on React Native Debugger #221

Closed Richacinas closed 5 years ago

Richacinas commented 5 years ago

I can't debug this starter kit on React Native Debugger.

When I launch it, it opens on port 8081. I think that I have to then open a new window on port 19001 and after that launch this project with npm start. However, nothing opens and the debugger keeps waiting.

My environment is:

Ubuntu 18.04LTS. Running on Android device through LAN and development mode.

Steps to reproduce

Open React Native Debugger on port 19001.
Run npm start on this project with all the dependencies installed. (Expo version 32.0.5)
Wait.

Expected result

The debugger should get connected and allow me to debug and inspect.

Actual result

The debugger stays on the first screen showed.

Richacinas commented 5 years ago

No one else experiencing the same problem?

ealemda2 commented 5 years ago

@Richacinas Maybe this will help? https://github.com/mcnamee/react-native-starter-kit/pull/216#issuecomment-497888916

Richacinas commented 5 years ago

@Richacinas Maybe this will help? #216 (comment)

Do I need to be running IOS or Android emulator in order for the debugger to work? can't I debug the app running on my expo app in my phone?

ealemda2 commented 5 years ago

@Richacinas Maybe this will help? #216 (comment)

Do I need to be running IOS or Android emulator in order for the debugger to work? can't I debug the app running on my expo app in my phone?

Not necessarily. It should work as long as Expo is serving your RN project on 19001. Make sure to go to the Expo menu and hit Debug Remote JS from your phone while the debugger is attempting to connect after you open up the app.

Side note: the project uses yarn and has been much faster for me to build with yarn start or yarn run iosetc.

Richacinas commented 5 years ago

I paste here the messages I get from Expo when I run (using npm start):

Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19001.
Tunnel ready.

exp://192.168.0.160:19000

I understand that I'm running my app on port 19000 (19001 is taken by the Metro Bundler, which I guess must be something like a Webpack Dev Server...)

Let's say I keep this configuration for my app, and I change React Native Debugger to open on 19000. This is what I get then:

I try to find the option you talk about ("Debug Remote JS") and I can't find it.

I gues that's all I'm missing then... if that's the case I apologize already for the trouble caused as this wouldn't be an issue at all!

Richacinas commented 5 years ago

Alright... who would have guessed... after searching and searching I found that I had to shake my phone with the Expo app running and then I saw this options. I selected it, and a new tab opened in Chrome.

All I see is this:

And I have my React Native Debugger running on 19001 this time, as you said, but it doesn't seem to connect:

Any idea what is happening here?

Richacinas commented 5 years ago

Ohhh man.. I closed the Chrome tab (of course...) and now the RND is running smoothly.

I'll post in StackOverflow any problems I encounter (if any) while debugging. Thanks so much for your help.

I hope this works a a sort of step by step little guide about how to debug with a real device and React Native Debugger :dancer: