Devtools failed to connect to react native emulator - react-native

I execute the project with react-native run-android and in another terminal, i do:
npm run react-devtools
and it opens the new window of electron that says:
The react native app it will open in a few seconds...
but nothing happens.
I put in the simulator toggle inspector with Ctrl + m and i can see in networks that it makes a request to http://localhost:8097 and the result is it fails to connect and keeps trying with the same result.
devtools can not to connect to emulator, It write connecting... And show a link for troubleshoot but link doesnt work. With ctrl shift i in devtools, I can understand error is fail to connect because of backend.js. Can Any body help me?

Make sure pors is forwarded from the emulator.
Use adb reverse tcp:8097 tcp:8097 to enable
See https://fig.io/manual/adb/reverse for more details

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.

Publishing React Native application using expo

I am trying to publish my application on iphone using expo client. When I send the link from my mackbook to iphone. I got an error saying "There was a problem loading the requested app. It looks like you may be using the LAN URL. make sure your device is on the same network as the server or try using a tunnel." I am on the same network. I checked the network twice. These are the steps that I followed 1) I started the application by giving the command in terminal window saying "npm start". 2) I choose the option "s" and then I was prompted to enter my iphone #. I entered the phone number and as soon as I did that, I got the text message on my phone saying "exp://10.21... . I clicked on this link and started getting the error message "There was a problem loading the requested app. It looks like you may be using the LAN URL. make sure your device is on the same network as the server or try using a tunnel." When I choose the option i. Option"i" is to run the application on emulator. I can successfully run the application on emulator, but when I send the link to my iphone, it does not work.
any help will be greatly appreciated.
I downloaded expo xde and that compiled my project and send the permanent link to my iphone and android and it worked well. Directly doing npm start does not send the right link because of some tunneling issues.I downloaed expo XDE from this link:
Expo XDE

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.

[react-native]Could not connect to development server and unable to symbolicate stack trace(android)

I am new react native.i am developing a app which includes json data fetching by using axios. I made development connection through usb to my pc and app works fine but when i unplug the usb or close the react packager then there is a red screen on start of my app that says could not connect to development server.and then there is a error below in yellow bar that says unable to symbolicate stack trace...how can i get rid of these errors and run my app independently ?
I think according to your question you are closing the development server from commandline or cmd.
Once you disconnect you will have to restart the packager.
TO connect with Api
select the port number from API application url Example: http://localhost:44394
Step 1: Launch the emulator using command in terminal : npx react-native run-android
Step 2: open the app in emulator:
Step 3: enter the command in root terminal: adb reverse tcp:44394 tcp:44394