Opening the Debug Menu on iOS

Simulator

• cmd + D
• cmd + ctrl + Z
• Hardware > Shake Gesture (in the simulator menu)
  

Physical Device

• Shake your device

Opening the Debug Menu on Android

Simulator

• cmd + m (Genymotion)
• cmd + shift + r via Frappe
• Press the Hardware Menu Button

Physical Device

• Shake your device
• Press the Hardware Menu Button

Debugging on an iOS Device

• Change localhost to your computer’s IP address in AppDelegate.m – the line that looks like jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
• Change localhost to your computer’s IP address in node_modules/react-native/Libraries/WebSocket/RCTWebSocketExecutor.md

Also, for anyone using the React Native Meteor Boilerplate you’ll have to change localhost to computer’s IP address for the ddp config.

Debugging on an Android Device

WARNING: I don’t have an Android device so I haven’t been able to test this myself. I’m pulling these instructions directly from React Native’s documentation. If someone can test this or clarify the steps necessary I (and I’m sure many others) would be very grateful for your assistance.

“If you’re running Android 5.0+ device connected via USB you can use adb command line tool to setup port forwarding from the device to your computer. For that run: adb reverse tcp:8081 tcp:8081 (see this link for help on adb command). Alternatively, you can open dev menu on the device and select Dev Settings, then update Debug server host for device setting to the IP address of your computer.”

Exploring the React Native Debug Menu

Reload

This allows you to reload the Javascript of your app. You can accomplish the same thing by pressing cmd + R.

Enable/Disable Chrome Debugging

This opens up a debugging window in Chrome at localhost:8081/debugger-ui. You can open up the actual console via cmd + option + I. Until React Devtools are fixed (discussed later) the chrome debugger is really only used for access to the console.

Enable/Disable Live Reload

Rather than having to constantly manually reload changes to your app you can set up Live Reload in React Native. This will reload your app’s Javascript any time you save a .js file in your app.

Start/Stop Systrace

This is one I admittedly don’t have any experience with. I believe it is used for profiling Android UI performance based on this section in the docs. If you have a better understanding of this tool please let me know!

Show/Hide Inspector

This allows you to get a similar experience to what you may be used to in web debugging, such as the “Elements” tab in Chrome. You can choose a component in your device and see some of the properties that are assigned to it. You can also access this via the keyboard shortcut cmd + I.

Show Perf Monitor

This tool allows you to monitor the performance of your app through various detailed metrics. If you’re ever wondering why the performance of your app is poor, such as a jittery UI, this tool will be your friend. Here is an article that may help you work through some of your performance issues.

Debugging your Code with Google Chrome

Just like with in the browser you can place debugger; in your code to inspect. Here’s an article from Google that gives an overview of what you can do with the menu when using debugger;

When do you have to rebuild the app?

Whenever native code (Objective C or Java) changes or you’re adding new resources. The React Native packager will listen to changes in your Javascript code and recompile those for your RN app to use but this does NOT apply to native code that you may edit.

Why doesn’t React Devtools work for React Native?

At one point in time React Devtools worked for React Native. Due to various changes this integration is currently, as of 3/1/2016, broken. You can follow along with the issue here: https://github.com/facebook/react-devtools/issues/229.

I hope you found this helpful! If you’ve got any other tips for debugging React Native please let me know (@spencer_carli) so I can update this article with your tip!