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
Related
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.
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 want to debug my hybride application via the Ionic View App, using the chrome://inspect tab of my desktop chrome browser. I connected my device (Nexus 4) and can open the console for all other opened webpages in Android's chrome-browser. As described in the ionic.io documentation (http://docs.ionic.io/v1.0/docs/chrome-inspector), I should also see the Ionic View App appear in the inspect menu but that isn't the case... Am I doing something wrong? I installed the right driver for my device and can see and inspect other mobile webpages.
Make sure that you've built the app without --release flag, and also that cordova console is installed.
cordova plugin add cordova-plugin-console
ionic build android
Have you configured your device?
Steps
On your device: enable USB Debugging.
Connect your device via USB.
In Chrome in the 'inspect' tab (chrome://inspect) check the option Discover USB Devices.
Check the Chrome docs for more information, maybe you are missing something.
I have a very small Ionic app I've been working on (just a couple angular routes/views). When I run it using "ionic serve", the app loads in my browser as expected. However, when I upload it using "ionic upload" and view it in the Ionic View app, it appears as though none of my javascript works, or my routes are not working.
How can I debug this issue? Are there build tools to detect errors or anything along those lines?
As #Keval says if you're running Android you can debug on-the-fly using Chrome
enable Developer options on your device (Settings > About, then find Build number and keep tapping it...yes really!)
In Developer options, enable USB debugging checkbox
plug in with a USB cable
run your app on the device.
At some point your device will then show a popup requiring you to accept debug commands from the remote computer, click Accept. If it doesn't appear the first time, unplug and replug usually fixes it
head to chrome://inspect in desktop Chrome, and click inspect under your device
A new Chrome window will open with all the juicy abilities you need - inspect code, set breakpoints, look at network speeds, access the console and so on
You can also do this on iOS via Safari http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/
I had the same issue recently. The problem was that I stored my Ionic views NOT in /templates folder.
Please, check, maybe my answer will be useful for you.