javascript - onmessage - react native webview local html

Depuración de WebView en aplicaciones React Native

Question

Tengo una aplicación React Native que usa WebView para renderizar una página HTML de los activos. La página tiene algunos javascript que procesan algo. El problema es que no puedo ver las instrucciones console.log desde la vista web. He probado las vistas web de depuración remota remota de Chrome

Así es como se ve el código. Tenga en cuenta que para Android, estoy tratando de proporcionar algunos accesorios nativos para permitir la depuración.

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

Cualquier idea sobre cómo podría funcionar eso será muy apreciada.

Answer 1

La manera más fácil de inspeccionar su WebView en React Native es simplemente usar el Depurador remoto JS. Esto tiene el beneficio adicional de trabajar en iOS o Android, ya que simplemente depura el JavaScript que se ejecuta en su aplicación.

Para ver WebViews, querrá ir un paso más allá y usar los Dispositivos Remotos de Chrome .

Si hace clic en Inspeccionar al lado de su Documento que coincida con el index.html que desea depurar, puede ver todos los registros en la consola para ese WebView.

Agregué un <script> dentro de index.html en el <header> que solo hace lo siguiente:

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

Puede ver en la imagen de arriba, su cierre de sesión en DevTools que está inspeccionando ese WebView.

Answer 2

No estoy seguro de si es relevante para su caso, pero si también está desarrollando para iOS, hay una manera bastante fácil de hacerlo en un simulador de Mac + iOS (o un dispositivo real). Al final, un WebView nativo de React crea una vista web nativa ( UIWebView en iOS y WebView en Android), por lo que también se aplica aquí cualquier método de depuración que funcione para aplicaciones web.

1. En su simulador (o dispositivo) de iOS: abra la aplicación de configuración -> Safari -> Avanzado -> Activar el inspector web.
2. Abra Safari en su Mac y habilite el modo desarrollador en: Preferencias -> Avanzado -> Mostrar el menú del desarrollador en la barra de menú (casilla de verificación en la parte inferior).
3. En Safari en tu Mac, ahora tendrá el menú "Desarrollar". Ábrelo y encuentra el simulador o tu dispositivo conectado. Cuando desplazas este elemento del menú, verás la página cargada actualmente. Esto funciona para cualquier página cargada en el dispositivo, ya sea que se muestre en una WebView dentro de su aplicación o en el navegador del sistema.
4. Una vez que seleccione la página, puede usar Safari Web Inspector para hacer prácticamente cualquier cosa: ver todos los recursos cargados, las solicitudes de red, los elementos resaltados, los registros de la consola, depurar el código JS y más.

Answer 3

Propongo unificar javascript''s mensajes de javascript''s consola javascript''s ( console.log ) y logcat de Android en un logcat que se puede ver con [Monitor]. ( https://developer.android.com/studio/profile/am-basics.html ). Puede ser útil tener mensajes de consola y mensajes WebView en un solo lugar, especialmente cuando tiene problemas de condiciones / tiempos de carrera, para que pueda ver el orden de los eventos. Monitor también le permite aplicar filtros, para seleccionar qué mensajes ve. Los usuarios de iOS también pueden ser útiles.

Aquí hay un ejemplo: Consulte CustomWebViewManager y CustomWebView en React Native para obtener información sobre cómo personalizar WebView en React Native (una JavaScript library para crear interfaces de usuario. "Es mantenido por Facebook , Instagram y una comunidad de desarrolladores individuales y corporaciones" wiki ).

Información: WebChromeClient permite manejar el WebChromeClient Javascript''s console.log("message")
{via onConsoleMessage(ConsoleMessage cm) }, alert() y otras funciones.

Captura de mensajes de consola de 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);

El problema con el soporte multiplataforma es la máquina virtual y el Sandbox asociado. Creo que react-native intenta ser un JavaScript muy puro (pero falla, JavaScript como un lenguaje es puro, las implementaciones nunca lo son, siempre se trata de un compromiso). Mi preferencia personal por el soporte multiplataforma es Cordova .