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.

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.

I have added

Related Tags:

 expo debug webview, debug android webview javascript, react native webview, react-native webview permissions, react-native-webview ios issue, react-native webview navigation bar, react native debugger, react-native-webview – npm, react native webview inject javascript, react native webview webcontentsdebuggingenabled, inspect webview react native ios, how to debug webview in ios, how to debug expo app, react-native-webview incognito