在React Native应用程序中调试WebView

Question

我有一个React Native App,它使用WebView从资产中呈现HTML页面.该页面有一些javascript进行一些处理.问题是我无法console.log从Web视图中看到这些语句.我尝试过Chrome 远程调试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',
  },
});

关于如何运作的任何想法将受到高度赞赏.

Answer 1

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

要查看WebView,您需要更进一步,使用Chrome的远程设备.

如果单击与index.html您要调试的文档相匹配的Inspect ,则可以在控制台中查看该WebView的所有日志.

我添加了一个<script>内部index.html的<header>,只是执行以下操作:

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

您可以在上图中看到,它正在检查WebView的DevTools中注销.

Answer 2

不确定它是否与您的情况相关,但如果您也在开发iOS,那么在Mac + iOS模拟器(或真实设备)上进行此操作非常简单.最后,React Native WebView会创建一个本机Web视图(UIWebView在iOS上,WebView在Android上),因此适用于Web应用程序的任何调试方法也适用于此处.

1. 在iOS模拟器(或设备)上:打开设置应用程序 - > Safari - >高级 - >打开Web检查器.
2. 在Mac上打开Safari并启用开发人员模式:首选项 - >高级 - >在菜单栏中显示开发人员菜单(底部的复选框).
3. 在Mac上的Safari中,您现在将拥有"开发"菜单.打开它,找到模拟器或连接的设备.当您悬停此菜单项时,您将看到当前加载的页面.这适用于设备上加载的任何页面,无论它是在WebView应用程序内部还是在系统浏览器中显示.
4. 选择页面后,您可以使用Safari Web Inspector执行任何操作:查看所有已加载的资源,网络请求,突出显示元素,控制台日志,调试JS代码等.

Answer 3

在最新的 Chrome 版本中，您只需在 React Native 应用程序中启用调试模式，然后导航到chrome://inspect/#devices.

在“设备”选项卡中，找到与您的应用程序对应的“WebView in .....”条目，然后单击“检查”以查看调试器。

Answer 4

我建议将javascript's控制台消息 ( console.log) 和logcatAndroid 的消息统一到一个logcat中，可以使用 [Monitor] 查看。( https://developer.android.com/studio/profile/am-basics.html )。将控制台消息和消息放在一处会很有帮助WebView，特别是当您遇到竞争条件/计时问题时，这样您就可以看到事件的顺序。监视器还允许您应用过滤器来选择您看到的消息。iOS 用户也会喜欢这很有帮助。

这是一个例子： 有关如何在 React Native 中进行自定义的一些背景信息，请 参阅React Native中的 CustomWebViewManager 和 CustomWebView（用于构建用户界面。“它由 以及个人开发人员和公司社区维护” wiki ）。WebViewJavaScript libraryFacebookInstagram

信息：WebChromeClient允许您处理Javascript's console.log("message")
{via onConsoleMessage(ConsoleMessage cm)}alert()和其他功能。

捕获 JavaScript 的控制台消息：

//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);

跨平台支持的问题是虚拟机和相关的沙箱。我认为react-native 尝试变得非常纯粹JavaScript（但失败了，JavaScript因为语言是纯粹的，但实现从来都不是，总是关于妥协）。我个人对跨平台支持的偏好是Cordova。