HTTP Toolkit UI: пользовательский интерфейс для анализа HTTP-запросов

HTTP Toolkit UI — это пользовательский интерфейс для прокси-сервера и инструмента анализа HTTP(S) от HTTP Toolkit. Он позволяет разработчикам перехватывать, анализировать и отлаживать HTTP-запросы и ответы.

Основная задача проекта — предоставить удобный интерфейс для взаимодействия с функционалом прокси, находящимся на серверной стороне. В отличие от других аналогичных решений, таких как Fiddler или Charles, HTTP Toolkit предлагает современный веб-ориентированный интерфейс и открыт для настройки и расширения. Это может быть полезно разработчикам, тестировщикам и всем, кто работает с API и веб-приложениями.

Проект написан на TypeScript с использованием React и MobX для управления состоянием. Запустить его можно через созданное приложение для рабочего стола или прямо в браузере, подключившись к локальному серверу, который можно поднять самостоятельно. Имей в виду, для полноценной работы нужно использовать десктопное приложение или развернуть серверный компонент.

HTTP Toolkit UI — это интерфейс для проекта HTTP Toolkit, который представляет собой кроссплатформенный и открытый HTTP(S) отладочный прокси, анализатор и клиент. Основная задача этого проекта заключается в предоставлении удобного интерфейса для работы с инструментами отладки HTTP.

Интерфейс реализован как одностраничное веб-приложение на базе React с использованием TypeScript, MobX для управления состоянием и Styled Components для стилизации. В процессе отладки используется библиотека Mockttp для перехвата HTTP-запросов.

Как установить и запустить

Чтобы начать работу с проектом, следуй этим шагам:

  • Склонируй репозиторий.
  • Выполни команду npm install.
  • Если ты используешь Mac с архитектурой arm64, возможно, появится ошибка Puppeteer с сообщением "The chromium binary is not available for arm64". В таком случае следуй инструкциям из данного материала и перед выполнением npm install запусти export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true. Однако, при этом интеграционные тесты могут не работать, но это не критично для локальной разработки.

Для чистой UI-разработки:

  • Запусти npm start для старта интерфейса с работающим сервером HTTP Toolkit.
  • Затем перейди по адресу localhost:8080, чтобы увидеть интерфейс.

Для разработки интерфейса и сервера одновременно:

  • Запусти сервер HTTP Toolkit локально.
  • Запусти npm run start:web, чтобы начать работу с интерфейсом без отдельного сервера.
  • Перейди по адресу localhost:8080 для просмотра интерфейса.

Ограничения

На Mac с архитектурой arm64 могут возникнуть проблемы со стартом интерфейса и работой тестов. Кроме того, если данные функции не работают из-за архитектурной несовместимости, это может затруднить локальную разработку некоторых возможностей приложения.

HTTP Toolkit UI может работать в связке с сервером HTTP Toolkit, который необходимо запускать отдельно или в рамках самого приложения, но имей это в виду, если планируешь использовать его функциональность в вебе.

Открыть на GitHub: httptoolkit/httptoolkit-ui →

Что нового на GitHub — короткие обзоры на русском Новые обзоры приходят в Telegram. Без спама, по делу.
Подписаться

Похожие статьи

Популярные темы на сайте