In order to use React Native Debugger, I don't see the option 'Debug JS Remotely' when I open the Developer Menu both on my android simulator and my physical device, using expo. Tried both scenarios and no option for Debug JS Remotely...
(I originally wanted to use my external device with React Native Debugger and I can't find the setupDevtools.js file at node_modules/react-native/Libraries/Core/Devtools/setupDevtools.js in order to update this file for use. I don't know if these two might be related, but also wanted to share)
Am I missing something? Thank you...
I guess the option Debug JS Remotely has been replaced by the option Debug with the latest version of react-native.
And If you want to use your external device with a debugger just shake the device and select the debug option from the developer menu.
But as #JoeBe suggested you should also look for an already open debugger and then try it.
You can also open the developer menu just by pressing d on node.js screen if you are using the latest version of react-native.
I had the same issue. But as it turns out, after terminating all other debuggers it was working with that Debug option as well.
Related
I am using both the Flipper and React Native Debugger on a React Native project.
I find JavaScript logging by React Native Debugger to be much richer given JSON formatting than Flipper (logs dumped as serialized strings). I however love the additional log tooling(especially for native logs) that Flipper provides.
Is it possible to setup choose the default Dev tool?
Opening the dev tools on the iOS simulator, all logs open with Flipper even if it was quit and the React Native Debugger was already open.
I have tried to configure a different port listened to by the debugger and dev tools but a flipper is still given the lead.
Has anyone tried to you both successfully?
Not tried but seems like this article can help you out:
Medium
Already given on React-Native official doc to setup default debugging tool.
If nothing messed up with your local setting then simple disabling can help.
When enabling "Debugging" in the ios simulator and open chrome for debugging.
The first time works perfectly but when change code and refresh automatically.
After that Debugging points somewhere else. I understand there is a mapping issue while debugging.
Any solution for this?
Debugging mapping attached to the project when we start project or reload but at the time of hot reloading (auto refresh) will not update that mapping correctly.
For update the mapping correctly you have to reload it.
In physical devices: Shake the device it will open a window choose 'reload' option.
For simulator: by pressing command+R or command+control+z and choose 'reload' option.
For emulator mac OS: by pressing r+r (2 times).
In chrome developer tools, try switching to network tab, and check "Disable cache". It might help
With old Android versions, app is so slow working when debug js remotely is active. Is there a way to see the logs which we have on Chrome ?
If Chrome is the issue, you can use React Native Tools Extension on Visual Studio. That way you can simply use VS code itself for reading logs.
EDIT: If putting Remote Debugger ON the issue, go ahead and use react-native log-android or react-native log-ios . Click here for more information on accessing console logs
You can use the server terminal for that, all consoles are going to be availabe there for you and you wont need to enable "debug remotly"
So I have a React Native app based on react-native-firebase-starter that I'd like to debug using better tools than just console.log output via react-native log-android. Debugger breakpoints, object inspection etc.
For a standard React Native app, this would be possible using the "Debug JS remotely" option which, as I understand it, runs the app's JS inside desktop Chrome and hence can use it's dev tools.
This does not seem to work for React Native Firebase however. I presume this is because it uses a lot of native Android/iOS modules along with mobile-only Firebase auth, and thus is only happy running entirely on the device. ...or something like that.
Am I doing something wrong or is there a way round this? What debugging setup will give me the best DX here?
The example project react-native-firebase-starter is natively built (as opposed to being created with Expo) and will therefore work as expected with the debugging tools you have mentioned.
Make sure when running the app the build variant Debug is selected, as in Release mode Metro Bundler / Packager and the debugging tools are not available.
If the debugging level via Chrome Dev Tools does not suffice, there are other tools created for React Native with better functionality (such as breakpointing). The most notable ones are:
React Native Tools extension for Visual Studio Code. Allows setting breakpoints and iterating through code in the editor.
React Native Debugger, which has a similar interface to Chrome Dev Tools and allows breakpoints to be set in the Sources tab.
Up-to-date installation instructions and configuration are provided in their respective repositories.
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