在 React Native 应用程序中调试 WebView

Question

我有一个 React Native 应用程序，它使用 WebView 从资产中呈现 HTML 页面。该页面有一些执行某些处理的 javascript。问题是我无法从 Web 视图中看到 console.log 语句。我试过 Chrome Remote Remote Debugging WebViews

代码如下所示。请注意，对于 Android，我正在尝试提供一些本机道具来启用调试。

 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',
  },
});

任何有关如何运作的想法都将受到高度赞赏。

原文由 Mohsin Shafique 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 React Native 中检查 WebView 的最简单方法是使用 Remote JS Debugger。 这对于在 iOS 或 Android 中工作有额外的好处，因为您只是调试在您的应用程序上运行的 JavaScript。

为了查看 WebView，您需要更进一步并使用 Chrome 的 Remote Devices 。

如果您单击与您要调试的 index.html 匹配的文档旁边的检查，则您可以在控制台中看到该 WebView 的所有日志。

我在 <script> 的 index.html 中添加了一个 <header> 它只是执行以下操作：

console.log('This is showing in the console!')

您可以在上图中看到，它在正在检查该 WebView 的 DevTools 中注销。

有关 react-native-webview 调试指南的更多信息，请 访问调试指南文档

原文由 mootrichard 发布，翻译遵循 CC BY-SA 4.0 许可协议