Debugging methods for React Native Applications

In order to develop any application and ensure that it works properly in each and every condition, debugging is a requirement. To debug React Native applications you can use these methods.

Accessing In-app Developer Menu:

You can get to the developer menu by shaking your device or by going to the hardware menu in the iOS simulator and selecting “Shake Gesture.” On Mac OS, use the ⌘D keyboard shortcut if your app is running in the iOS simulator; otherwise, use ⌘M if your app is running in an Android emulator.
Ctrl+M on Windows and Linux can be used to open the menu.
For Android, you can also use the command adb shell input keyevent 82 to access the dev menu (82 being the menu key code).

Enable Fast Refresh:

Fast Refresh is a React Native functionality that allows you to obtain near-instant feedback for changes to your React components. Fast Refresh is enabled by default, but you can turn it off in the developer menu by toggling “Enable Fast Refresh.” Most edits should be visible within a second or two if Fast Refresh is turned on.

LogBox

In development builds, errors and warnings are displayed in LogBox within your app.

Console Errors and Warnings:

Console errors and warnings are displayed on-screen as notifications with a red or yellow badge and the number of errors or warnings in the console. To view a console error or warning, tap the notification to see full-screen information about the log and to paginate through all of the console’s logs.

LogBox.ignoreAllLogs() can be used to hide these notifications. This is helpful when giving product demonstrations, for example. Notifications can also be hidden on a per-log basis using LogBox.ignoreLogs(). This is useful when a loud warning cannot be fixed, such as those in a third-party dependency.

Ignore logs should be your last option. It is implemented as follows:

1
2
3
4
5
6
7
8
9
import {
  LogBox
} from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

Unhandled Error:

Unhandled JavaScript errors will cause a full-screen LogBox error to appear, displaying the source of the error. These errors can be dismissed or minimized to allow you to observe the current state of your app as they occur, but they should always be resolved.

Syntax Errors:

When a syntax error occurs, a full-screen LogBox error with the stack trace and location of the syntax problem will immediately appear. This error can’t be ignored because it indicates a problem with your JavaScript execution, which must be rectified before you can continue working on your project. Fix the syntax error and save (with Fast Refresh activated) or cmd+r to reload to dismiss these errors (with Fast Refresh disabled).

Chrome Developer Tools

Open the developer menu in Chrome and select “Debug JS Remotely” to debug JavaScript code. This will open http://localhost:8081/debugger-ui in a new tab.

Go to the Chrome menu and select tools -> developer tools. You can also use keyboard shortcuts (I on macOS, Ctrl Shift I on Windows) to get to the DevTools. For a better debugging experience, you might want to enable Pause On Caught Exceptions.

Safari Developer Tools

You don’t need to enable “Debug JS Remotely” to debug your iOS app using Safari.

• In Safari, turn on the develop menu: advanced preferences, choose “Show Develop menu in menu bar” from the drop-down menu.

• JSContext for your app: Develop Simulator JSContext

• Safari’s Web Inspector, which includes a console and a debugger, should launch.

While sourcemaps are not enabled by default, you can enable them by following this guide, and then establish break points in the correct places in the source code.
A new JSContext is created every time the app is reloaded (using live reload or manual reloading). You can avoid manually selecting the newest JSContext by selecting “Automatically Show Web Inspectors for JSContexts.”

React Developer Tools

To debug the React component hierarchy, you can utilize the stand-alone version of React Developer Tools.
You need to install the react-devtools package globally to use it.

npm install -g react-devtools

To launch the standalone DevTools app, run react-devtools from the terminal:

react-devtools

It should connect to your simulator within a few seconds.