React Native WebView 中的 Javascript console.log()答案

【问题标题】：Javascript console.log() in a React Native WebViewReact Native WebView 中的 Javascript console.log()
【发布时间】：2019-05-02 19:10:02
【问题描述】：

我的 React Native 应用程序中有一个 WebView，我需要显示在我的 React Native 应用程序内的 WebView 中执行的 Javascript 的日志。

我认为我需要使用 WebView 的 nativeConfig 道具来实现这一点，但我不知道如何使它工作。

这是我最近的尝试：

 <WebView
    nativeConfig={{
      props: {
        webContentsDebuggingEnabled: true,
        console: new MyLogger()
      }
    }}
   ...

class MyLogger {
  log = message => {
    console.log(message); // Print in RN logs for now...
  };   
}

任何帮助将不胜感激。

【问题讨论】：

我认为这基本上是这篇文章stackoverflow.com/questions/47711418/…的复制品。看看，那里有一些很好的答案。对我来说最简单的方法是使用 Safari 开发工具在模拟器中运行时调试 WebView。
@needleep 感谢您的评论，但我想要 React Native 应用程序中的日志，以便我可以在移动应用程序本身中将它们显示给用户。远程调试不是我想要做的。
抱歉没有意识到:)。那么你是对的，postMessage 是要走的路。

标签： react-native

【解决方案1】：

好吧，我终于明白了。我只需要向 WebView 注入一些代码，并让它使用我自己的控制台版本。

const debugging = `
     // Debug
     console = new Object();
     console.log = function(log) {
       window.webViewBridge.send("console", log);
     };
     console.debug = console.log;
     console.info = console.log;
     console.warn = console.log;
     console.error = console.log;
     `;


<WebView
  injectedJavaScript={debugging}
  onMessage={this.onMessage}

然后我在 onMessage 函数中获取控制台日志。

【讨论】：

只是为了更新这个答案：使用react-native-webview，您可以将window.webViewBridge.send("console", log); 替换为window.ReactNativeWebView.postMessage(log)

【解决方案2】：

如果您使用的是 Webview v5 或更高版本，则可以使用类似以下的内容：

const debugging = `
  const consoleLog = (type, log) => window.ReactNativeWebView.postMessage(JSON.stringify({'type': 'Console', 'data': {'type': type, 'log': log}}));
  console = {
      log: (log) => consoleLog('log', log),
      debug: (log) => consoleLog('debug', log),
      info: (log) => consoleLog('info', log),
      warn: (log) => consoleLog('warn', log),
      error: (log) => consoleLog('error', log),
    };
`;

const onMessage = (payload) => {
  let dataPayload;
  try {
    dataPayload = JSON.parse(payload.nativeEvent.data);
  } catch (e) {}

  if (dataPayload) {
    if (dataPayload.type === 'Console') {
      console.info(`[Console] ${JSON.stringify(dataPayload.data)}`);
    } else {
      console.log(dataPayload)
    }
  }
};

<WebView
  injectedJavaScript={debugging}
  onMessage={onMessage}
/>

与已接受问题的不同之处在于 webview 改变了您发布消息的方式。 More here

【讨论】：

不知道它没有在控制台上记录任何东西??

【解决方案3】：

除了上面@Caesar 的解决方案，如果你替换onMessage 如下所示，这很好用：

const onMessage = (event) => {
event.persist();
let dataPayload;
try {
  dataPayload = JSON.parse(event.nativeEvent.data);
} catch (e) {}

if (dataPayload) {
  if (dataPayload.type === "Console") {
    console.info(`[Console] ${JSON.stringify(dataPayload.data)}`);
  } else {
    console.log(dataPayload);
  }
}

};

【讨论】：

我在我的代码中看到了错误。我刚刚修好了。谢谢:)