Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
In-App Developer Menu
3.
Enabling Fast Refresh
4.
Enabling Keyboard Shortcuts
5.
LogBox
5.1.
Console Errors and Warnings
5.2.
Unhandled Errors
5.3.
Syntax Errors
6.
Chrome Developer Tools
7.
Debugging native code
8.
Frequently Asked Questions
8.1.
How do I debug in React Native?
8.2.
What is a native debugger?
8.3.
What is an API, and what do you mean by API integration? 
9.
Conclusion
Last Updated: Mar 27, 2024

React Native Debugging

Author GAZAL ARORA
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Debugging is a multistep process in computer programming and engineering that involves identifying a problem, finding the source of the problem, and either correcting the problem or figuring out a workaround. The final stage in the debugging process is to test the fix or workaround to ensure that it works.

Debugging your code is made easier with React native's APIs. It offers multiple methods that help in debugging your code.

Click on the following link to read further: Hooks in React JS

In-App Developer Menu

  • Shake your device or select "Shake Gesture" from the Hardware menu in the iOS Simulator to get to the developer menu.
  • Use the Command+D keyboard shortcut if your app runs in the iOS Simulator.
  • Use ⌘M when running in an Android emulator on Mac OS or Ctrl+M on Windows and Linux.
  • To open the dev menu on an Android device, use the command adb shell input keyevent 82. (82 is the Menu key code).
  • Reload: It is used for reloading the simulator. You can use the command + R shortcut.
  • Debug JS Remotely: Activates debugging in the browser developer console.
  • Enable Live Reload: This allows you to reload your code in real-time. The debugger will run at localhost:8081/debugger-ui.
  • Start Systrace: This command launches the Android marker-based profiling tool.
  • Show Inspector: Used to open the inspector where you can obtain information about your components. You can use the command + I as a shortcut.
  • Show Perf Monitor: The perf monitor keeps track of your app's performance.
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Enabling Fast Refresh

The Fast Refresh is a React Native feature that provides near-instant feedback for changes made to your React components. Enabling Fast Refresh when debugging can be beneficial. Fast Refresh is turned on by default, but you can turn it off in the React Native developer menu by toggling "Enable Fast Refresh." Most of your changes should be displayed within a second or two once you enable it.

Also see,  React Native Reanimated

Enabling Keyboard Shortcuts

In the iOS Simulator, React Native supports a few keyboard shortcuts. To use them, go to the Hardware menu, pick Keyboard, and tick the box next to "Connect Hardware Keyboard."

LogBox

Errors and warnings are shown in the LogBox within your app.

Console Errors and Warnings

A red or yellow badge indicates console errors and warnings on the screen and the number of errors or warnings in the console. Tap the notification to get the full-screen details about the log and paginate through all of the logs in the console.

LogBox.ignoreAllLogs() can be used to hide these notifications.
import { LogBox } from 'react-native';
// Ignore the log notification by message:
LogBox.ignoreLogs(['Warning: ...']);
// Ignore all the log notifications:
LogBox.ignoreAllLogs();

Unhandled Errors

Unhandled JavaScript errors, such as undefined is not a function, can cause a full-screen LogBox error, displaying the source of the error. These errors can be skipped or minimized, but they must always be resolved.

Syntax Errors

When syntax errors occur, a full-screen LogBox error with the stack trace and location of the syntax problem will appear. This error cannot be ignored because it indicates an incorrect JavaScript execution that must be corrected before proceeding with your app. Fix the syntax error and save to dismiss the errors automatically (with Fast Refresh set) or cmd+r to reload the page (with Fast Refresh disabled).

Chrome Developer Tools

To debug JavaScript code in Chrome, go to the Developer Menu and select "Debug JS Remotely." http://localhost:8081/debugger-ui will open in a new tab.

Go to the Chrome Menu and select Tools Developer Tools to open the Developer Tools. You can also use keyboard shortcuts to get to the DevTools (⌘⌥Ion macOS, Ctrl Shift I on Windows). For a better debugging experience, you might also wish to set Pause On Caught Exceptions.

Note: Developer Tools for React React Native does not work with the Chrome plugin, but you can use the standalone version instead. 

Debugging native code

When writing native code, such as native modules, you may use Android Studio or Xcode to launch the app and use the Native debugging features (setting up breakpoints, etc.) just like a typical native app.

Refer to know about :  What is debugging

Frequently Asked Questions

How do I debug in React Native?

First, Connect your React Native app to React Native Debugger. To use React Native Debugger with your app, you must first run it and access debug mode. Shake your phone or press Command + Shift + Z or Ctrl + M and select the debug option to enter debug mode.

What is a native debugger?

It's a desktop application that runs on macOS, Windows, and Linux. It combines Redux's DevTools and React's Developer Tools into a single app, eliminating the need to use two separate debugging tools.

What is an API, and what do you mean by API integration? 

An API is an interface that allows multiple applications to exchange data. API integration means using APIs to fetch data from a remote URL and using it in your app as per your business requirement. 

Conclusion

In this article, we learned about React Native Debugging. We learned how to connect ours react application to React Native Debugger. Then we learned about multiple methods that React Native offers to help in debugging your code.

Click here to learn about React Native Testing and Usb debugging


You can use Coding Ninjas Studio to practice various DSA questions asked in different interviews. It will assist you in mastering effective coding techniques, and you will also get interview experiences with people working in big companies.

 

Happy Learning!!

Previous article
Running React Native Apps on Android
Next article
React Native API Integration
Live masterclass