how do I enable Debug JS Remotely in React Native? - react-native

To debug redux, I use React Native Debugger, but for this you need to enable Debug JS Remotely. I don't have this tab in the developer menu. I use redux, redux-toolkit, redux-saga.
photo: https://i.stack.imgur.com/jrX4b.png

You should disable hermes on Podfile:
Set :hermes_enabled => false
Install pods cd ios && pod install && cd ..
Build App npx react-native run-ios
Reference: https://github.com/facebook/react-native/issues/34615#issuecomment-1238913946

We can debug the application with ReactNative 0.70.0 with Hermes Enabled by following this reference

Shake your device or pick "Shake Gesture" from the Hardware menu in the iOS Simulator to get to the developer menu. you can check this tutorial here.

Choose Open Debugger option and then inspect the browser webpage and go to the console tab in that

installed the desktop version of flipper with the redux debugger plugin. The problem is solved, albeit in a different way :)

You can check this website and You can check the hermes installation settings. You have to configure chrome settings for using debug mode with hermes.

Related

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.

Nuclide React Native: Start Debugging

Trying to use nuclide with atom but I cannot get the debugger to work. I have nuclide installed (v0.243.0). Running on Mac and followed the setup instructions in the docs. I run the RN packager within Nuclide, start the debugger and then run 'react-native run-ios' from terminal and lastly enable chrome debugging.But I cannot find find nuclide command 'Nuclide React Native: Start Debugging'.
https://i.stack.imgur.com/lNV9U.png
React Native debugger support was dropped by [fccd95d]

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

Debug a react-native application using nuclide

Is there any good document/video that talks about how to debug a react-native application using Nuclide.
Am a newbie. Its my first time app development and first time with React.
I did create the project using react-native init. I don't think i found a BUCK file for me to run and debug my app. I also don't see to get how to view the errors in my JS file. I have to run the simulator to see. I run it using react-native run-ios.
I tried Nuclide->React Native->Start Debugging. Not sure what this is supposed to do.
Sorry if these questions sound silly.
According to this instruction you should:
From the command Palette (Cmd-Shift-P) choose "Nuclide React Native: Start Packager" to start the React Native Server.
Ensure that you are in the root directory of the React Native project, then run the application from the command-line: "$ react-native run-ios" (or choose other existing simulator, for example react-native run-ios --simulator="iPhone4s").
After starting the server, you can prime the React Native Debugger for when the application begins running. From the command Palette (Cmd-Shift-P), launch "Nuclide React Native: Start Debugging".
From the Simulator press Cmd-D (Ctrl-D on Linux). This will bring up the debug options for your application. Select "Debug JS Remotely.
...After you enable debugging from the simulated application, Nuclide will attach to that debugging process automatically, since we primed the Debugger above.
Debug JS in Nuclide is now an option in the dev menu added in React Native version 0.52 December 2017 release.
See This

React Native DEV and PROD variables

How do I know if my React Native app is running in production or development? Is there some sort of way within JavaScript to tell? Is there a global that is passed in?
You can use the __DEV__ global variable in JavaScript to determine if you're using React Native packager or not. If you are running your app in the iOS Simulator or Android emulator __DEV__ will be set to true.
https://reactnative.dev/docs/javascript-environment
You can use the __DEV__ variable.
By default if you run your app with npx react-native run-ios or npx react-native run-android, it will run in Debug mode and __DEV__ will be true.
In release mode, __DEV__ will be false.
You can use it this way:
const CLOUD_API_BASE_URL = __DEV__ ? 'https://api-dev.yourdomain.com' : 'https://api-prod.yourdomain.com';
You can run the app in Release mode with the terminal:
react-native run-android --variant release #android
react-native run-ios --configuration Release #ios
Or open the ios folder in XCode, choose Product > Scheme > Edit Schemes
Select Run in the left menu. For Build Configuration, choose 'Release' and uncheck 'Debug executable'
In Android Studio, similarly, you can set the build variant to release
When the __DEV__ variable is set to true, it turns on a bunch of useful development warnings. For production, it is recommended to set __DEV__=false.
I didn't intend to write an answer, but I'm not able to comment (<50 pts). To toggle __DEV__, you can set it before your command, e.g.:
__DEV__=true expo start (should already be set to true though)
or
__DEV__=false react-native run-ios (should be set to true by default, when running this command without setting manually)