I am using android 8.1 simulator to debug my React Native (0.62) app with VS code on Win10. After firing up the app with react-native run-android, Ctrl+m brings up the dev menu:
But there is no option of Debug JS remotely in the menu. How can I bring up the option of Debug JS Remotely?
You should be able to debug a RN app in Chrome dev tools, unless you are running a production build.
If you want to use another debugger, you can set it with the REACT_DEBUGGER env. variable. Example:
REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative"
For VSCode there is this extension. There is a section explaining how to debug.
Related
I have an interesting scenario. It was an expo project that I converted to react-native. I don't have a react-native command (but can run npx react-native, but my understanding is to build the test APK I run yarn android which actually runs expo run:android.
However, my dev server is remote, so I'm looking to generate an APK and then use the developer menu to set the IP address of the dev server on the device, then connect to the react native server (i.e. not using Expo anymore)
How do I go about building this APK? When I use yarn android it says there are no devices connected and won't build.
Thanks!
npx react-native run-android builds an APK in ./android/app/build/outputs/apk but then fails. Just install this APK, then run it, shake the device to get the menu to pop up (or Cntrl-M for the menu on an emulator), settings, and dev server info is there (port 8081 default).
I am working on a react-native application, when I run my debug build I am able to debug using the metro tool using the following commands.
npx react-native start
npx react-native run-android
Magically my emulator pops up and if I click "d" in the metro terminal it activated my debugging tools.
When I run
npx react-native run-android --variant=release
When I click "d" in the metro terminal it says
warn No apps connected. Sending "devMenu" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
info Opening developer menu...
Is there something about the release build that does not allow for the use of these debugging tools or is there something I need to do within build.gradle or some other configuation file to enable using the metro debugger.
I am new to react-native development so my apologies if my terminology is off.
Appreciate you help!
After receiving feedback from various people on and off of SO it seems that the debugger is not meant to be used in the release build.
In my circumstance there was an issue with gradle configuration involving react-native-config which was a known issue related to Progaurd which would only impact release builds.
As recommended in this post I used the javascript alert() method to debug the issue.
I currently need to use the following steps to run and debug React Native Android App using Android Studio and Google Chrome:
Start up Android Studio
Setup emulator
Go to terminal, run npm start
Choose the desire flavour
Run the emulator
Remote debug in Chrome
I wonder if life can be made easier to use Visual Studio Code (possibly with some official plugin) to do all the above in a single click? Please list out the steps to configure it.
Debug react native android and ios app using Visual code, We need to add addition plugin into VSC React native-Full Pack
Step 1.
Install React Native - Full Pack extension
Step 2.
Connect the mobile device using USB debugging mode or open emulator from the android studio.
Step 3.
Click on debugging option from the left menu in visual code studio Click on Add configuration and select React Native then create launch.json
Step 4.
Open dev option in the phone on the long back press or shake the phone and Enable Debug js remotely
Step 5.
Final step click on play button and select Debug android or Debug ios
For more information refer this link
https://medium.com/#tunvirrahmantusher/android-debug-with-vscode-for-react-native-96f54d73462a
When building a react-native project for android you run the following command
react-native run-android --variant=release
However for a successful release build an android emulator needs to be running. If it's not you'll get the following error:
* What went wrong:
Execution failed for task ':app:installRelease'.
> com.android.builder.testing.api.DeviceException: No connected devices!
But I don't want to start an emulator because I'm building the project in a container that doesn't support android emulators.
Is it possible to build a react native application for Android without running an emulator?
Note:
A physical device won't work because I'm working with containers that are running in CircleCI which is a Cloud-based Continuous Integration service.
The react-native command line utility wraps another utility called gradlew (which is in fact another wrapper for gradle that will download gradle if it doesn't already exist).
The gradlew utility lives inside the android directory and can be used directly like this:
cd android
./gradlew assembleRelease
So if you're wanting to build a release Android Package (APK) but not run it on an emulator then the above command will work!
You could test your app in browser. But which need some third-party tools, such as https://snack.expo.io/, and here is a good tutorial about using it.
Why not just use a physical device?
As long as you have followed these steps:
1. Open the Settings app.
2. (Only on Android 8.0 or higher) Select System.
3. Scroll to the bottom and select About phone.
4. Scroll to the bottom and tap Build number 7 times.
5. Return to the previous screen to find Developer options near the bottom.
you can enable USB debugging on your device under developer options. After enabling USB debugging, react-native will target your device and install the release apk.
I'm using WebStorm for developing a react-native app + an emulator from the Android Studio virtual device.
The app is loaded great from the WebStorm into the emulator but the debugger isn't working, won't stop on breakpoints.
This is my settings:
This is the configuration of WebStorm:
The device in the emulator is Nexus 5X API 22 (Android 5.1 x86), i enabled "Remote JS Debugging" after its first loaded.
WebStorm output:
/usr/local/bin/node --debug-brk=60746 --expose_debug_as=v8debug /Applications/WebStorm.app/Contents/plugins/JavaScriptDebugger/proxy/launcher.js --port=8081 --sourcesStoragePath=/dev/calculatorApp/.tmp/reactNativeBuild
Debugger listening on [::]:60746
[intellij] Downloaded debuggerWorker.js (Logic to run the React Native app) from the Packager.
[intellij] Starting debugger app worker.
[intellij] Established a connection with the Proxy (Packager) to the React Native application
[intellij] Debugging session started successfully.
Running application "CalculatorApp" with appParams: {"initialProps":{},"rootTag":1}. DEV === true, development-level warning are ON, performance optimizations are OFF
Process finished with exit code 137 (interrupted by signal 9: SIGKILL)
In my case I found out that the debugger in IntelliJ/WebStorm wouldn't work if I create the project with create-react-native-app app-name from the command line.
However, the debugger does attach if you create the project following the prompts inside of IntelliJ/WebStorm itself.
e.g. File -> New -> Project -> React Native
I suspect it is because it doesn't use the create-react-native-app command to generate the project files but rather some other mechanism.
If I run create-react-native-app app-name and then load the project in IntelliJ/WebStorm, I noticed that the only sub-directories it creates are node-modules and .expo.
However, if you create the React Native project in IntelliJ/WebStorm, it generates additional directories, android, ios, __tests__, that are not created when you run create-react-native-app app-name.