React Native WebView debugging

React-native WebView provides a WebView component that renders web content in a react-native app. Therefore we need to examine how to debug a react-native application that uses WebView.

Prerequisites

• A React Native application with a WebView
• Safari browser to debug WebView in IOS devices
• Chrome browser to debug WebView in Android devices

Android Platform

We can debug the WebView content int the Andriod devices or emulator using the Chrome Devtools.

We need to make the following change to MainApplication.java file to enabled WebView contents debugging in andriod

 import android.webkit.WebView;

  @Override
  public void onCreate() {
    super.onCreate();
      ...
    WebView.setWebContentsDebuggingEnabled(true);
  }

• Now restart the android app and enable the debug using command + M key
• Open Chrome browser and http://localhost:8081/debugger-ui/

Note:

while debugging on Andriod devices or emulator you must enable USB debugging in your device settings:

Settings -> System -> About Phone -> Developer options -> enable USB debugging

iOS Platform

WebView debug is possible in the iOS simulator or on a device using Safari Developer Toolkit.

• Run the app on an ios device or simulator, In this article we are using a simulator for the debugging.
• Open Safari Preferences -> "Advanced" tab -> enable checkbox "Show Develop menu in menu bar"
• Safari -> Develop -> [device name] -> [app name] -> [url - title]