Флиппер: новая версия без Electron

Флиппер отказывается от распространения через Electron в пользу работы в браузере.

Что это значит для меня?

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

Последняя версия Electron — v0.239.0. Таким образом, будущие выпуски не будут включать артефакты Electron.

Поддержка React Native

Если вы отлаживаете приложения React Native, v0.239.0 станет последним выпуском с поддержкой из-за технических ограничений для плагинов React Dev Tools и Hermes Debugger. Поэтому при отладке приложений React Native обращайтесь к этому выпуску.

В настоящее время Meta разрабатывает новое специализированное средство отладки для React Native. А пока мы рекомендуем эту статью в блоге с инструкциями о том, как получить возможности Флиппера с помощью нескольких альтернатив.

Флиппер — это платформа для отладки мобильных приложений на iOS и Android и JS-приложений в вашем браузере или в Node.js. Визуализируйте, проверяйте и управляйте своими приложениями с простого рабочего стола. Используйте Флиппер как есть или расширьте его с помощью API плагина.

Содержание

• В этом репозитории
• Начало работы
  • Требования
• Сборка из исходного кода
  • Рабочий стол
    • Запуск из исходного кода
    • Создание автономного приложения
  • iOS SDK + пример приложения
  • Android SDK + пример приложения
  • React Native SDK + пример приложения
  • JS SDK + образец React-приложения
    • Устранение неполадок
• Документация
  • Внесение вклада
  • Лицензия

Мобильная разработка

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

Расширение Флиппера

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

Вклад во Флиппер

И настольное приложение Флиппера, и собственные мобильные SDK, и JS SDK являются открытыми и лицензированы по MIT. Это позволяет вам увидеть и понять, как мы создаём плагины, и, конечно же, присоединиться к сообществу и помочь улучшить Флиппер. Мы рады видеть, что вы создадите на этой платформе. Веб-сайт и документация (/website, /docs)

Начало работы

Пожалуйста, обратитесь к нашему руководству «Начало работы» (Getting Started guide), чтобы настроить Flipper. Или запустите npx flipper-server для браузерной версии Flipper.

Требования

• node >= 18
• yarn >= 1.16
• инструменты разработчика iOS (для разработки плагинов iOS)
• Android SDK и adb

Сборка из исходного кода

Настольная версия

Запуск из исходного кода

git clone https://github.com/facebook/flipper.git
cd flipper/desktop
yarn
yarn start

Создание автономного приложения

Укажите --mac, --win, --linux или любую их комбинацию в команде yarn build, чтобы создать файл выпуска для указанной платформы(платформ). Например:

yarn build --mac

Готовый артефакт можно найти в папке dist/.

iOS SDK + пример приложения

cd iOS/Sample
rm -f Podfile.lock
pod install --repo-update
open Sample.xcworkspace
<Запустите приложение из xcode>

Вы можете опустить --repo-update, чтобы ускорить установку, но будьте осторожны, так как вы можете создавать зависимости с устаревшими зависимостями.

Android SDK + пример приложения

Запустите эмулятор Android и выполните следующую команду в корне проекта:

./gradlew :sample:installDebug

React Native SDK + пример приложения

Требуется RN 0.69+!

cd react-native/ReactNativeFlipperExample
yarn
yarn android

Обратите внимание, что первые два шага нужно выполнить только один раз.

Также приложение можно запустить на iOS, выполнив команду yarn ios.

Если вы запускаете приложение впервые, вам также потребуется выполнить команду pod install --repo-update в папке react-native/ReactNativeFlipperExample/ios.

React Native Windows (экспериментальная версия)

Доступна экспериментальная версия Flipper для React Native Windows. Следующие шаги подготавливают проект React Native Flipper:

cd react-native/react-native-flipper
vcpkg install openssl:x64-uwp openssl:arm-uwp
vcpkg integrate install
yarn install
cd windows
nuget install ReactNativeFlipper/packages.config

Вкратце, vcpkg используется для установки OpenSSL, а Nuget — для установки Boost.

Затем образец приложения можно собрать и запустить следующим образом:

cd ../../ReactNativeFlipperExample
yarn install
yarn relative-deps
npx react-native run-windows

На данный момент пакет для React Native Flipper недоступен. Это означает, что для интеграции Flipper с другими существующими приложениями необходимо явно добавить ссылку на проект, как это сделано в примере приложения.

JS SDK + образец React-приложения

cd js/react-flipper-example
yarn
yarn start

Устранение неполадок

Старые версии yarn могут выдавать ошибку / зависать с сообщением «Waiting for the other yarn instance to finish». Если это произойдёт, сначала выполните команду yarn отдельно в каталоге react-native/react-native-flipper.

Документация

Полную документацию по этому проекту можно найти на сайте fbflipper.com.

Наша документация создана с помощью Docusaurus. Вы можете создать её локально, запустив эту команду:

cd website
yarn
yarn start

Вклад

Информацию о том, как помочь, см. в файле CONTRIBUTING.md.

Лицензия

Flipper лицензирован по лицензии MIT, как указано в файле LICENSE.