javascript - 在 React Native 应用程序中调试 WebView

Question

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

代码如下所示。请注意，对于 Android，我正在尝试提供一些原生 Prop 来启用调试。

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

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

Answer 1

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

为了查看 WebView，您需要更进一步并使用 Chrome's Remote Devices .

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

我添加了 <script> index.html内部在 <header>这只是执行以下操作:

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

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

有关 react-native-webview 调试指南的更多信息，请访问 Debugging Guide Docs