logo

6 Tools for debugging React Native

October 16, 2019

image

The Debugging is essential process in any software development phases, it’s by debugging we know what’s wrong and what is right, what works and what doesn’t, Debugging gives the chance to measure our code and fixing problems before push it the production, as Wikipedia think that the Debugging is the process of finding and resolving defects or problems within a computer program that prevent correct operation of computer software or a system.

In React Native world The Debugging may be done in different ways and with different tools and that’s because React Native is composed of different environments (iOS and Android) and this means an assortment of problems and a variety of tools for debugging. The huge amount of contributions to React Native ecosystem, allowed for many debugging tools to exist that’s why today we are going to explore the most tools used to debug React native starting by the Developer Menu.


Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it. BRIAN W. KERNIGHAN


The Developer Menu

image

The developer menu is your first gate for debugging React native, it has many options which we can use to do different things, let’s break down each option,

  • Reload: to reload the app
  • Debug js remotely: open a channel to a JavaScript Debugger
  • Enable Live Reload: Make the app reload automatically when we click save
  • Enable Hot Reloading: Hot reloading watch for changes accrued in a changed file
  • Toggle Inspecto: It toggles an inspector interface that allows us to inspect any UI element on the screen and it’s properties, also the interface has other tabs like networking that show us the HTTP calls and a tab for performances

YellowBox and RedBox

image image

The RedBox is always used to display errors, every time the app throws an error it will display the RedBox and the description of the error, you can display it any time just by writing console.error, however, it doesn’t work in the production, if an error happened the app will crash and stop running.the RedBox should be your friend, one of the helpful things about it is that displays you the error and gives you the suggestions to fix it which you won’t find in the console, for example this happen frequently with me when I write style property that it’s not supported by React Native or a property that is used for a specific element for example if you set backroundImage for the View element The Redbox will throw an error, but not only that it will show the list of supported style properties that you can apply to the View,

The YellowBox is used to display warnings, you can disable it by adding this line of code inside index.js in the root directory of your app, but it’s not really recommended because it’s very useful it always warn you about performance issues, deprecated code so it’s better you keep it, also you can use the YellowBox element from react-native to display a specific warning,

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

It is always good to listen to the warnings that The YellowBox display,the most of the warnings are related some bad practice in your code for example If you have an eventListener and you don’t remove the listener when the component unmount or deprecated features and dependencies like the example below,

warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from ‘@react-native-community/viewpager’ instead of ‘react-native’. See https://github.com/react-native-community/react-native-viewpager

Fixing those warning will prenent many bugs and it improve the quality of your code.

You can always learn more about debugging React Native in the official docs.

Chrome devtools

Probably Chrome is the first tool you will come to your mind for debugging react-native, We usually use Chrome dev tools to debug web apps, but we can use them to debug React Native and that’s because React Native is powered by JavaScript. Let’s take a look: To use Chrome devTools with React Native first make sure you are connected to the same wifi, then press command + R if you are using macOS, and Ctrl + M, the Dev Menu will show up and chose Debug Js Remotely this will open the default Js debugger for you.

image

Then check this address http://localhost:8081/debugger-ui/ in Chrome, you should see this page:

image

You may have some troubleShouting on Android

image To solve the problem, make sure you are always your machine and the device are connected on the same WIFI, and then add this android:usesCleartextTraffic="true" to android/app/src/main/AndroidManifest.xml if this didn’t work for you please check out these links for other solutions,

After you have successfully connected to chrome, you can simply toggle the chrome inspector.

image

And see the logs of your React Native app, in addition, you can all features the chrome devtools offer us and use it with React Native as you do with any Web app, One of the limitations of Chrome Devtools when you using it with React Native is that you can’t debug the styles and edit the style properties as you usually do when you debug web apps, also it is limited when inspecting React component hierarchy like React devtools offer us.

React Devtools: stand-alone desktop app

To debug React native using React devtools, you need to use the desktop app you can install it globally or locally in your project by just running this following command:

  yarn add react-devtools

Or npm

npm install react-devtools --save

And start the app by runing yarn react-devtools this will launch the app,

image

React devtools may be the the appropriate tool to debug React native and that goes for two reasons:

  • We can debug React Components.
  • debugging React Native style : this is my favorite part of React Devtools because it was hard to debug styles in React Native and the new version comes with this feature that also works with inspector in dev Menu, We always had the problem of writing styles and have to wait for the app to reload to see the changes and this take much time that in another way can use it to work on the other things and now with this features we can debug and implement style properties and see the effect of the change instantly without reloading the app which makes a huge difference.

image

You can check for more instruction for using React Devtools app here.

React Native Debugger

image

If you are using Redux in your React Native app. React Native Debuggeris the right debugger for you, it’s a standalone desktop app that works on macOS, Windows, and Linux, it integrates both redux-devtools and react-devtools on one app so you don’t have to two separated apps for debugging, React Native Debugger is my favorite debugger and the one I usually use in my work with React native, it has an interface for redux-devtools where you can see the redux logs and the actions, and an interface for React-devtools where you can inspect and debug React elements. you can find the instruction for installation here. you can connect with this debugger the same as you use with Google Chrome, Using React Native Debugger over chrome devTools has some advantages, for example you can use toggle inspector from the Dev Menu to inspect react-native elements and edit styles which is not available in Chrome devtools

React Native CLI

You can use React Native CLI to do some debugging as well, you can use it for showing the logs of the app, Hit react-native log-android this will show you the logs of db logcat on android, and see the logs of ios you can run react-native log-ios,and with console.log you can dispatch logs to the terminal,

console.log("some error🛑")

You should see the logs in the Terminal,

image

You can use React Native CLI to get some relevant info about the libraries and the dependencies you are using in your app you can run react-native info on the terminal to do that, it show us some useful info about the tools we are using for example here is an example of an output when you run react-native info,

image You can use this info to debug some bugs that may be caused because of mismatch of versions of a tool you are using in your project, so it is always good to check the environment info using this command line,

Summary

There are a lot of tools not limited the those above you still can use to debug React Native, it just depend on which tool is the right for you and your project, or you may use them all for me in person I use mostly React Native Debugger Desktop because I work most with Redux and it combine multiples tools in one app which is great and a time saving 😉. Please hit me on 🐦Twitter if you linke to disscuss more about tools to debug React Native and about React Native in general.

Thanks for you time🙏🏼