Skip to content

Debugging WebView in Mobile

Jump to bottom
Shailesh Baldaniya edited this page Nov 18, 2021 · 2 revisions

In the Released App

Android & Chrome

  1. First you will need to root the emulator. You will need to use an emulator with Google APIs in the AVD Manager. Screenshot 2021-11-18 at 6 40 44 PM
  2. Use rootAVD to root the emulator. Follow all the steps in the README for setup(Download, Preconditions, ADB tools). After that https://github.com/newbit1/rootAVD#linux--macos.
  3. Open chrome://inspect/#devices on Chrome (Reference: Remote debug Android devices)
  4. Start the app with React Native WebView in Android emulator or Android device
  5. Select your device on the left and select "Inspect" on the WebView contents you'd like to inspect
  6. You can now debug the WebView contents just as you would on the web

iOS & Safari

--

In the Debug App(While developing App)(Works without rooted device)

Android & Chrome

It's possible to debug WebView contents in the Android emulator or on a device using Chrome DevTools.

  1. You will need to make the following change to MainApplication.java to enable web contents debugging:
  import android.webkit.WebView;
  @Override
  public void onCreate() {
    super.onCreate();
	  ...
    WebView.setWebContentsDebuggingEnabled(true);
  }
  1. Start the app with React Native WebView in Android emulator or Android device
  2. Open chrome://inspect/#devices on Chrome (Reference: Remote debug Android devices)
  3. Select your device on the left and select "Inspect" on the WebView contents you'd like to inspect
  4. You can now debug the WebView contents just as you would on the web

image

Note:

When debugging on a device you must enable USB debugging in your device settings:

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

iOS & Safari

It's possible to debug WebView contents in the iOS simulator or on a device using Safari Developer Toolkit.

Steps:

  1. Open Safari Preferences -> "Advanced" tab -> enable checkbox "Show Develop menu in menu bar"
  2. Start app with React Native WebView in iOS simulator or iOS device
  3. Safari -> Develop -> [device name] -> [app name] -> [url - title]
  4. You can now debug the WebView contents just as you would on the web
Notes:

When debugging on a device you must enable Web Inspector in your device settings:

Settings -> Safari -> Advanced -> Web Inspector

Also, if you don't see your device in the Develop menu, and you started Safari before you started your simulator, try restarting Safari.

Reference: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md

Clone this wiki locally