I am using visual studio code IDE to develop react native app and am not using expo library.
Before that I was working on the android studio, debugging in that is straightforward and simple.
Now for react-native, I wanted to know how to debug my app using visual studio code IDE?
If you want to debug the app in VS Code itself, like in other IDEs. Then on approach can be to follow the following steps:
Install React Native Tools Extension (provided by Microsoft) to VS Code.
This is a nice add on to VS Code's capabilities for React Native.
Then go to Debug option from left menu and click on Add Configuration.
If it initially says No Configuration then you can click on Add Configuration and then choose React Native option.
Now if already have Launch configuration added, then you can click on Add Configuration button then you will see more options related to React Native.
You can add configurations for React Native: Attach to Packager, React Native: Debug to Android, React Native: Debug to iOS in your launch.json file. It is present in .vscode folder.
Then add your breakpoints in code. Now suppose you already have your app running on emulator then you can choose option Attach to Packager.
Then on emulator or device open developer options (Ctrl + M for Windows + Android) and click on Debug JS Remotely.
Now your breakpoints should be working. Similarly if your app wasn't working already then you can go for Debug Android or Debug iOS accordingly.
Step1: Open app Setting in your mobile by shaking your mobile or by typing this command in your machine if your running android.
adb shell input keyevent 82
Step2: Select Debug JS Remotely which is the second option.
Step3: In your Browser type Url http://localhost:8081/debugger-ui/
Step4: Again Open App Setting by shaking or running the command shown in step 1 and select Reload option which is first option
Now You can get all console logs in the browser and also you can debug your app remotely by putting breakpoints and analyze the values step by step.
Related
Actually I'm developing an app in react native which requires background location access it's working fine in debug mode but when I generate apk it's not working. My question is do I have to submit it to play console even if the app is for testing to test the apk?
You need to added permission to your project.
https://docs.expo.dev/guides/permissions/
Just follow this doc or you can add permission into react native project also..
I'm making a React application and I'm currently using Visual Studio to run the program and VSCode to edit the code.
When I used to save changes on VSCode, it automatically refreshed the browser with the changes I did. But recently it stopped working and now I have to make a manual reload (F5).
Here's what I've tried so far without success:
Updated both programs to their latest version.
Deleting the file and downloading it again from Gitlab.
In Visual Studio: Tools > Options > Environment > Documents cheked the boxes to detect changes outside enviroment.
Delete and generate again the .vs folder
Tried on a different browser
Tried making changes in Visual Studio
And so on ...
I tried with a similar app I built and that one was working fine and using the same properties.
There's currently two of us working on the project, but this issue only happens to me.
I recommend running the React from VSCode, using npm start / yarn start from command line in the directory.
Try changing something and see if the browser automatically reloads.
We are building a desktop app that run a React-based web app inside a CEFSharp browser window. The web app is written in TypeScript, using .tsx files for the React-based GUI components.
When I open the devtools for the CEFSharp, I can see and open .ts (and the transpiled .js) source code files, and I can set breakpoints too.
--> However, for my React components I can see the .tsx files in the source files list, but when I click on them, an empty file shows up in the devtools (so obviously, I can't put breakpoints in the code...) The .map files are present.
Note that when I run the web app outside of a CEFBRowser (not in a desktop application), I can perfectly debug also the .tsx files in Chrome's devtools.
I have 2 Visual Studio solutions: one for the desktop application (a WinForms app), and another one for the web app (a TypeScript/React app).
The desktop app is coded to start a new process for IIS Express and load the web app page that was previously compiled to an output folder. The CEFSharp browser is created somewhere in the desktop app and opens the http://localhost:port page to show the web app in the desktop app.
So:
Is not being able to debug .tsx files a limitation of the devtools coming with CEFSharp?
Is there a way to attach a Visual Studio debugger to the web app running in the CEFSharp browser (so I can debug with Visual Studio instead)? Which process should I attach to?
Thanks in advance for any help!
Koen
I am using google chrome for debugging the react native app but in the source code tab, I am not able to see .js files.
For debugging I am using physical device.
Any body know about the solution?
Is there any better method to debug the react native app?
To debug a react-native app there is a react native debugger. It’s available on iOS and Windows as well. However, on Windows you have to download it manually from github. After you installed and started the debugger you can connect to it from the app emulator from the developer menu (command + d on iOS command + m in case of android emulator, on Windows you can use ctrl + m).
https://github.com/jhen0409/react-native-debugger
Curently, there's no react native debugger which can show you the .js files but you can debug the UI by this library:
[https://github.com/facebook/react-devtools][1]
You can also config your IDE to jump to the source code by clicking on the error message by edditing your .bashrc
If you're working on Visual Studio Code and want to debug your React Native app just like all other IDEs, then you can take help from React Native Tools extension provided by Microsoft.
You can read all steps in detail in my this answer.
The chrome inspect device doesnot list out the mobile application developed using react native.
I tried the react native chrome extensions but it didnt worked for me.
chrome://inspect/#devices
Is there any steps to that has to followed to inspect the react native apps?
You should active Remote JS Debugging from Developer Menu. to access Developer menu:
You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the ⌘D keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on Mac OS and Ctrl+M on Windows and Linux. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code).
I would recommend using React Native Debugger, which gives you a Chrome inspector but it is built specifically with features for React Native.
https://github.com/jhen0409/react-native-debugger