debug-webviews.mo

Owner: Louis Zawadzki​
Prerequisites
A React Native application with a WebView
Safari if you want to debug on an iOS device
Steps iOS (~2min)
Run your app on your iOS simulator
Open Safari
Enable the "Develop" menu:
Pull down the "Safari" menu and choose "Preferences"
Click on the "Advanced" tab
Check the box next to "Show Develop menu in menu bar"
Pull down the "Develop" menu
Click on "Simulator" that should be right below your computer
Select your WebView in the menu  
Steps Android (~3min)
In your android/app/src/main/java/com/applilabchatbot/MainApplication.java add import android.webkit.WebView; in the imports and the following line in your onCreate method:
@Override
public void onCreate() {
  super.onCreate();
  SoLoader.init(this, /* native exopackage */ false);
+ WebView.setWebContentsDebuggingEnabled(true);
}
Launch your app
Open Chrome
Go to chrome://inspect​
Select your WebView under your device name
Common WebViews pitfalls
To inject Javascript you have to set your WebView's javaScriptEnabled prop to true
On Android, you can't use arrow functions in the injected javascript
window.postMessage might not be available straight away in your injected Javascript, to make sure it's the case you can wrap your injected code by a setTimeout like this:
setTimeout(function() {
  /* your injected js goes here */
}, 0)

debug-native-android.mo

firebase

Last modified 5yr ago

debug-webviews.mo

Owner: Louis Zawadzki​

Prerequisites

Steps iOS (~2min)

Steps Android (~3min)

Common WebViews pitfalls

Owner: Louis Zawadzki