Debugging WebView in React Native apps –

Development issue/problem:

I have a React Native application that uses WebView to display an HTML page from sources. There is a javascript on the page that does some processing. The problem is that I can’t see the console.log statements in the web view. I tried to debug WebViews remotely using Chrome Remote.

This is what the code looks like. Note that for Android, I try to provide native accessories to enable debugging.

import Reaction from react ; import
Import Expo from Expo ; import
Import { WebView } from react-native ;

Exporting the default application class extends React.Component {

render() {
const htmlURL = Expo.Asset.fromModule(require(‘./assets/index.html’)).uri;
return (

);
}
}

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

Any ideas on how this might work would be greatly appreciated.

How can I solve this problem?

Solution 1:

The easiest way to test WebView in React Native is to use the external JS debugger. This has the added benefit of running on iOS or Android, as you only need to debug the JavaScript running on your application.

To view WebViews, you’ll need to go further and use remote Chrome devices.

DevTools Chrome

If you click OK next to the document that corresponds to the index.html you want to debug, you can see all the logs in the console for this WebView.

Enter a description of the image here

I have added

Related Tags:

 expo debug webviewdebug android webview javascriptreact native webviewreact-native webview permissionsreact-native-webview ios issuereact-native webview navigation barreact native debuggerreact-native-webview – npmreact native webview inject javascriptreact native webview webcontentsdebuggingenabledinspect webview react native ioshow to debug webview in ioshow to debug expo appreact-native-webview incognito

Leave a comment

Your email address will not be published. Required fields are marked *