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




setwebcontentsdebuggingenabled (2)

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

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


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

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

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

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

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

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

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

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





webview