react-native-webview-debug

Bridge console.log, console.warn, console.error, and console.info from a React Native WebView to your Metro console.

Installation

npm install react-native-webview-debug

Peer dependencies: react and react-native.

Usage

import { WebView } from 'react-native-webview';
import { useWebviewDebug } from 'react-native-webview-debug';

function App() {
  const { injectedJavaScriptBeforeContentLoaded, onMessage } = useWebviewDebug();

  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      injectedJavaScriptBeforeContentLoaded={injectedJavaScriptBeforeContentLoaded}
      onMessage={onMessage}
    />
  );
}

Any console.log(...) call inside the WebView will now appear in your Metro terminal prefixed with [WebView].

API

useWebviewDebug(options?)

Option	Type	Default	Description
enabled	boolean	__DEV__	Force enable or disable the console bridge.

Returns:

Property	Type	Description
injectedJavaScriptBeforeContentLoaded	string | undefined	Script to pass to the WebView prop of the same name.
onMessage	(event) => void	Handler to pass to the WebView onMessage prop.

How it works

The hook injects a small script that overrides console.log, console.info, console.warn, and console.error in the WebView. Each call is forwarded to React Native via postMessage, where the onMessage handler logs it to the Metro console with the appropriate log level.

The bridge is disabled by default in production builds (__DEV__ === false).

License

MIT