5

I am starting project as instructed in the readme file (mcnamee/react-native-starter-kit). I integrated my firebase with app when I signup it stucks at spinner... though saves email and password to firebase and it signs in without problem. I want to debug whats going on when I hit the signup button but it doesnt show any action etc nor in the react native debugger app. Why react native debugger cant connect to my app. How can I fix this issue?

enter image description here enter image description here

beratuslu
  • 1,101
  • 3
  • 14
  • 27

5 Answers5

8

You can only have one debugger attached at a time. If you are using the debugger in a web browser. You cannot use React Native Debugger.

The simplest solution is to make sure that you have React Native Debugger running before you do react-native run-ios And you should connect automatically to the React Native Debugger. If it doesn’t connect you can always press cmd+d to connect to the debugger.

If you are already connected to the web browser debugger. Press cmd+d to bring up the menu on the simulator, disable remote debugging. Close the web browser. Launch React Native Debugger. Press cmd+d and enable remote debugger, this should connect you to the React Native Debugger.

Regards to the information in the console. Both debugging optionswill give you the same information. If you are wanting to debug what is happening in more detail you’ll need to use the built in Debugger in your IDE and step through the lines of code or put in some well placed console.logs().

Andrew
  • 26,706
  • 9
  • 85
  • 101
  • I am tryingto see which actions fired with which data.. I still not able to see actions. – beratuslu Jul 26 '18 at 08:00
  • It is directly openning debugger on chrome even if RND open before npm start – beratuslu Jul 26 '18 at 08:13
  • @beratuslu can you switch to the RND? – Andrew Jul 30 '18 at 15:23
  • How can I switch it? – beratuslu Jul 31 '18 at 16:02
  • @beratuslu If you are already connected to the web browser debugger. Press cmd+d to bring up the menu on the simulator, disable remote debugging. Close the web browser. Launch React Native Debugger. Press cmd+d and enable remote debugger, this should connect you to the React Native Debugger. – Andrew Aug 02 '18 at 13:12
  • 2
    I tried What you said, it fires chrome automatically and opens web ui debugger. also I still cant see actions in the redux chrome plugin neither. – beratuslu Aug 03 '18 at 14:11
  • think you need to add "postinstall": "rndebugger-open --expo" to "scripts": in package.json then run yarn run postinstall then expo start – David Jarrin Nov 24 '18 at 18:03
  • I was facing this issue with Debugging. Yes, running react-native-debugger before running ios simulator worked for me. – Md. Zubaer Ahammed Mar 23 '19 at 23:38
3

The problem was RND was opening in different port. I changed the port from RND menu and it worked like expected.

beratuslu
  • 1,101
  • 3
  • 14
  • 27
  • The same fix worked for me. Check that the port being used is what you expected. Mine suddenly changed from 19001 to 19004. Include this in the array of default RN ports in your RN debugger config file. – Tevon Strand-Brown May 12 '20 at 19:54
1

@beratuslu you wrote in the comments

I tried What you said, it fires chrome automatically and opens web ui debugger. also I still cant see actions in the redux chrome plugin neither.

This was the same problem with me and after spending more than 10 working hours, I solved it by unchecking the small tick saying Maintain Priority untick the Maintain Priority

So, in case someone else is still trying to solve this issue when doing all the configuration as mentioned in the docs, still the default debugger fires automatically instead of connecting to react native debugger, follow these steps.

  • Uncheck the Maintain Priority checkbox in default debugger-ui
  • Close the default debugger
  • in simulator CTRL + M and stop remote debugging
  • CTRL + T in the React Native Debugger window
  • Enter your debugger port (in my case it was 19000) and click Confirm
  • In your android emulator, enable the remote debugging again (CTRL + M -> Start remote debugging)
  • Now it should be connected to the React Native debugger instead of default debugger-ui

Hope it helps someone to save time in figuring out why the default debugger is firing up ever time instead of connecting to react native debugger.

Abid Ali
  • 700
  • 1
  • 7
  • 13
0

@beratuslu You wrote in the comments:

I tried What you said, it fires chrome automatically and opens web ui debugger. also I still cant see actions in the redux chrome plugin neither.

How do you start your debugging-process? Might be, that you try to start with Jetbrains-Product like WebStorm, or PHPStorm.

In that case, you need to know, that this doesn't work yet. You need to start react-native-debugger manually (not via jetbrains software), and if running, use only "run" (in jetbrain-software) to start your DEV-Build.

enter image description here

This way, the Connection to the react-native-debugger will be established, if the App (with DEV_Flag) is up and running.

If you need to debug with breakpoints, you have to go with Chrome-Browser, but there you don't have redux-output... while on the other hand you react-native-debugger support it.

If you wan't to see jetbrain-debug working with react-native-debugger feel free to vote for this Issue: https://youtrack.jetbrains.com/issue/WEB-35251

suther
  • 12,600
  • 4
  • 62
  • 99
-2

  • first run your project: expo start

  • then: go to your browser and type in url:

http://localhost:19000/debugger-ui/

  • this way you can debug very good.
CodeForest
  • 1
  • 2