web-dev-qa-db-fra.com

Débogage de WebView dans les applications natives React

J'ai une application native React qui utilise WebView pour générer une page HTML à partir des ressources. La page contient du javascript qui effectue certains traitements. Le problème est que je ne peux pas voir les déclarations console.log à partir de la vue Web. J'ai essayé le Chrome Remote Débogage à distance WebViews

Voici à quoi ressemble le code. Notez que pour Android, j'essaie de fournir des accessoires natifs pour permettre le débogage.

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

Toute idée sur la manière dont cela pourrait fonctionner sera hautement appréciée.

javascriptandroidreact-nativewebview
26
Mohsin Shafique

Vous ne savez pas vraiment si cela convient à votre cas, mais si vous développez également pour iOS, il existe un moyen assez simple de le faire sur un simulateur Mac + iOS (ou un appareil réel). À la fin, une WebView de React Native crée une vue Web native (UIWebView sur iOS et une WebView sur Android), de sorte que toute méthode de débogage qui fonctionne pour les applications Web s'applique également ici.

  1. Sur votre simulateur iOS (ou appareil): Ouvrez l'application de configuration -> Safari -> Avancée -> Activer l'inspecteur Web.
  2. Ouvrez Safari sur votre Mac et activez le mode développeur dans: Préférences -> Avancé -> Afficher le menu du développeur dans la barre de menus (case à cocher située en bas).
  3. Dans Safari sur votre Mac, vous aurez maintenant le menu "Développer". Ouvrez-le et trouvez le simulateur ou votre appareil connecté. Lorsque vous passez la souris sur cet élément de menu, vous verrez la page actuellement chargée. Cela fonctionne pour toutes les pages chargées sur le périphérique, qu'elles soient affichées dans une WebView dans votre application ou dans le navigateur du système.
  4. Une fois que vous avez sélectionné la page, vous pouvez utiliser Safari Web Inspector pour pratiquement tout faire: afficher toutes les ressources chargées, les requêtes réseau, les éléments en surbrillance, les journaux de la console, déboguer le code JS, etc.
13
Artal

Je propose d'unifier les messages de console javascript's (console.log) et logcat d'Android dans un logcat pouvant être visualisé avec [Moniteur]./ https://developer.Android.com/studio/profile/am-basics .html ). Il peut être utile d’avoir les messages de console et les messages WebView au même endroit, en particulier lorsque vous avez des conditions de course/des problèmes de minutage, afin de pouvoir voir l’ordre des événements. Monitor vous permet également d'appliquer des filtres pour sélectionner les messages que vous voyez. Les utilisateurs d'iOS peuvent aussi trouver cela utile.

Voici un exemple:  enter image description here Voir CustomWebViewManager et CustomWebView dans React Native pour un aperçu de la personnalisation de WebView dans React Native (un JavaScript library pour la construction d'interfaces utilisateur. "Il est géré par Facebook, Instagram et une communauté de développeurs individuels et de sociétés " wiki ).

Info: WebChromeClient vous permet de gérer Javascript'sconsole.log("message") 
{via onConsoleMessage(ConsoleMessage cm)}, alert() et d'autres fonctions.

Récupérer les messages de la console 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);

Le problème avec cross platform support est la machine virtuelle et le Sandbox ..__ associé. Je pense que react-nativeessaie d'être très pur JavaScript (mais échoue, JavaScript en tant que le langage est pur, les implémentations ne le sont jamais, toujours à propos de compromis). Ma préférence personnelle pour le support entre plates-formes est Cordova .

4
Jon Goodwin

Vous pouvez utiliser window.postMessage depuis votre WebView et l’application onMessage du composant WebView:

Dans votre html:

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

Dans votre composant natif de réaction:

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