在React Native应用程序中调试WebView-Java 学习之路

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

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

4 回答

12

在React Native中检查WebView的最简单方法是使用Remote JS Debugger.这样可以在iOS或Android中工作，因为您只需调试应用程序上运行的JavaScript .

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

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

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

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

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

回复于 2024-05-04T13:02:16+08:00
4
不确定它是否也在为iOS开发，在Mac iOS模拟器（或真实设备）上有一个非常简单的方法 . 最后，React Native WebView 创建了一个本机Web视图（iOS上为 UIWebView ，Android上为 WebView ），因此适用于Web应用程序的任何调试方法也适用于此处 .
- 在iOS模拟器（或设备）上：打开设置应用程序 - > Safari - >高级 - >打开Web检查器 .
- 在Mac上打开Safari并启用开发人员模式：首选项 - >高级 - >在菜单栏中显示开发人员菜单（底部的复选框） .
- 在Mac上的Safari中，您现在将拥有"Develop"菜单 . 打开它，找到模拟器或连接的设备 . 当您悬停此菜单项时，您将看到当前加载的页面 . 这适用于设备上加载的任何页面，无论它显示在应用程序内部的 WebView 还是系统浏览器中 .
- 选择页面后，您可以使用Safari Web Inspector执行任何操作：查看所有已加载的资源，网络请求，突出显示元素，控制台日志，调试JS代码等 .
回复于 2024-05-04T13:02:16+08:00
0
我建议将Android的 javascript's 控制台消息（ console.log ）和 logcat 统一到一个logcat中，可以使用[Monitor]查看 . （https://developer.android.com/studio/profile/am-basics.html） . 在一个地方安装控制台消息和消息会很有帮助，尤其是当您遇到竞争条件/时间问题时，您可以看到事件的顺序 . Monitor还允许您应用过滤器，以选择您看到的消息 . iOS用户也喜欢这个有用的 .

下面是一个示例：

有关如何在React Native（用于构建用户界面的 JavaScript library ）中自定义 WebView 的一些背景信息，请参阅CustomWebViewManager and CustomWebView in React Native . 它由 Facebook ， Instagram 以及各个开发人员和公司的社区维护“wiki） .

信息：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);
```
cross platform支持的问题是Virtual Machine和关联的Sandbox . 我认为 react-native 试图非常纯粹 JavaScript （但是失败了， JavaScript 作为一种语言是纯粹的，实现永远不会，总是妥协） . 我个人对跨平台支持的偏好是Cordova .
回复于 2024-05-04T13:02:16+08:00

您可以在WebView和WebView组件的 onMessage prop中使用 window.postMessage ：

在你的HTML中：

...
window.postMessage(stringMessage, '*');
...

在您的react本机组件中：

import React from 'react';
import Expo from 'expo';
import { WebView } from 'react-native';

export default class App extends React.Component {
  handleMessage = (event) => {
     console.log(event.nativeEvent.data);
  }
  render() {
    const htmlURL = Expo.Asset.fromModule(require('./assets/index.html')).uri;
    return (
      <WebView nativeConfig={{props: {webContentsDebuggingEnabled: true}}}  
      source={{uri: htmlURL}}
      onMessage={this.handleMessage}
      />
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

回复于 2024-05-04T13:02:16+08:00

在React Native应用程序中调试WebView

4 回答

相关问题