web-dev-qa-db-ja.com

ReactネイティブアプリでのWebViewのデバッグ

React WebViewを使用してアセットからHTMLページをレンダリングするネイティブアプリがあります。ページには処理を行うjavascriptがあります。問題はconsole.log Webビューからのステートメント。 Chrome Remote 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',
  },
});

それがどのように機能するかについてのアイデアは高く評価されます。

javascriptandroidreact-nativewebview
28
Mohsin Shafique

React NativeでWebViewを検査する最も簡単な方法は、 Remote JS Debugger。 を使用することです。これは、iOSまたはAndroid '単に、アプリケーションで実行されているJavaScriptをデバッグしているだけです。

WebViewを表示するには、さらに一歩進んで Chromeのリモートデバイス を使用します。

DevTools Chrome

デバッグする_index.html_に一致するドキュメントの横にある[検査]をクリックすると、そのWebViewのコンソールですべてのログを確認できます。

enter image description here

_<script>_内の_index.html_を_<header>_内に追加しました。これは次のことだけを行います。

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

上の画像、そのWebViewを検査しているDevToolsでのログアウトで確認できます。

20
mootrichard

それがあなたのケースに関連するかどうかはわかりませんが、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コードのデバッグなど、ほとんど何でも実行できます。
15
Artal

_javascript's_コンソールメッセージ（_console.log_）とlogcat of Androidを1つに統合 logcat [モニター]。（ https://developer.Android.com/studio/profile/am-basics.html ）。コンソールメッセージとWebViewメッセージを1つにすると便利です。特に、競合状態/タイミングの問題がある場合は、イベントの順序を確認できます。モニターでは、表示するメッセージを選択するためのフィルターを適用することもできます。

以下に例を示します。 enter image description here を参照してください CustomWebViewManagerとCustomWebView in React NativeWebView in React Native （a _JavaScript library_ユーザーインターフェイスの構築用。「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);
_

クロスプラットフォーム サポートの問題は、 仮想マシン および関連する サンドボックス です。 _react-native_triesは非常に純粋であると思いますJavaScript（しかし、失敗する、言語としてのJavaScript、 implementationsは決して妥協ではなく、常に妥協についてです。クロスプラットフォームサポートの個人的な好みは Cordova です。

4
Jon Goodwin

WebView内からwindow.postMessageとWebViewコンポーネントのonMessage propを使用できます。

あなたのhtmlで：

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

反応するネイティブコンポーネント：

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',
  },
});
0
WebsByTodd