DevTools Profiler tab not visible for a react-native application - react-native

According to react-native changelog, the React Profiler is supporting in react-native since version 0.57 (https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#tooling-updates).
I have an application using react native 0.59.1, and the profiler is working. However, I am not able to view the profiler tab in chrome's react dev tools (https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#profiling-an-application).
I tried to do it with the app running on a genymotion emulator (on Windows), on Samsung Galaxy S6 and on a Xiaomi Mi A1 but it is not visible for any of these.
Does it work for you? On which smartphone type and which version of react native?

Well, the solution is simple, if you know where to read.
react-native doesn't work with the chrome extension, but with the stand alone version:
https://github.com/facebook/react-devtools/tree/v3/packages/react-devtools#usage-with-react-native

Related

Is It Possible to Run React Native Projects on Tablet Emulator?

I wonder if I can run my react native project on tablet emulator.
I used to develop with expo since now. But things got changed and I need to run my project on tablet for some reasons.
Does anyone know if I can run my project on tablet emulator?
I dont know about React Native CLI with emulator since I am using expo to now. Does react native bare setup allow us to run projects on bigger sizes like tablets?

React Native iOS Debugging in Safari Missing on M1

I'm used to debugging my React Native (0.63.2) app using Safari's dev tools. I got an M1 Mac Mini last week and have since been unable to get the console or source tabs to show anything from the iOS simulator. Not sure if this is related to the new machine, or if I missed a setting. Any ideas?
I usually do Develop > Simulator > JSContents from Safari, and everything would show up fine. I can get logs in the terminal, but Safari's devtools are much easier to manage.
Installing and using the "Safari Technology Preview" from https://developer.apple.com/safari/download/ worked for me.

How to debug React Native App with Flipper?

I use React Native Debugger but it has its limitation so can anyone guide me with the bare minimum on how to start debugging using Facebook Flipper and even is it worth it to use?
My main requirement is to be able to monitor the Network and Database of React Native app.
please go through below points for debug react native app using flipper.
React Native version should be latest.
Install desktop app for flipper in window and mac(If you are using mac than may be ask for some permission).
Open flipper and run react native project.
Finally If you see in flipper than you project dom tree is showing in react dev tool.Below I attached screenshot for react dev tools using flipper.
Note:- Flipper provide more feature like inspect network request, layout, you can check react native log and native logs(for ios and android).It is more easy just follow above steps.

React Native Expo app - unable to open app in iOS emulator

I want to run my React Native app in the iOS emulator. Here is what I done so far:
I installed XCode, along with its command line tools, and can bring up the emulator without issue.
I created an empty React Native app using the Expo CLI, per the instructions here. https://facebook.github.io/react-native/docs/getting-started. I am running on Node v10.0.0 on a Mac.
Afterwards I install all the necessary dependencies.
I then run "sudo npm run ios". This fires up the Metro Bundler as well as the iOS simulator. The Simulator loads up after about 5 minutes of waiting, but my app does not start up.
What am I missing here?
I should note that I prefer to stick with Expo, so I'd prefer not to have to eject.

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