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中註銷。




react   javascript   android   react-native   webview  


webview