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

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

How to Setup Android Studio(In Short) & Create Your Android Virtual Device

Hello guys,  Today I am going to show you how to install 'Android Studio' and setup your own android virtual device in Windows PC. This post is very helpful for whom are new to android development. Read it carefully and follow simple steps given below:: Steps: 1.) Before the start of your android development, you need some things to be installed on your PC.       - Java JDK5 or later version      - JRE 6      - Android Studio 2.) So, first download Android Studio from link given below      -  Andriod Studio Download 3.) Now setup an environment variable.       - Simply search in windows 'environment variable'.       - Then select 'edit system environment variables' from the search list.       - After selecting that dialog box will be appeared named 'System Properties'       - To the bottom left of that dialog click on th...
Post a Comment
Read more