How To Debug React Native Apps Like A Pro? (Tools And Best Practices)
Jun 24, 20204 min read
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
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.
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:
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:
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 global add react-devtools
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:
It will open a Chrome browser tab with http://localhost:8081/debugger-ui path.
Inside your Chrome browser you should see the following screen:
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.
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
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:
It is based on the official Remote Debugger and provides more functionally.
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 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:
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.
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?