Flipper: Hermes debugger cannot connect error: "Debugging connection was closed" - react-native

I have downloaded and setup flipper desktop on my windows machine and I am able to run all its features properly including react devtools but somehow hermes debugger doesn't work and shows error message "Debugging connection was closed".
I am using react 16.13.1 and react-native 0.63.2 and I am running app on Samasung Galaxy Note 10 device. Tried multiple thigs suggested by people on internet but nothing seems to work.
Please refer below image
Please help me out.

Start your project with this command:
react-native start --host localhost

Related

Can't connect to standalone React Native Debugger

I've been having trouble getting the standalone React Native Debugger to work. I'm running an expo project and testing on android device. When I select Debug Remote JS, it opens up http://localhost:19000/debugger-ui/ in my web browser each time. My standalone debugger on port 19000 just says Waiting for React to connect. Not seeing any errors anywhere.
Make sure the device is connected via adb
adb devices
if you see your device, please run this command
adb reverse tcp:8097 tcp:8097
and restart your debugger

Why can't I get React Native debugging to work in VSCode?

I've looked at so many tutorials, and they seem so simple, but I just can't get debugging to work (running Expo, not ready to eject, that's a whole other level of craziness).
I've tried creating an app with create-react-native-app and also with expo-init which appear to be the same thing. I start running the app with yarn start and I can see the app in Expo. I select "Attach to Packager" in VSCode, and it fails every time.
I've added "react-native.packager.port": 19005 to my settings.json but I can't seem to find the right port. My Metro screen has so many different ports in so many different places:
The terminal where I ran yarn start says
Expo DevTools is running at http://localhost:19003
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19005.
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Tunnel ready.
exp://192.168.1.5:19004
The chrome window is at localhost:19003
The first line of the Metro Bundler terminal says Starting Metro Bundler on port 19005.
Later in the terminal it says Opening exp://127.0.0.1:19004 in iOS simulator
In the sidebar it says exp://192.168.1.5:19004, which is reflected in the Dev settings screen in the iOS simulator.
I've tried changing the port in "react-native.packager.port": 19005 to every number between 19000 and 19005 and they all fail. They all say:
Could not debug. Cannot attach to packager.
Are you sure there is a packager and it is running in the port 19003?
If your packager is configured to run in another port make sure to add that to the settings.json. (error code 504)
with, of course, the currently set port.
HELP ME!!!
react-native.packager.port should be changed to the port the Browser's developer tool's is running on. Stopping and Restarting the npm server once again worked for me.

Cannot attach debugger to chrome in React-native with unauthorized error

I am a newbie to React-native Development. I am able to run my app on android emulator by changing port to 8088 as my organization is using McAfee in port 8081. Everything is working fine but i am not able to debug my app in chrome. Whenever I press 'Debug JS remotely' I am getting unauthorised error in console and debugger-ui is not using react-native developer tools. I tried a lot and found some links to the problem.
This link addresses the problem but I am not getting how to pull the code from react-native master branch.
It has been two days and I am still struggling to find the solution. I will be thankful if someone helps me out there. Thanks in advance.
Remove "ALLOW-CONTROL-FLOW-ORIGIN" from chrome extention.
Uninstall build from device or Simulator/Emulator
Run Again
Hope it will be fixed.

console.log doesn't work with react-native

I'm starting with react-native and I'm getting this problem: I can't log to bundler metro server.
If I create my application using create-react-native-app, I can do 'console.log' and value are logged to metro bundler (running on port 8081).
But if I create my application with react-native init <project>, this doesn't work. To make console.log work, I need to open Chrome DevTools and set remote debug in application.
So my question is: is there any way to make native code to log in bundler console with console.log? I don't want to work with 'create-react-native-app' because it uses Expo and 'realm' database doesn't support expo.
I've tried with react-native 0.55.4 and 0.56, both in windows and linux.
You can also see the console.log() outputs using these commands:
$ react-native log-android
$ react-native log-ios
Note: It also works to debug native errors, for example when you have a blank screen and metro bundler doesn't show errors neither.
For more information you can check this out
Don't know if I correctly understand your question (because of my english), but you can try this:
Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see
your Android app's logs.
Taken from Using adb logcat for React Native Debugging
You can download React Native Debugger and Open your JS Debugger in development menu. You can see everything into RN Debugger.
I discovered that console.log are omitted from console log if your disable remote debug from the debug menu
On Mac. While on ios simulator Clicked on
Command-d->Stop Debugging
.This made logging work for me.

Unable to load sample React Native project on Android

I just started out with learning React Native and was following the official documentation. But 8081 is blocked by McAfee. So i started the JS server on 8069 port. But when i run the project on android using run-android command. I am getting the error in the image below. Can anyone help me out?
error which pops up
Open development menu select DevSettings and add Your development machine ip:port