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)
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.
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.
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:
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:
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:
Source: Reactotron documentation
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
According to the official React Native documentation, you can easily log reports for both platforms:
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:
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.
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!
We highly recommend to check out our other articles. If you are looking for a career opportunity, feel free to browse our job offers. Do you want to have your digital project estimated? Just click on a button below.Estimate project Browse job offers
We are software developement house located in the hearth of Europe - Warsaw, Poland. Our main areas of expertise include Ruby on Rails, React and React Native.