Debugging in React Native

Debugging in React Native

React Native provides some methods to help you debug your code. App developer menu You can open the developer menu in the IOS simulator by pressing Command + D. On the Android emulator, you need to press Command + M.

  • Reload-Used to reload the simulator. You can use shortcut + R
  • Debugging JS Remotely-Used to enable debugging in the browser developer console.
  • Enable Live Reload-Used to enable live reload when the code is saved. The debugger opens on localhost: 8081 / debuggerui.
  • Launch Systrace-Used to launch marker-based Android profiling tools.
  • View Inspector-Used to open the Inspector, where you can find information about the component. You can use shortcut + I
  • View Performance Monitor-Performance Monitor is used to tracking the performance of your app.

Access to the in-app developer menu

You can access the developer menu by shaking the device or selecting Shake Gesture from the iOS Simulator Hardware menu. You can also use the keyboard shortcut ⌘D if the app is running in the iOS simulator, ⌘M if it is running in the Android emulator on Mac OS, and Ctrl + M if it is running on Windows and Linux. Alternatively, for Android, you can run the adb shell input keyevent 82 commands to open the development menu (82 is the menu key code).

Enable fast Refresh

Fast refresh is a feature of React Native that gives you almost instant feedback on changes to React components. When debugging, it is helpful to enable quick updates. Fast refresh is enabled by default, and you can toggle "Enable fast refresh" in the React Native developer menu. Most changes will be visible within 1-2 seconds when this option is enabled.