Debug with React Native Debugger

Tram Ho

React Native Debugger is a powerful tool for developers to use every day to develop their apps more quickly. It offers an impressive and familiar set of features such as the UI inspector , Redux inspector , Breakpoints, and Networking inspector . In this article, we will learn a few ways to use React Native Debugger .

If you’re a programmer, you’ve probably come across a debugger, every platform is required for development, and React Native is no exception. React Native Debugger is a standalone tool built on top of the Electron Framework . You can easily integrate this tool with the Chrome Dev Tool .

Install React Native Debugger

Installation is as easy as any other package. Just download the latest version from the publisher. For Mac OS, we can use Homebrew Cask to install. Just open up the terminal and run the command:

After a successful installation we will see connection status and debugger window. The debug process will run by default on port 8081

Now when we run the React Native app in debug mode, we don’t need to open the browser anymore. To get your app running into the debugger then simply shake your device and select Debug in the develop menu. If you are using an emulator, press Command + Shift + Z to open the develop menu.

All option menus will appear in the debugger app.

Chrome Dev Tools, React Dev Tools, Redux Dev tools

As you can see, all the important utilities for debugging are here.

The Network Inspector

When developing an application that needs to connect to the server, we don’t know what is going on behind it. For example, when sending a request to the server, it’s hard to track the error if it happens. Developers often debug by printing or logging errors, although it is quite time consuming because they have to repeat many times to understand the thread and state properly (most people do this including me).

So with React Native Debugger , we can easily monitor all incoming and outgoing access between client and server.

  • It is possible to monitor the activity of React Components, the Redux Store’s data stream as well as network requests in a single window.
  • CORS can be modified quickly.
  • You can modify request headers like name, origin and user-agent.

AsyncStorage Management

We can debug AsyncStorage configs using the command

Debugging Redux State & Actions

As mentioned in the official React Native Debugger documentation , this tool comes with the Redux Dev Tool built in . However, the Redux Dev Tool will not function properly until we activate them. To use the Redux Dev Tool in React Native Debugger , we need a little bit of configuration in App.js , add the following:

After reloading we can see the activity flow of Redux actions has been logged

UI Inspector

React Native Debugger offers a debugger with a UI in a similarly powerful way compared to Inspector on the web. We can check out elements, layout arrangements, and element styles easily

Breakpoints

React Native Debugger also allows to stop the execution of a task at a certain time. This helps developers understand the data state at which specific times they want in the life cycle of an application.

Debugging Expo Apps

If you choose to use Expo CLI instead of React Native CLI then React Native Debugger works fine for Expo too.

Usually, Expo Debugger will run on port 19001. To switch React Native Debugger , run the following command:

Conclude

In this article, we have looked at the most basic, core, and effective debugging features. It will make it easier to develop React Native apps, efficient apps, and fewer bugs.

Thanks for following the article!

Share the news now

Source : Viblo