在 React Native 应用程序中调试 WebView [英] Debugging WebView in React Native apps
问题描述
我有一个 React Native 应用程序,它使用 WebView 从资产呈现 HTML 页面.该页面有一些 javascript 进行一些处理.问题是我无法从 Web 视图中看到 console.log
语句.我试过 Chrome 远程
如果您点击与您要调试的 index.html
匹配的文档旁边的检查,您就可以在控制台中看到该 WebView 的所有日志.
我在
的 index.html
内添加了一个 ,它只执行以下操作:>
console.log('这是在控制台中显示的!')
您可以在上图中看到,它在正在检查该 WebView 的 DevTools 中注销.
有关 react-native-webview 调试指南的更多信息,请访问 调试指南文档
I have a React Native App that uses WebView to render an HTML page from the assets. The page has some javascript that does some processing. The problem is that I cannot see the console.log
statements from the web view. I have tried the Chrome Remote Remote Debugging WebViews
Here's how the code looks like. Note that for Android, I am trying to supply some native props to enable debugging.
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',
},
});
Any ideas around how that might work will be highly appreciated.
The easiest way to inspect your WebView in React Native is to just use the Remote JS Debugger. This has the added benefit for working in either iOS or Android, since you're simply debugging the JavaScript that is running on your application.
In order to see the WebViews, you'll want to go a step further and use Chrome's Remote Devices.
If you click on Inspect next to your Document matching the index.html
you're wanting to debug, you can then see all of the logs in the console for that WebView.
I added a <script>
inside of index.html
in the <header>
that just does the following:
console.log('This is showing in the console!')
You can see in the image above, its logging out in the DevTools that is inspecting that WebView.
For more on react-native-webview debugging guide head on to Debugging Guide Docs
这篇关于在 React Native 应用程序中调试 WebView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!