[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.

*UPDATE*

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.