Skip to main content

React Native Debugging

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

Please do subscribe for latest posts,

Thank you.


Comments

  1. siva13 December 2018 at 11:47

    This comment has been removed by the author.

    ReplyDelete
  2. Kavi Priya14 June 2019 at 16:43

    Hi 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..
    Mobile App Development Company in Dubai
    Android App Development Company in Dubai
    Mobile App Development Company
    Mobile App Development Company in UAE

    ReplyDelete
    Replies
    1. Nishith Patel17 June 2019 at 00:48

      Thanks
      Visit my newsletter here: nishith.studio

      Delete
  3. MrMobileAppDeveloper10 November 2020 at 21:52

    Great Info. Thanks for sharing.

    Freelance React Native App Developer

    ReplyDelete
  4. Ashutosh CITPL14 June 2023 at 16:15

    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

Post a Comment

Popular posts from this blog

What Is Hybrid App?

Hybrid Apps: Hybrid mobile apps are simple apps you are using on your phone. These apps are you can easily find in stores and can use it. Like this apps are made from web technologies to make it platform independent. Native components are used for it to develop.  These apps are made to take advantage of device's native features. Generally, companies develop these kinds of apps as a wrapper which apps web version already exists. These kinds of apps are very popular due to its cross-platform development allowance which reduces overall development cost. These apps use native features of the device. The biggest advantage of hybrid apps is that you can add different functionalities and make it run on different operating systems. Following are some famous frameworks for hybrid app development. Ionic React native Quasar framework Ionic 2 Kendo UI If you have any queries related to this kindly mail me on this, pnishith@gmail.com My next post is abo...
12 comments
Read more

Getting Started To React Native Development (Configuration in Windows PC)

Quick Overview of React Native React Native is a framework for building 'Web-app', 'Html5 app' or 'Hybrid app'. Using it you can develop real mobile apps. It uses same fundamental UI building blocks as regular IOS and Android apps. You just need put that building blocks together using javascript and react. So, without wasting more time lets get started with React native configuration in windows PC There are some dependencies for react native. so you have to follow below steps to provide some modules to it on which it is dependent. you have to install Node.js, python, and ruby. Following are the links. 1) Node.js: Download Node.js    -- Note: download .msi 2) python: Download python    -- Note: download latest. 3) ruby: Download ruby installer  -- Note: download latest as per your system configuration. How to install (Important) -- Install Nodejs with default options. -- Install Python as given in following images....
9 comments
Read more