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.
In recent Chrome versions, you can simply enable Debug mode in the React Native app, then navigate to chrome://inspect/#devices . In the Devices tab, find the entry "WebView in ....." that corresponds to your application, and click "Inspect" to view the debugger.
WebViews offer developers opportunities to render any web components in a React Native application. A web component can be anything from a whole webpage/application or just a simple HTML file. The package react-native-webview makes it super simple to embed WebViews into your React Native apps!
Create a function called webviewRef and attach it to the WebView component. Next, create a function called sendDataToWebView and add the code below to it. Inside the “script” tag, use window. addEventListener to listen to the event from the React Native app.
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.
For more on react-native-webview debugging guide head on to Debugging Guide Docs
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With