WT-Console

Примечание: Извлечено из проекта WeTrident.

📥 Установка

• npm i @webank/wt-console --save
• yarn add @webank/wt-console

💡 Предыстория

В процессе разработки приложений часто встречается ситуация, когда тестирование выявляет проблему, но не может её воспроизвести. Ранее распространённым решением было использование файловых журналов. Мы обнаружили, что файловые журналы слишком тяжеловесны, а затраты на изучение журналов для тестировщиков высоки. Поэтому мы начали использовать инструменты, подобные vConsole, в веб-проектах. Поскольку мы в основном используем функции просмотра и загрузки журналов, мы реализовали аналогичные функции в React Native и постепенно расширяем их.

🌱 Особенности

1. Добавление одной строки кода позволяет просматривать журналы в приложении.
2. Поддержка отображения информации о сети (в настоящее время поддерживает отображение fetch API).
3. Сведение предупреждений и ошибок, прощаемся с надоедливыми жёлтыми предупреждениями в RN.

📱 Скриншоты

📗 Инструкция по использованию

Перед официальным использованием можно попробовать версию Snack: онлайн-пример: https://snack.expo.io/@erichua23/wt-console-demo.

Базовое использование

Чтобы интегрировать TianYan в самый внешний слой View приложения, выполните следующие действия:

import TianYan from '@webank/wt-console'

export default class SimpleApp extends Component {
  render () {
    return (
      <View style={styles.container}>
        {/* other view */}

        {/* Завершите интеграцию добавлением следующей строки */}
        <TianYan />

      </View>
    )
  }
}

Расширенное использование

Консольный плагин

По умолчанию отображается блок консоли, содержимое которого аналогично блоку консоли Chrome.

Консольный плагин поддерживает три параметра:

• showTimestamp: отображать ли временную метку перед журналом. Логический тип, по умолчанию false.
• ignoreRedBox: игнорировать ли обработку RN по умолчанию для console.error (по умолчанию будет отображаться красный экран). Логический тип, по умолчанию — false.
• ignoreYellowBox: игнорировать ли обработку RN по умолчанию для console.warn (по умолчанию в нижней части будет отображаться небольшая жёлтая полоса). Логический тип, по умолчанию — false.

<TianYan
  consoleOptions={{
    showTimestamp: true, // Отображение временной метки журнала
    ignoreRedBox: true, // Игнорировать обработку по умолчанию RN для console.error
    ignoreYellowBox: true // Игнорировать обработку по умолчанию RN для console.warn
  }}
/>

Примечание:

• Почему введены ignoreRedBox и ignoreYellowBox? Потому что обработка предупреждений в RN довольно грубая, напрямую используя всплывающее окно в нижней части для перехвата операций, это очень раздражает при большом количестве предупреждений. Официально предоставленный метод игнорирования, но использование официального метода игнорирования вызывает опасения, что некоторые важные предупреждения будут проигнорированы. wt-console использует компромиссный подход, объединяя жёлтые полосы предупреждений в значок wt-console для отображения, и когда появляется предупреждение, разработчик может сам решить, следует ли продолжать просмотр подробной информации о предупреждении. Следующий код объединяет ошибки и предупреждения в единое управление wt-console.

Сетевой плагин

По умолчанию будет отображаться сетевой блок, который отображает информацию о сетевых запросах в приложении.Он также поддерживает повторную отправку указанного запроса одним щелчком мыши.

Разработка и отладка

// Используйте react-native-web для демонстрации
cd react-native-web-demo
npm i
npm run syncLib // Синхронизировать библиотеку с react-native-web-demo/src/ ниже
npm start // Автоматически откроет браузер

❤️ Наши другие проекты

• WeTrident (https://github.com/WeBankFinTech/WeTrident): набор инструментов для разработки приложений «всё в одном».
• React Native Search List (https://github.com/UnPourTous/react-native-search-list): поиск ListView, поддерживающий китайский пиньинь и алфавитный индекс.
• React Native Popup Stub (https://github.com/UnPourTous/react-native-popup-stub): интеллектуальный контейнер всплывающих окон.
• WT Console Server (https://github.com/UnPourTous/wt-console-server): бэкенд для управления журналами с открытым исходным кодом.

🤝 Аналогичные проекты

• web-console (https://github.com/whinc/web-console): инструмент отладки мобильных веб-приложений, аналогичный chrome devtools.
• vConsole (https://github.com/Tencent/vConsole): лёгкий и расширяемый инструмент разработчика для мобильных веб-страниц.