Looking for top React Native talents? They are just a few clicks away.

How To Debug React Native Apps Like A Pro? (Tools And Best Practices)

Jun 244 min read

Vitalii Danylov

Senior Frontend Developer at Ideamotive.

 

To err is human.

 

It also (or rather: especially...) applies to software developers.

 

That’s why one of the most important things in every dev’s career is to know how to handle these mistakes. As a React Native developer, I always want to write code without any bugs and errors, but when something goes wrong I need to be sure that I am able to track and solve the problem.

 

In this article, I want to discuss some tools and techniques that I use on a daily basis for mobile application development. I hope you will find something useful here for your projects

 

(Side note: as a code editor I’m using VScode)

Linting, type checking, and formatting

As a developer, I always want to concentrate my attention on the implementation of business logic, code patterns, and best practices. Not necessarily on typing, formatting code, and navigation through all the files tree searching what arguments I can pass to just imported functions. To simplify such a procedure we can delegate all the automation stuff to our code editor and programming language. I myself am using the VScode, but there are plenty of great options on the market, like Sublime Text, Atom or Eclipse.

Type checking

To do that I use: TypeScript (TS) or Flow for typing. The main difference between these two is that first is a programming language and the Flow is a type checker. In my opinion, TS is winning here, due to the bunch of cool features like auto imports, self-documentation and the possibility to use next-gen features of JavaScript.

Linting

Linting is a process of execution of the program for analysis of the potential syntax program errors. The most famous linting plugins for JavaScript are:

  • ESLint – a JavaScript syntax checker and formatting tool.
  • Google's Closure Compiler – a JavaScript optimizer that rewrites code to be faster and more concise and checks the use of native JavaScript functions.
  • JSHint – a community-driven fork of JSLint.
  • JSLint – a JavaScript syntax checker and validator.

I personally use ESLint which is now an official plugin for TypeScript linting.

Formatting the code

Programmers spend most of their time reading the code, so the main point is not to READ code fast but UNDERSTAND it fast.

 

In order to do that, we need the most efficient visual representation of it. That’s why we need to format it well.

 

Just compare the next code snippets:

null
null

 

Boom! Now we can see exactly what we should see.

 

To format your code I recommend using Prettier - it’s easy to integrate and configure. You can also configure your linter to use it for formatting.

How to debug in React Native?

Now for the cool stuff - debugging.

 

Let’s start with some tools. React Native has a developer-friendly environment and will tell us if we doing something wrong with warnings or with errors:

nullnull

 

Inbuilt debug mode

Firstly, you can debug your application with the in-built debug mode of the browser such as Chrome or Safari.

 

To use it in Chrome, you need to install `react-devtools` to support ReactNative:

 

# Yarn

yarn global add react-devtools

# NPM

npm install -g react-devtools

 

In development mode, you can open developer menu and start debugging your app from there. Just activate the “debug” option:

FH1LUlsNwqz5dhrtogDmkuy3oGTv0ScSZyU7N-vpdoLaOGmTpethjh_6Odl3eKFHpXCeNylClbW5Bcnomw88tDrf50V1t1vyVNqZvsI4eanYGCtF-mShEkh0LSP_b0kvQ3oWPYEW

It will open a Chrome browser tab with http://localhost:8081/debugger-ui path.

 

Inside your Chrome browser you should see the following screen:

1BUSAvKZnTS8wo5HzDpt4ECBBcjhontDumtxDiI39nEKhII9JXGNZeLi1HFrqVogYsrdr_mkwx6gOTssiFHV2R3JDIdtTTlkKkOs9dkEbnrJcMv_p9BAi-vygvgZaKOGBr4z4jvi

You can also debug an iOS version of your app in Safari without having to enable "Debug JS Remotely".

 

How to do that? In Safari browser just open:

Preferences → Advanced → Select "Show Develop menu in menu bar"

and select your app's JSContext:

Develop → Simulator → JSContext

 

Safari's Web Inspector should open and it should show you a Console and a Debugger. Every time the app is reloaded (using live reload/ fast refresh, or by reloading manually), a new JSContext will be created. Just choose "Automatically Show Web Inspectors for JSContexts" to avoid a selection of the latest JSContext manually.

 

Reactotron

 

If you are used to using Redux for state management of React Native or ReactJS, a great tool to debug the state is Reactotron. This instrument allows you to be sure about all your actions and much more. It allows you to:

  • view your application state
  • show API requests and responses
  • perform quick performance benchmarks
  • subscribe to parts of your application state
  • display messages similar to console.log
  • track global errors with source-mapped stack traces including saga stack traces!
  • dispatch actions like a government-run mind control experiment
  • hot swap your app's state using Redux or mobx-state-tree
  • track your sagas
  • show image overlay in React Native
  • track your Async Storage in React Native

Source: Reactotron documentation

shX5Lzuyg0mL3V1FDmLDl3vgyb3qkUmxzdkAzFaGsKqdmtIOjAN72OQj5y5my6Sc20XNbRaJLlEz4i8rflE_Z046TBupF6F8lUqa6SEnnL9GndYd5yp_OI1du_KB2jgJYWlCeQf2

React Native Debugger

 

React Native Debugger is a `react-devtools` on steroids. This is a desktop app with a lot of features to debug your app. As for the most important pros that should be mentioned:

*Note: If you are using React >= 0.62 you should use React Native Debugger v.0.11

PLam4Mi4K2lKx4Cyqdc3IyMyZK1r1EdY_sxxT9SUhLeq-27ZtyeUUV_--Y9BPuR5ZYR86uxsW7GZybLsBOd6dZob03EMzl7qFxnzGB53LZr66Pe2KYyIkd-BvLDd_Na0iKk9xf-e

 

Native Logs

 

According to the official React Native documentation, you can easily log reports for both platforms:

$ npx react-native log-ios
$ npx react-native log-android

 

If you need to go deeper, you can use platform-specific IDE like XCode or Android Studio to analyze the native code of the app and fix the problem.

 

Flipper

 

Flipper is a next-gen platform for debugging iOS, Android and React Native applications.

It’s a desktop app, which gives you the flexibility to inspect, visualize and control your app development debugging. The cool feature here is that you can update functionality of Flipper by the means of extensions, like:

 

https://github.com/jk-gan/redux-flipper

https://github.com/blankapp/flipper-plugin-reduxinspector

 

if you want to integrate Redux logging support.

JOk2sxyaWW71hcbp4Zt4deDFxXvhUtDQgmFuXfZnI4Go05gxygPybvmyeaLLBCmSlOsjER5zB1exZ2oIdeQ7fmCJI6p6deJ_H795kcn9Jp19EOtqXzB2LYnlm1pY_FCq4T1Oxg8B

 

Flipper supports all of the previous features of React Native Debugger, but it also adds much, much more. Check out the official documentation to make sure and maybe create your own plugin and support the community.

 

null

Summary

These are all the tools that I use on a daily basis or used in the past. I tested a lot of them and I am pretty sure that every pick from the above will help you debugging your React Native apps faster and with better results.

 

But, of course, there are always other options on the market.

What tools do YOU use in your everyday app development work?

Connect with me on Linkedin and let me know!

 

Vitalii Danylov

Vitalii is an veteran frontend developer and mobile developer (with the special <3 for React Native) who likes to explore new technologies, test new tools and discover new approaches.

View all author posts

Take your business to the hypergrowth phase.

Work with React Native experts from Ideamotive's talent network.