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
Related
I have a Flutter app that I've added to an existing Android app. I'm trying to profile this app, but my issue is that I can't seem to maintain profile mode and also use Flutter Attach to actually view the Flutter DevTools window. My process is as follows -- select 'Profile app' from Android Studio. App starts in profiling mode. Then I close the app, start Flutter Attach from Android Studio, and re-open the app so Flutter Attach connects. However at this point it says 'Syncing files to [Device name]...' and when that's done, I can open the DevTools but it's back in debug mode. The same happens if I start up Flutter Attach waiting for a connection and then start the profiling mode, it seems to be the process of attaching and syncing files that puts it into debug mode. But I could be missing something. (The fact that I have to restart the app in order for Flutter Attach to see it is also weird, and possibly related I guess)
Mostly solved -- simply using flutter attach --profile in the command line will keep the app in profile mode and allow you to open Dev Tools in the browser. However, I'm still unsure if it is possible to use the --profile option in when starting Flutter Attach from Android Studio, which would allow Android Studio's performance windows to be used, which seem better than the browser ones.
I can't seem to figure out how to make debugging work for a native Android module invoked from a Flutter app via a Platform Channel. I'm using the sample from the Flutter documentation (https://flutter.dev/docs/development/platform-integration/platform-channels). I've tried the following:
Open the Flutter project in IntelliJ
Right click the android folder and select Flutter | Open Android Module in Android Studio
Android Studio opens the native Android code.
Set breakpoints in Android code
Click Debug from Android Studio
Emulator shows "Waiting for Debugger Application is waiting for deubgger to attach" while in Android Studio the debug console shows 'Connected to the target VM, address: 'localhost:8601''
Run Flutter App from IntelliJ (I've also tried Debug from IntelliJ - flutter code will stop on breakpoints)
The breakpoints fro the native Android code never breaks
What am I doing wrong?
I started another project and was able to get it working.
To debug the Flutter code, start the debugger from IntelliJ
To debug the native android code, right click on the android folder and select Flutter | Open Android Module in Android Studio. Start the debugger there. The Flutter app will open in the emulator and you can set/hit breakpoints in the native code
What worked for me was running the app in debug mode in Android Studio and then pressing the "Attach Debugger to Android Process" button.
i want to preview my nativescript code on an android emulator which as i use the command line which is, i navigated to my app folder which which was successfully but when i type "tns preview" to run an android emulator to see my code in action i get
Found peer TypeScript 3.1.6
#
# Fatal
process OOM in insufficient memory to create an Isolate
#
TypeScript compiler failed with exit code 3221225477
and an android emulator is connected successfully, even nativescript notice the emulator, please what do i do
i have tried the Nativescript sidekick to start the emulator but the nativescript sees the android emulator and it did not report an error indication but when i select the android emulator and click "Run on Device" i get
Build failed. TypeScript compiler failed with exit code 3221225477
even i have tried using my android device for previewing it which i install the nativescript playground & nativescript preview but if i scan the QR Code it is not previewing, please help out
please i need a solution
Preview is to be used with real device for quick testing. The basic idea is to avoid setting up whole iOS / Android SDKs on your local machine.
Produces a QR code which can be used to preview the app on a device without the need to install various SDKs and tools or configure your environment for local iOS or Android development.
To scan the QR code and deploy your app on a device, you need to have
the NativeScript Playground app:
App Store (iOS):
https://itunes.apple.com/us/app/nativescript-playground/id1263543946?mt=8&ls=1
Google Play (Android):
https://play.google.com/store/apps/details?id=org.nativescript.play
If you want to view your app on your android emulator, run the command
'tns run android --emulator'
This is assuming you already have an emulator set up on your machine.
To see a list of your available devices run the command
'tns device'
If you have not set up an emulator follow setup here: https://docs.nativescript.org/tooling/android-virtual-devices
I am running my React Native app in Visual Studio Emulator for Android. Can someone tell me how can i debug my js code ? In Android studio simulator we have options to remote debug. But from Visual studio Emulator how can i debug..Thanks in Advance.
If you have chrome installed, then you can use the chrome debugger to debug your js code.
First
Mac: command + M
Window: control + M
Then click debug js remotely; It will open a tab in chrome, then right click and select inspect, switch to the console tab. Any statement you console will appear there.
There are two ways you can debug your code.
First one : Using visual studio debug menu.
Press ctrl+shift+D to open up debug menu and select Attach to Packager or select 4th item on the left in visual studio.
This allows you to set break points and debug code as you see in Android Studio.
Second one : Using React Native Debugger
I did all the steps to create a react native application , but when it came to running the App it shows me this Error below in the image , what could be the problem.
You have to make sure your emulator is run (i recommended using genymotion), and also ensure you have been to configure your system with android environment. You can follow step by step in the documentation.