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().

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

@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.

@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

Here are some steps you can follow:

Use Console Logs:

console.log(), console.warn(), and console.error()
to print out values and follow the flow of your application.

React Native Debugger:

This is a standalone app that provides a powerful debugging environment. It integrates with the Chrome Developer Tools.

Error Boundaries:

Implement error boundaries in your React components to catch JavaScript errors anywhere in their child component tree.

• react-native
• expo
• react-native-debugger