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:
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
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:
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.
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
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.
-
- it includes Redux DevTools, made the same API with redux-devtools-extension.
*Note: If you are using React >= 0.62 you should use React Native Debugger v.0.11
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.
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.
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!
