React Native 0.62 and Flipper

In this post Andréas Hanss gives us a tour on Flipper.

Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface.

To add flipper support to your React Native project, I recommend the “Add Flipper Support” section from the Upgrade to React Native 0.62 guide.

Flipper – Extensible mobile app debugger →
React Native 0.62 and Flipper Will Change Your Mobile Development Experience and make it easier! →

💵 This linked article is stuck behind Medium’s metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium’s ridiculous reading limit.

React Native Snoopy, a profiling tool for React Native

The React Native bridge is the hub where communication between the Javascript and the Native world happen. Optimizing and catching unexpected (bad) communications can make or break your performance. Being that central and sensitive place, it made sense to have tooling built around it.

Snoopy is a profiling tool for React Native, that lets you snoop on the React Native Bridge using the MessageQueue spy feature. With Snoopy you can tame a stream of events, using Rx and a few built-in goodies, to locate performance hogs, problems, and expose unexpected communications on the bridge.

// Snoopy
import Snoopy from 'rn-snoopy';
import filter from 'rn-snoopy/stream/filter';

import EventEmitter from 'react-native/Libraries/vendor/emitter/EventEmitter';

if (__DEV__) {
    const emitter = new EventEmitter();
    const events = Snoopy.stream(emitter);

    // Show calls to createView. Filter based on method, and provide a shape to match it.
    filter({ method: 'createView' }, true)(events).subscribe();
}

Next to watching all messages you filter them on type (as shown above), create charts with bars, etc.

Debug messages can be seen fly by using React Native Debugger or adb logcat | grep ReactNative or …

React Native Snoopy →
Debugging React Native Performance: Snoopy and the MessageQueue →

Launch a React Native app with “Debug JS Remotely” enabled by default

I had a bug in a React Native app which only occurred on the very first launch of the app, right after install. The bug was situated in a complex Redux Saga which bootstraps the application and populates the Redux store with things like an (anonymous) API token, (remote) config settings, etc.

The bug didn’t occur upon a second run of the app, as a REHYDRATE action then populated (parts of) the store with correct data, and the saga would eventually make it through.

To debug this issue I wanted to check out the Redux actions which got dispatched. Hitting CMD+D to open the developer menu and then selecting “Debug JS Remotely” unfortunately didn’t help me that much, as an app automatically refreshes when selecting “Debug JS Remotely”, thus triggering a second run.

~

With the bug only occurring at the very first launch, I looked for ways to launch my React Native app with “Debug JS Remotely” activated by default. Using several Google Search Coupons yielded no immediate result.

Note: later on it occurred to me that I could’ve “just” purged the store upon launch to debug this differently, yet I was looking in an other direction at the time 😉

Eventually I found a small note in the documentation section of React Native Debugger.

For enable Debug Remotely in real device, you may fatigued to shake device to show developer menu, you can use the built-in DevSettings native module on iOS.

In code:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

To get this working on Android you’ll need react-native-devsettings-android, which – awaiting a merged PR in the React Native core – provides Android with NativeModules.DevSettings.

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

~

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Spark Inspector – Runtime Inspection for iOS Apps

Spark-Inspector-Screen

Spark Inspector will offer you an entirely new debugging perspective. With a three-dimensional view of your app’s interface and the ability to change view properties at runtime, Spark can help you craft the best apps on earth. Wiring your app together with notifications? Spark’s notification monitor shows you each NSNotification as it’s sent, complete with a stack trace, a list of recipients and invoked methods, and more. Understand app structure at a glance and debug smarter. That’s Spark.

I’ve been told this is exactly what you need if you’re into native iOS development

Spark Inspector →

Sublime Web Inspector — Debug JavaScript in SublimeText

  • Set and remove breakpoints right in SublimeText
  • See all console messages with level
  • See object properties
  • See a stack and all variables (local, global, closure)
  • Evaluate selection on current call frame
  • Live reload

Sublime Web Inspector →

Firefox CSS live editing via SublimeText

A lot of editors are scriptable in Python. And Firefox has remote capabilities. So we are building a python library that can be used by editors to interact with Firefox (desktop or mobile). We could for example add JS breakpoints from Vim, or edit the code of the current page from SublimeText.

Note that the page isn’t being reloaded but the changes are being transferred via the Dev Tools Protocol to Firefox which updates the CSS as if you’d change it via Firebug/the Dev Tools themselves.

FldgNq0

Firefox CSS live editing, and a truckload of other new features — such a built-in jsfiddle/jsbin — are being planned for the next iteration of the Firefox Dev Tools.

Coding in the browser & controlling the browser from editors/IDEs →

Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Google Web Toolkit: Speed Tracer →