Debugging React Native with react-native-debugger

Debugging in the React Native universe may be done in various ways and with various tools, as React Native is built up of distinct environments (iOS and Android), which means there are a variety of problems to solve with tools to use. Debugging entails a detailed examination of the code and aids in the early detection of errors.

Fixing these problems or defects during the React Native app development process rather than during the production stages will save money for any React Native app development company. Thanks to the vast number of contributors to the React Native ecosystem, many debugging tools are available. To get detailed knowledge of React JS concept, opt for React JS online training  and boost your knowledge.

Mục Lục

What is React Native Debugging?

Debugging is essential for developing apps and detecting issues. A thorough understanding of debugging techniques enables more rapid and efficient software development.

We will go through a couple of debugging approaches in React Native here. We will be developing, running, and debugging our apps with expo-cli, one of the simplest and fastest ways to construct a React Native app.

The following are some common react native debugging techniques:

Logging
Debugging in chrome browser
Debugging in visual studio code

Logging

It is a simple and quick way to debug your software while still in development. It is one of the most straightforward methods for learning how an application works. To log, we just utilize the console.log() instructions to record the appropriate data or indicators. However, we must never forget to remove these console.log() statements before submitting our product to the development phase, as they will only add overhead.

Debugging in Chrome Browser

We may activate Remote Debugging in our application, which will allow us to debug React Native code in a Chrome browser tab, like how we debug web applications with Chrome developer tools.

Debugging in Visual Studio Code

We can utilize React Native Tools, a VS Code addon used for debugging React Native projects. Simply create a new file named Launch.json after installing the extension, which will be used to debug the configuration file construction. Finally, we must enable Debug JS Remotely as well as Live Reload. We can now begin debugging with VS Code.

Features of React Native Debugger 

UI Inspector

You must be aware of element inspector if you are a web developer. The UI Inspector in React Native Debugger works similarly: one can see all the tags used in your app and inspect their styling. You can use the inspector to test your UI and adjust the styling.

This is, by far, the most efficient approach to viewing and debugging UI hierarchy in React Native projects.

Debug Redux

You will need a state management library whether you are working on a React or React Native app. Redux is one of the most popular state management libraries on the market.

However, especially in React Native, using Redux might be a nuisance if you cannot debug your state. You may use React Native Debugger to debug your Redux-based project easily. You may even debug the current condition in real-time.

Until we specifically If we do not use redux devtools in our project, it will not work properly. As seen in the code snippet below, first must enable redux in our app by inserting certain config lines to our App.js file either to our redux main function, to use redux devtools in the react-native-debugger:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducers, /* preloadedState, */ composeEnhancers(middlewares));

If we now reload our RN Debugger tool and perform some activities, we will see the following in the debugger console:

Debug Redux

As you will see, the React Native Debugger exposes the entire Redux state, so users do not need to use breakpoints or console logs to figure out how data flow in the redux system. One incredible feature is the ability to go back in time directly from the debugger to reverse and re-run Redux activities. Another notable feature is the ability to see the exact difference between two state transitions, which is especially useful for projects with many Redux states.

Network Inspector

In general, we may not know what is happening behind the scenes while designing an app that needs to connect to a server. When submitting a request to the server, for example, it may be difficult to track down an issue. Developers typically debug this by printing or alerting error messages; however, this is time-consuming (even though most people do it), as it takes many iterations to comprehend the condition fully.

We can easily monitor every inbound and outbound traffic request between the app and the server using the React Native Debugger.

AsyncStorage Management

You can easily print or log your AsyncStorage on the console by running the following command:

console.log(showAsyncStorageContentInDev())

This will print or report the AsyncStorage data in the terminal on React Native Debugger.

Breakpoints

The React Native Debugger also allows us to pause the execution job anytime. This will allow developers to inspect data states or understand app activity anytime during the app’s lifecycle.

How to Debug in React Native?

Run your application in the iOS simulator.
Press Command + D and a webpage should open at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture
Enable Pause On Caught Exceptions for a better debugging experience.
Press Command + Option + I to open the Chrome Developer tools or open it via View -> Developer -> Developer Tools.
You should now be able to debug as you normally would.

Enabling Keyboard Shortcuts

In the iOS Simulator, React Native supports a few keyboard shortcuts. They are outlined below. To make them work, go to the Hardware menu, pick Keyboard, and check “Connect Hardware Keyboard.”

Shake your device or pick “Shake Gesture” from the Hardware menu in the iOS Simulator to get to the developer menu. When your app runs in the iOS Simulator, or M when executing in an Android emulator on Mac OS, or Ctrl+M on Windows and Linux, developers can use the D keyboard shortcut. To open the dev menu on an Android device, use the command adb shell input keyevent 82. (82 being the Menu key code).

Accessing the In-App Developer Menu

Reloading JavaScript

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 enabled by default, and you may enable it in the React Native developer menu by toggling “Enable Fast Refresh.” Most of your adjustments should be displayed within a second or two once you enable it.

In-app Errors and Warnings

In development builds, errors and warnings are presented inside your app.

Errors

Inside your app, errors are displayed in a full-screen alert with a red background. A RedBox is the name for this type of display. You can manually trigger one using console.error().

Warnings

Warnings will have a yellow background on the screen. YellowBoxes are the name for these notifications. To get more information or dismiss the notifications, click on them.

A YellowBox can be triggered using console.warn(), much like a RedBox.

YellowBoxes can be turned off in the console during development.

disableYellowBox=true; By setting an array of prefixes to ignore, certain warnings can be ignored programmatically:

import { YellowBox } from ‘react-native’;

YelloBox.ignoreWarnings([‘Warning:….’[);

Select “Debug JS Remotely” from the Developer Menu in Chrome to debug the JavaScript code. http://localhost:8081/debugger-ui will open in a new tab.

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

 To become a web developer and designer, you will need a perfect guide to get the best knowledge. You can check out our Web Development and Designing course and get a perfect guide to get the best knowledge.

One of the drawbacks of utilizing Chrome’s DevTools with React Native is that you cannot debug styles or change their properties as you can with web apps. When investigating React’s component hierarchy, it is likewise constrained compared to React’s devtools.

You do not need to enable “Debug JS Remotely” to debug the iOS version of your app with Safari.

In Safari, go to Preferences Advanced and enable the Develop menu. “Show Develop menu in menu bar” should be selected.

Select the JSContext for your app: Develop -> Simulator -> JSContext

Safari’s Web Inspector, which includes a Console and a Debugger, should open.

Although sourcemaps are not enabled by default, you can enable them by following these instructions or seeing this video and setting break points in the proper places in the source code.

A new JSContext is created each time the app is reloaded (using live or manually reloading). You can avoid manually selecting the newest JSContext by selecting “Automatically Show Web Inspectors for JSContexts.”

You must use the desktop app to debug React Native using React’s Developer Tools. Simply use the following command to install it globally or locally in your project:

yarn add react-devtools

or npm:

npm install react-devtools --save

After that, run yarn react-devtools to activate the app.

For these two reasons, React’s Developer Tools may be the greatest tool for debugging React Native:

It makes it possible to debug React components.
It allows you to debug React Native styles (my favorite aspect of these development tools!). This feature is included in the latest version and works with the inspector in the developer menu. Writing styles used to be a pain, and you had to wait for the app to reload to see the changes. Now we can debug and implement style properties without reloading the app to see the results.

Except for layout, basic state, and characteristics:

Debugging JavaScript is not possible.
Console logs are missing.
There are no breakpoints or exclusions.

Although it works with emulated and real devices and is cross-platform, it is a highly specialized debugger. If I needed to debug my layout or determine where a component was getting props wrong, I would use this.

The redeeming grace is that it also sets the highlighted component as a variable in Chrome Inspector, allowing you to dump the property’s state there. It is quite a clever trick.

Conclusion

This article teaches us about the React Native Debugger tool, its installation method, how it works, use-cases, and essential capabilities. It will undoubtedly make any React Native developer’s life easier, more productive, and more efficient. Additionally, your apps will be faster and have fewer issues.

We strongly advise you to use the React Native Debugger instead of the Chrome Dev Tools because it contains a set of key capabilities that will significantly speed up your work.

If you want to get a job as a ReactJS developer or want a hike in your pay slab, then you must check React JS online training KnowledgeHut. It includes 24 hours of live instructor-led training, live projects, assessments, and more.reactjs online training.