48

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.

1
  • Have you tried expo XDE @Mohsin Hijazee Dec 20, 2017 at 22:49

7 Answers 7

36
+250

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.

DevTools Chrome

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.

enter image description here

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

6
  • This is a little clunky, but I’m pretty sure it’s the best solution available in React Native right now. Feb 10, 2018 at 1:18
  • 1
    as you mention, how can I set Chrome's Remote Devices config? where should I put that code? can you plz share your code.i stuck since 2 days.
    – zulqarnain
    Jan 29, 2019 at 13:15
  • 5
    The link you gave says one must enable WebView debugging by calling the static method setWebContentsDebuggingEnabled. You can't do that without ejecting expo, can you? So there is no way for an expo project to debug webview without ejecting?
    – Betty
    Jun 28, 2019 at 9:30
  • 3
    It has been deprecated. Jul 20, 2020 at 16:30
  • I can't find "Remote Devices" in the list. Can someone confirm this still works for iOS? The chrome doc specifies Android.
    – Chen W
    Nov 11, 2022 at 19:14
20

Not sure if it's relevant for your case, but if you're also developing for iOS there's a pretty easy way to do it on a Mac + iOS simulator (or a real device). At the end, a React Native WebView creates a native web-view (UIWebView on iOS, and a WebView on Android), so any debugging method which works for web apps applies here as well.

  1. On your iOS simulator (or device): Open the settings app -> Safari -> Advanced -> Turn Web inspector ON.
  2. Open Safari on your Mac and enable developer mode in: Preferences -> Advanced -> Show developer menu in menu bar (checkbox at the bottom).
  3. In Safari on your mac you will now have the "Develop" menu. Open it and find the Simulator or your connected device. When you hover this menu item you will see the currently loaded page. This works for any page loaded on the device, whether it's shown in a WebView inside your app or on the system browser.
  4. Once you select the page, you can use the Safari Web Inspector to pretty much do anything: view all loaded resources, network requests, highlight elements, console logs, debug the JS code and more.
8
  • 3
    Thanks, this is a helpful tip but wouldn’t work for my purposes since I needed to debug at initialization time and couldn’t click the web view fast enough :) Feb 10, 2018 at 1:16
  • 1
    @AaronBrager you can hit the reload button in mac safari and you'll see the init logs
    – olessia
    Jun 18, 2018 at 8:42
  • I tried this, and it worked for web pages opened in Safari, but did not work for pages in WebView.
    – Betty
    Jun 12, 2019 at 9:42
  • Edit: the above comment is about pages opened in a real device. If in the Simulator, both Safari and WebView can work. I upvoted you. :)
    – Betty
    Jun 12, 2019 at 10:36
  • 2
    I can't seem to find "Turn Web inspector ON" in Safari's Advanced options. iPhone 12, iOS 14.5.
    – Chen W
    Nov 11, 2022 at 19:17
6

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.

enter image description here

1
  • 2
    Really interesting but doesnn't seem to work with Expo. Hope somebody else has more luck.
    – Slbox
    Apr 7, 2021 at 0:21
4

I propose to unify javascript's console messages (console.log) and logcat of Android into one logcat which can be viewed with [Monitor].(https://developer.android.com/studio/profile/am-basics.html). It can be helpful to have console messages and WebView messages in one place, especially when you have race conditions/timing problems, so you can see the order of events. Monitor also allows you to apply filters, to select which messages you see. iOS users can also fond this helpful.

Here is an example: enter image description here See CustomWebViewManager and CustomWebView in React Native for some background on how to customize WebView in React Native (a JavaScript library for building user interfaces. "It is maintained by Facebook, Instagram and a community of individual developers and corporations" wiki ).

Info: WebChromeClient lets you handle Javascript's console.log("message")
{via onConsoleMessage(ConsoleMessage cm)}, alert() and other functions.

Catching JavaScript's console messages:

//find or get your React Native webView or create a CustomWebView
WebView webView = (WebView) this.findViewById(R.id.webView1);

//by setting a WebClient to catch javascript's console messages:
// and relay them to logcat (view in monitor) or do what you want with them
WebChromeClient webChromeClient = new WebChromeClient() {
        public boolean onConsoleMessage(ConsoleMessage cm) {
            Log.d(TAG, cm.message() + " -- From line "
                    + cm.lineNumber() + " of "
                    + cm.sourceId() );
            return true;
        }
    });

webView.setWebChromeClient(webChromeClient);

The problem with cross platform support is the Virtual Machine and the associated Sandbox. I think react-native tries to be very pure JavaScript (but fails, JavaScript as a language is pure, the implementations never are, always about compromise). My personal preference for cross platform support is Cordova.

1

You can make use of window.postMessage from inside your WebView and the onMessage prop of the WebView component:

In your html:

...
window.postMessage(stringMessage, '*');
...

In your react native component:

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

export default class App extends React.Component {
  handleMessage = (event) => {
     console.log(event.nativeEvent.data);
  }
  render() {
    const htmlURL = Expo.Asset.fromModule(require('./assets/index.html')).uri;
    return (
      <WebView nativeConfig={{props: {webContentsDebuggingEnabled: true}}}  
      source={{uri: htmlURL}}
      onMessage={this.handleMessage}
      />
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
1
  • What about runtime errors? Any chance to see them? I mean, maybe a try/catch would do, but I wonder if there's an alternative way to access the error stream.
    – mayid
    Jan 3, 2020 at 17:53
0

For someone trying to do this on mac for ios simulator or connected device: => Use safari technology preview->Develop->Simulator-> nativeapp

both jsContext and Webview will be visible to open for debugging + console. This provides all typical debugger features.

Bonus: you can even use window for jscontext to trouble shoot react native classes etc. for example in your app class add "window.app = this;" then you can access your app class object through console.

0

Just wanted to add that the official react-native-webview library has a section on Debugging that you might find helpful!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.