What went wrong?! Deep dive into debugging RN applications

Restrepo groups mobile app bugs into app-specific, platform-specific, and architecture-related issues. Examples include broken buttons and network problems, differences between iOS and Android behavior, and incorrect data flow that affects unrelated features.

Flipper is a separate desktop app that supports React Native, iOS, and Android debugging. Its plugins can inspect layouts and accessibility properties, shared preferences, network requests, device logs, and crashes. Restrepo says its network tools are clear and capable, while noting that its iPhone version lacked breakpoints and its JavaScript debugger could not connect to Reanimated's JavaScript context.

React Native Debugger covers features such as layout inspection, logs, and network requests, and its Sources tab lets developers set breakpoints, inspect scope, and follow call stacks. Restrepo found it useful for Apollo and GraphQL caching, but says network inspection is less intuitive than Flipper's and debug mode can slow an app. Charles can help when deeper network analysis is needed.

Reactotron requires a desktop app and project setup, and supports more than React Native, including macOS, Windows, and Linux apps. It can inspect requests and state, dispatch actions through its GUI, track global errors and asynchronous storage, and run quick performance benchmarks. Restrepo notes it has fewer features than Flipper and does not support breakpoints.

Restrepo says all three tools can handle many of the same debugging tasks, but she plans to keep at least two available. She may switch from React Native Debugger when it slows the app or use Flipper when its interface suits the task better. Flipper and Reactotron both require setup in the app.