I would like to talk about the recently integrated developer tool for React Native called Flipper. I become a huge fan of this tool and believe it will be a revolution in a way we debug our React Native applications.

Flipper + React Native = ❤️

Before I dive deep into Flipper itself, it’s good to have some overview of tools we use today.

As we all know very well, the selection of developer tools is very “colourful” and offers lot of different approaches to debug.

I tried to compile my selection of tools which I used through out my years working on RN app.

React Native developer tools

My first baby steps debugging React Native were done purely with Remote Debugging option. Which uses Chrome DevTools as a interface to debug/log app. This workflow brings the perfect developer experience I could wish for as a ex web developer.

Remote debugging with Chrome DevTools

Later on I figure out, that it’s not exactly same as normal Chrome DevTools for websites. There is no network log, I can’t use many built in features of devtools and my app becomes slower. I couldn’t inspect my redux state or see React component tree. Well and that kinda sucks, if we came back to the experience I had working on websites.

In my search for a better tool, I came across very similar looking tool React Native Debugger. It’s using Electron with Chrome DevTools, but it has enabled Network tab to log all network request (invoked in JS) and adds React + Redux DevTools on top of that.

React Native Debugger aka React Native Swiss Knife

This would be nice end to my article, how we found a best developer tool. But then my title would be a bit misleading and things doesn’t work that easily in real life or does it?

What is remote debugging?

After some time of using remote debugging, we had to come to a question and ask ourself how does it actually work?

Overall the way remote debugging works is quite simple, we just move execution of our JS code to different engine. The process running the engine is started on our own machine (not inside Simulator or real device).

So instead of using JavascriptCore (which se default RN JS engine), we would run our JS in Chrome (V8). And send all commands from JS <-> Native over web socket connection.

It actually sounds as a pretty cool way to debug. But it has one big pitfall and it’s the environment itself. We are running our JS code in a engine, which will not be used by our end users and that’s a big risk. Soon or later, there will be bug, which we mistakenly shipped to production, without testing the code when remote debugging option is off.

Do note, that currently there is discussion about moving community to “direct debugging”

What is “direct” debugging?

If we wanna stop using remote debugging, we need to basically create web socket connection from within of our React Native app.

Basically on this principle all browser devtools works or even React Devtools, when debugging runtime without direct access.

One of the first examples of this approach is Reactotron. Which creates it’s own web socket connection between app and devtool.

Reactotron

It has a wide variety of tools, which covers most essential use cases. I would say this tool provided overall very pleasant experience. But it lacked some other tools, like React devtools or more advanced network logging.

One idea I need to highlight is the Custom Commands, which allowed to extend Reactotron with predefined UI. So we could exchanged custom commands between our app and Reactotron.

As a last I would like to mention honourable devtool, which is less known, but it’s been here with us since the beginning of React Native.

Safari DevTool (Safari Web Inspector)

It connects to JavascriptCore directly, so we have access to a runtime, so it doesn’t require remote debugging. But it only supports debug JS (source code and profiler) and log values. Network log is not available.

In my experience, if we allow inline source maps to have better profiling information, the entire runtime will slow down drastically, so collected data are not very helpfull.

One of biggest pain points is the fact, that it creates new window each time we reload bundle… So this is pretty much big no to this tool.

Lot’s of Safari Devtool windows…

And this is not definitely all we can use, there is amazing tool Detox Instruments from Wix, and other native tools for iOS/Android.

It’s actulally not that easy to pick the best tool. Each have it’s own limitations. And we didn’t have easy way to contribute to any of those tools. Mostly it involved forking our own version and adding more features in “hacky” way.

So far the experience debugging React Native app looked like juggling across different tools all the time and trying to master them…