React Native debugging error - react-native

As you see,when I open dev tool in chrome,It will soon turn into this red screen.If I do not open dev mode,it works, and console.log can log infomations in Xcode console.(this way is not use Xcode)

just open localhost:8081/debugger-ui and press Cmd+R in simulator, or dismiss this error, open developer menu in App and disable "Debug in Chrome" option

try to update your react-native version to more stable version may be 0.35 or 0.38.
this basically happens when react-native is not able to load the bundles into developer tool.

Related

react-native-debugger disconnecting and showing error when In-App Developer Menu is opened

I have recently upgraded my react native to the latest version 0.62.1 and also downloaded the required react-native-debugger app (standalone app version 0.11.1 ) as specified in the react-native-debugger doc. Now when i enable remote js debugging everything works fine until i press cmd + d for ios or cmd + m for android to open in app developer menu after that debugger is disconnecting automatically and showing the error as shown in the below image.
link to react-native-debugger error image when in app developer menu is opened
As shown in the above image it says Bridge was already shutdown. Because of this i am unable to do inspect element inside react-native-debugger. I have searched in the internet regarding this specific error but unfortunately i did't find any solution.
Edit 1
I have set up a new react native project with react-native-cli and tested. It is also giving the same error. I don't know whether the problem is with new react native version 0.62 or react-devtools version 4.
This error appears to go away in react-native#0.66.0, but I experienced it on 0.64.2. The workaround I found was to open inspector without using the dev menu. Two ways:
cmd + i
Right-click inside react-native-debugger and select "Toggle Element Inspector"
If you do open dev menu and break connection again, simply reload to reset the state.
You might also need to confirm your app's react-devtools-core version from your node_modules or lock files match the version embedded inside react-native-debugger. I documented all this here:
https://gist.github.com/sschottler/7771dc034d38b89d9d587dc5d358c386

Debug JS Remotely is not showing on iOS simulator

I don't know why "Debug JS Remotely" is not showing on iOS simulator
Versions:
・RN:v0.62.0
・OS::macOS 10.15.3
・Xcode:11.3.1
Any solution??
With new react native versions, They have disabled hot reloading and live reloading with fast refresh and for your case Debug JS remotely has been changed to Start Debug. That will open up a browser in your system.
Hope it helps. feel free for doubts.
You're already debugging as you've turned on debug JS remotely(Start Debug newer version) ,open chrome and open inspect and tap on console ,you'll get the logs there, else to stop Just press on stop debugging to find debug JS remotely

how to connect app to development server and makes it sensitive to changes?

I'm working on an app that was developed by someone else and referred to me for debugging. I downloaded the project from git and now when I install it on my android device using the react-native run-android command and change the codes and save it, nothing happens in the app and I have to reinstall using "react-native run-android" to see the changes. what should I do to see the changes online?
The solution was quite simple. The only thing I had to do was to shake the device and click on "enable hot reloading" in the opened menu.
Try to clean the Gradle and run again. and also check are you able to get developer menu by clicking ctrl/command + m.

Switching between Expo Apps Running on Android Emulator

I am sorry for the trivial question!
While testing an Expo (react-native) app on Android Emulator, I need to switch to other apps, e.g. to the Contacts Manager to add a contact. Then, I need to go back to the Expo app to test something. How can I do that?
I tried the following.
Start the Expo app and play with it
Press the Home button
Start Contacts Manager
I could NOT find a way to start the Expo app again. I found an Expo icon in the list of apps. When I clicked on it, a screen with everything disabled, except "Open from Clipboard" appeared. The "Open from Clipboard" option seems to be for switching between different Expo apps. Anyway, when I clicked on it, I got the following error message.
Something went wrong. Could not load exp://switching/%20between%20Expo%20apps%20running%20on%20Android%20Emulator.
Environment:
Expo: 32.0.0
Android Emulator: API: 25 - Android 7.1.1 x86 - Nexus S
Thank you for your effort and time to help...
Are you using a connection localhost? if yes, on the terminal, try to press 'a'.

React Native debug

I’m doing a React Native project. It has a bug.
The bug make the APP just exit(it can functional run a while, but suddenly...just gone). So it dose not report error. How can I find out where the problem is?
My APP used react-native-bluetooth-serial.
My code on Github
Are you running it on you simulator.
If that is so you have to use real device for testing it as simulators do not have access to bluetooth peripherals.
Hope this helps.
You can use Genymotion or real device to use bluetooth enabled app. To test your bug you can also use "Debug JS remotely" feature of react native dev tools.
To enable dev tools in your real device, shake your device and dev menu will appear. In emulator you can press Ctrl + M to enable dev menu. then you can choose "Debug JS remotely" which will open in chrome. If you are familiar with web development then you might have used "Inspect element" feature which will open dev tools.
The answers are right. You might be using a simulator which doesn't support bluetooth.
To know more about the crash you can check the logs natively. For android just run this inside your android folder
adb logcat
Or you can use
react-native log-ios
react-native log-android