💵 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.
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 …
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 😉
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!
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
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.
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.
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).
