javascript - 在React Native應用程序中調試WebView




react native webview android (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