Debugging WebView in React Native apps

Question

I have a React Native App that uses WebView to render an HTML page from the assets. The page has some javascript that does some processing. The problem is that I cannot see the console.log statements from the web view. I have tried the Chrome Remote Remote Debugging WebViews

Here's how the code looks like. Note that for Android, I am trying to supply some native props to enable debugging.

import React from 'react';
import Expo from 'expo';
import { WebView } from 'react-native';

export default class App extends React.Component {

  render() {
    const htmlURL = Expo.Asset.fromModule(require('./assets/index.html')).uri;
    return (
      <WebView nativeConfig={{props: {webContentsDebuggingEnabled: true}}}  
      source={{uri: htmlURL}} />
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Any ideas around how that might work will be highly appreciated.

Answer 1

The easiest way to inspect your WebView in React Native is to just use the Remote JS Debugger. This has the added benefit for working in either iOS or Android, since you're simply debugging the JavaScript that is running on your application.

In order to see the WebViews, you'll want to go a step further and use Chrome's Remote Devices.

If you click on Inspect next to your Document matching the index.html you're wanting to debug, you can then see all of the logs in the console for that WebView.

I added a <script> inside of index.html in the <header> that just does the following:

console.log('This is showing in the console!')

You can see in the image above, its logging out in the DevTools that is inspecting that WebView.