Отладка WebView в реальных приложениях React

У меня есть приложение React Native, которое использует WebView для отображения HTML-страницы из активов. На странице есть некоторый javascript, который выполняет некоторую обработку. Проблема в том, что я не вижу операторов console.log из веб-представления. Я пробовал Chrome Remote Удаленная отладка 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',
  },
});

Любые идеи о том, как это может работать, будут высоко оценены.

Ответы

Ответ 1

Самый простой способ проверить ваш WebView в React Native - просто использовать Remote JS Debugger. Это имеет дополнительное преимущество для работы в iOS или Android, поскольку вы просто отлаживаете JavaScript, который работает в вашем приложении.

Чтобы увидеть WebViews, вам нужно сделать еще один шаг и использовать Удаленные устройства Chrome.

DevTools Chrome

Если вы нажмете "Осмотреть рядом с вашим документом", соответствующий index.html, который вы хотите отлаживать, вы можете просмотреть все журналы в консоли для этого WebView.

введите описание изображения здесь

Я добавил <script> внутри index.html в <header>, который просто выполняет следующие действия:

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

Вы можете видеть на изображении выше, его выход в DevTools, который проверяет этот WebView.

Ответ 2

Я предлагаю объединить сообщения консоли javascript's (console.log) и logcat Android в один logcat, который может с помощью [Monitor]. (https://developer.android.com/studio/profile/am-basics.html). Может быть полезно иметь консольные сообщения и сообщения WebView в одном месте, особенно когда у вас есть проблемы с гонкой/проблемы с синхронизацией, поэтому вы можете видеть порядок событий. Монитор также позволяет вам применять фильтры, чтобы выбрать, какие сообщения вы видите. Пользователи iOS также могут это посоветовать.

Вот пример: введите описание изображения здесь См. CustomWebViewManager и CustomWebView в React Native для получения некоторого фона о том, как настроить WebView в React Native (a JavaScript library для создания пользовательских интерфейсов ". Он поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций wiki).

Информация: WebChromeClient позволяет обрабатывать javascript's console.log("message")
{через onConsoleMessage (ConsoleMessage см)}, 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 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);

Проблема с поддержкой cross platform - это виртуальная машина и связанный Sandbox. Я думаю, что react-native пытается быть очень чистым JavaScript (но терпит неудачу, JavaScript, поскольку язык чист, реализации никогда не существуют, всегда о компромиссе). Мое личное предпочтение для поддержки кросс-платформы - Cordova.

Ответ 3

Не уверен, что это относится к вашему делу, но если вы также разрабатываете для iOS, там довольно простой способ сделать это на симуляторе Mac + iOS (или на реальном устройстве). В конце, React Native WebView создает собственный веб-просмотр (UIWebView на iOS и WebView на Android), поэтому здесь применяется любой метод отладки, который работает для веб-приложений.

  • На вашем iOS-симуляторе (или устройстве): откройте приложение настроек → Safari → Дополнительно → Включите веб-инспектор включен.
  • Откройте Safari на вашем Mac и включите режим разработчика в: Настройки → Дополнительно → Показать меню меню в строке меню (флажок внизу).
  • В Safari на вашем Mac вы теперь будете иметь меню "Разработка". Откройте его и найдите Симулятор или подключенное устройство. Когда вы наведете этот пункт меню, вы увидите загруженную страницу. Это работает для любой страницы, загруженной на устройство, независимо от того, отображается ли она в WebView внутри вашего приложения или в системном браузере.
  • После выбора страницы вы можете использовать Safari Web Inspector, чтобы в значительной степени сделать что-либо: просмотреть все загруженные ресурсы, сетевые запросы, элементы выделения, журналы консоли, отладить код JS и т.д.