Debugging
Accessing developer menu from the app.
- You can access developer menu in the application by shaking it if it is on your device.
- If you are using the app on the simulator then you can access developer menu by pressing f2 or ctrl + m on windows and ctrl + d in IOS.
Developer menu looks like as below image.
Note: Developer menu disabled in release build
Developer menu options description:
-- To Reload Javascript:
- When you make a change in your javascript code, after that you do not need to recompile the app. you can reload it by pressing 'R' double times in windows and pressing command + r in IOS.
Note: You need to rebuild the app for changing take effect in following situations:
- If you have added new resources in your app bundle.
- If you have modified native code
-- Automatic reloading:
- If you have to speed up your development time, then you can select 'Enable Live Reload' from developer menu
- It will auto reloads app as you made changes in your code.
- If you go one step further 'Enable Hot Reloading' is there to check if file's version change it will auto reload the app for new changes.
Note: If you are got stuck on some issues then you have to full reload the app.
-- Errors and Warnings inside the application:
- Errors are displayed in an application with a red background and error description.
- Warnings are displayed with a yellow background with detail description.
-- Chrome Developer Tool:
- To debug javascript code inside chrome you need to select 'Debug Js Remotely' from developer menu.
- It will open a new tab in chrome with URL http://localhost:8081/debugger-ui.
It will look list as displayed in below image:
-- Debugging on Device using Chrome Developer Tool:
- Connect your device to PC with USB debugging enabled.
- Open cmd to your project and check device attached by the following command
- Command: adb devices
- If above command displays your device as an attached device then run below command:
- Command: react-native run-android
- Now setup port for debugging by the following command.
- Command: reverse tcp:8081 tcp:8081
- Once app installation on device successful, shake your device for developer menu and tap on 'Debug Js remotely'
- Now you can debug your app on your device using chrome developer tool.
If you have any queries related to this ask in comment section or kindly mail me on this,
pnishith@gmail.com
This comment has been removed by the author.
ReplyDeleteHi there, You have done an incredible job. I’ll definitely digg it and personally recommend to my friends. I’m sure they’ll be benefited from this site..Keep update more excellent posts..
ReplyDeleteMobile App Development Company in Dubai
Android App Development Company in Dubai
Mobile App Development Company
Mobile App Development Company in UAE
Thanks
DeleteVisit my newsletter here: nishith.studio
Great Info. Thanks for sharing.
ReplyDeleteFreelance React Native App Developer
React Native Development is a cutting-edge technology that enables the creation of powerful and efficient mobile applications for both iOS and Android platforms. With its cross-platform capabilities, React Native allows developers to write code once and deploy it on multiple platforms, saving time and resources. At Connect Infosoft Technologies, we specialize in React Native Development, leveraging this powerful framework to build robust and feature-rich mobile apps. Our team of skilled developers has extensive experience in creating intuitive user interfaces, seamless navigation, and high-performance apps that deliver exceptional user experiences. Whether you have a specific app idea in mind or need assistance in conceptualizing and developing an app from scratch, our React Native Development services can help you bring your vision to life.
ReplyDelete