Déboguer WebView dans les applications React Native

Question

J'ai une application React Native qui utilise WebView pour rendre une page HTML à partir des ressources. La page contient du javascript qui effectue un traitement. Le problème est que je ne peux pas voir les déclarations console.log de la vue web. J'ai essayé le Débogage à distance de Chrome Débogage à distance des WebViews

Voici à quoi ressemble le code. Notez que pour Android, j'essaie de fournir certaines propriétés natives pour activer 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 (

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Toute idée sur la façon dont cela pourrait fonctionner sera grandement appréciée.

Answer 1

Le moyen le plus simple d'inspecter votre WebView dans React Native est tout simplement d'utiliser le Débogueur JS à distance. Cela présente l'avantage supplémentaire de fonctionner sur iOS ou Android, car vous déboguez simplement le JavaScript qui s'exécute dans votre application.

Pour pouvoir voir les WebViews, vous devrez aller plus loin et utiliser les appareils distants de Chrome.

Si vous cliquez sur Inspecter à côté de votre Document correspondant à index.html que vous souhaitez déboguer, vous pourrez alors voir tous les journaux dans la console pour cette WebView.

J'ai ajouté un </code> à l'intérieur de <code>index.html</code> dans le <code><header></code> qui fait simplement ce qui suit :</p> <p><code>console.log('Ceci s'affiche dans la console !')</code></p> <p>Vous pouvez voir dans l'image ci-dessus, cela s'affiche dans les DevTools qui inspectent cette WebView.</p> <p>Pour en savoir plus sur le guide de débogage de react-native-webview, consultez <a href="https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md" rel="nofollow noreferrer">la documentation du guide de débogage</a></p></x-turndown>

Answer 2

Pas sûr que ce soit pertinent pour votre cas, mais si vous développez également pour iOS, il existe un moyen assez facile de le faire sur un Mac + simulateur iOS (ou un appareil réel). En fin de compte, un WebView React Native crée une vue web native (UIWebView sur iOS, et un WebView sur Android), donc 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 Paramètres -> Safari -> Avancé -> Activer l'inspecteur Web.
2. Ouvrez Safari sur votre Mac et activez le mode développeur dans : Préférences -> Avancé -> Afficher le menu développeur dans la barre de menus (case à cocher 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 survolez cet élément de menu, vous verrez la page actuellement chargée. Cela fonctionne pour n'importe quelle page chargée sur l'appareil, qu'elle soit affichée dans un WebView à l'intérieur de votre application ou dans le navigateur système.
4. Une fois que vous avez sélectionné la page, vous pouvez utiliser l'inspecteur Web Safari pour pratiquement tout faire : visualiser toutes les ressources chargées, les requêtes réseau, surligner les éléments, les journaux de la console, déboguer le code JS et plus encore.

Answer 3

Dans les versions récentes de Chrome, vous pouvez simplement activer le mode de débogage dans l'application React Native, puis accéder à chrome://inspect/#devices.

Dans l'onglet Appareils, trouvez l'entrée "WebView in ....." qui correspond à votre application, puis cliquez sur "Inspecter" pour afficher le débogueur.

Answer 4

Je propose d'unifier les messages de console de javascript (console.log) et logcat d'Android en un seul logcat qui peut être visualisé avec [Monitor]. (https://developer.android.com/studio/profile/am-basics.html). Il peut être utile d'avoir les messages de console et les messages de WebView au même endroit, surtout en cas de conflits de timing, afin que vous puissiez voir l'ordre des événements. Monitor vous permet également d'appliquer des filtres pour sélectionner les messages que vous souhaitez voir. Les utilisateurs d'iOS peuvent également trouver cela utile.

Voici un exemple : Consultez CustomWebViewManager et CustomWebView dans React Native pour quelques informations sur la personnalisation de WebView dans React Native (une JavaScript library pour la construction d'interfaces utilisateur. "Elle est maintenue par Facebook, Instagram et une communauté de développeurs et d'entreprises individuelles" wiki).

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

Capture des messages de console de javascript:

//trouver ou obtenir votre webView React Native ou créer un CustomWebView
WebView webView = (WebView) this.findViewById(R.id.webView1);

//en définissant un WebClient pour capturer les messages de console de javascript:
// et les relayer à logcat (visualisation dans Monitor) ou faire ce que vous souhaitez avec eux
WebChromeClient webChromeClient = new WebChromeClient() {
        public boolean onConsoleMessage(ConsoleMessage cm) {
            Log.d(TAG, cm.message() + " -- De la ligne "
                    + cm.lineNumber() + " de "
                    + cm.sourceId() );
            return true;
        }
    });

webView.setWebChromeClient(webChromeClient);

Le problème avec le support cross platform est la Machine Virtuelle et le Sandbox associé. Je pense que react-native essaie d'être très pur en JavaScript (mais échoue, JavaScript en tant que langage est pur, les implémentations ne le sont jamais, toujours des compromis). Ma préférence personnelle pour le support cross platform est Cordova.

Answer 5

Vous pouvez utiliser window.postMessage à partir de l'intérieur de votre WebView et la propriété onMessage du composant WebView :

Dans votre html :

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

Dans votre composant react native :

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 (

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});