If you’re like me, when you saw how easy debugging React Native applications was, you were mind-blown. Setting breakpoints in Google Chrome to control your iOS device seemed like magic and sorcery.

But if you’re like me, you also distrust magic in programming. Magic must be understood so that it turns into engineering fact & competence. This article attempts to demystify React Native Debugging so that you understand the technical details behind it.

tl;dr

Here’s the jist

A NodeJS server, called Packager, is started up in a terminal.

Google Chrome opens up and loads your React Native JavaScript from Packager as a normal <script> tag. Note that the React Native application now sits in the browser with full debugging support.

The device communicates with the application running in the browser via WebSockets proxied through Packager. JSON commands are set back and forth between the device and the browser, with the browser instructing the device as to what it should do.

That’s it. If you understand it all now, then you’re done!

The Deep Dive

If you’ve continued on, then you’re more interested in learning the exact processes, files and operations that allow for debugging.

Note: React Native is rapidly changing. This article references React Native 0.11.2

Let's start out deep dive by introducing the actors at play