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.
Related
I started with React Native today and I downloaded react-devtools from npm repo to debug Components hiearchy of React Native Expo app. It works fine, but it crashing sometimes.
Thats why I tried to search for some new version or something and I found, that GitHub repo of this project no longer exists (https://github.com/facebook/react-devtools) and was moved to (https://github.com/facebook/react). I dont understand where I can now found this tool in main React repo? Or project is discontinued? Are there some equivalents? Am I using some Legacy version?
Even debugged in browser (http://localhost:19001/debugger-ui/) telling me to download this app from non-existing repo.
Are there some equivalents?
I have been using reactotron for the need of devtools. This tool has way more options than devtools and the guide to install can be found here
https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md
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
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.
I am having react native code which is running on both iOS & Android. Also I have used some dependencies like image picker or other but now I have to run that application in windows phone also so for this I followed this link for set up a dummy application in windows machine
https://shift.infinite.red/getting-started-with-react-native-development-for-windows-ba23a4be90b6
It was successfully done. There was no problem but when I am running for my existing React native application. It is throwing errors related to dependencies which were supported in both iOS & Android.
No issue my existing code is working fine in windows but those third paty libraries are not supported in windows.
As of now I have used this library to hide white screen in React for both Android & iOS https://github.com/crazycodeboy/react-native-splash-screen
My problem is that it is throwing error when using this library code for windows application else perfectly working in android & ios.(all third party libraries used in the existing react native code are not supporting in windows)
How can I run react native existing code for Windows Phone with all third party libraries.
I am using Visual Studio Code to build a React VR app and I am trying to figure out how I can inspect my code, i.e. through chrome dev tools. I have the React Developer Tools Chrome plugin installed however it is not detecting my React VR code. Are there any other ways?
I noticed nuclide, but that is only built for Atom?
Try React Native Debugger. A great and easy way to debug react-native apps. Since React-VR includes React Native as a dependency it also works with react-vr. (I used it with react-vr!).