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]
Top comments (0)