Debugging React Native

Why React Native?

• You can use JavaScript and React
• You can build native mobile apps
• You have Hot Reaload for a greater developer experience

Standard Debugging Tools

Inspector

Shows component hierarchy, font styles, dimensions, paddings and margins.

Chrome Developer Tools

1. Open in-app developer menu: shake gesture or Command⌘+D in the iPhone simulator or Command⌘+M in an Android emulator
2. Enable Hot Reloading for faster development cycles
3. Debug JSRemotely
4. The debugger page opens in your browser at http://localhost:8081/debugger-ui
5. Your app’s JavaScript code runs on this page making you able to set breakpoints

React Native app architecture (http://www.ibm.com/developerworks/library/mo-bluemix-react-native-ios8/)

Inspect Logs

react-native log-ios
react-native log-android

It is currently not possible to use the “React” tab in the Chrome Developer Tools to inspect app widgets. — Facebook

Other Tools

React Native Debugger

Includes React DevTools and Redux DevTools which is not in the standard debugging toolset.

• Inspect components, props, states and styles
• Play with styles and states
• Inspect, import and export Redux actions

https://github.com/jhen0409/react-native-debugger

An IDE to the Rescue

If you want to keep all the tools required for React Native app development in one place it is recommended to give Nuclide a try.

This Atom based IDE has all the tools shown before — integrated in one environment:

• Packager
• Debugger
• Build tools
• Logging

And ships with many other useful Atom packages.

Nuclide synchronizes breakpoints with the embedded Chrome Developer Tools