[My Notes] Enabling the React Native Inspector (via Nuclide) Today

My latest clean RN setup:

Node v6.5.0 (I use n to toggle my node versions)

NPM v3.10.3

RN 0.33.0

Xcode 8

I followed these general Nuclide setup instructions and these post installation steps. I ignored installing Buck, Hack, and Mercurial.

I followed the Nuclide + RN docs. Keep in mind this gotcha before you can Cmd + D to show the debug menu. Also, “Debug in Chrome” is now “Debug JS Remotely”, which is a known issue.

There’s a scary ref error when you first make the server-to-simulator connection. Current solution is to downgrade Node, I carried on since I can live with it for now because of how cool the inspector is, and I actually haven’t seen the error since…

End results!!:

In Nuclide:

In the simulator!!:

Happy (web-like) debugging everyone!

P.S. If you “Enable Live Reload” after pressing Cmd + D, you can leave the simulator running, edit the file in your editor of choice, and the simulator should refresh after each save.


The above steps are almost exactly the same when inspecting on Android!:

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.