Traffic Inspector: отладка HTTP-запросов в реальном времени

Зачем нужен Traffic Inspector

Вы интегрируете Stripe, принимаете вебхуки от GitHub, тестируете API мобильного приложения – и в какой-то момент что-то ломается. Где именно сбой? Встроенный Traffic Inspector в fxTunnel показывает каждый HTTP-запрос в реальном времени: заголовки, тело, статус-код и тайминги – без единой строки дополнительного кода.

Добавить логирование можно не всегда. Сторонний сервис отправляет вебхук — вы не контролируете формат запроса. Мобильное приложение шлёт запросы через HTTPS — перехватить их без прокси непросто. Даже в собственном коде ручное логирование каждого заголовка — это шум в терминале и потраченное время.

Inspector решает эту задачу: туннель пропускает через себя весь трафик, а Inspector записывает каждый запрос и ответ в удобном веб-интерфейсе. Вы видите ровно то, что видит ваш сервер, — без модификации кода.

Что показывает fxTunnel Inspector

Traffic Inspector отображает полную информацию о каждом HTTP-запросе и ответе. Интерфейс обновляется в реальном времени — новые запросы появляются мгновенно, без перезагрузки страницы.

Для каждого входящего запроса Inspector показывает:

• Метод и путь — POST /api/webhook, GET /healthcheck
• Заголовки — все HTTP-заголовки, включая Content-Type, Authorization, Stripe-Signature
• Тело запроса — JSON, form-data, XML или сырые байты с подсветкой синтаксиса
• Query-параметры — разобранные ?key=value в удобной таблице
• Размер и timestamp — вес тела и точное время получения с миллисекундами

Inspector также записывает ответ вашего сервера: статус-код, заголовки, тело и время обработки в миллисекундах. Вы видите, сколько времени занял каждый этап — передача через туннель и обработка на сервере:

Клиент → fxTunnel сервер → туннель → localhost → ваш сервер → ответ → обратно
         |←── DNS + TLS ──→|←── tunnel latency ──→|←── server processing ──→|

Как запустить Inspector

Inspector доступен на платных тарифах fxTunnel от $5/мес. Запуск занимает 10 секунд.

fxtunnel http 8080

В терминале вы увидите:

fxTunnel v1.x — tunnel is active
Public URL:   https://my-app.fxtun.dev
Inspector:    https://my-app.fxtun.dev/_inspector
Forwarding:   https://my-app.fxtun.dev → http://localhost:8080

Перейдите по ссылке Inspector в браузере и отправьте тестовый запрос:

curl -X POST https://my-app.fxtun.dev/api/test \
  -H "Content-Type: application/json" \
  -d '{"event": "test", "data": {"id": 42}}'

Запрос мгновенно появится в Inspector — с полным телом, заголовками и ответом вашего сервера.

Replay: повторная отправка запросов одним кликом

Replay позволяет повторно отправить любой записанный запрос на ваш localhost одним кликом. Не нужно заново тригерить событие в стороннем сервисе, копировать curl-команды или писать тестовые скрипты.

1. В Inspector найдите нужный запрос в списке.
2. Нажмите кнопку Replay.
3. fxTunnel повторно отправит точную копию запроса — с теми же заголовками и телом.
4. Новый ответ появится рядом — вы сразу увидите результат.

Почему Replay критически важен

Типичный цикл отладки без Replay:

1. Stripe отправляет вебхук → сервер падает с ошибкой
2. Вы исправляете код
3. Нужно заново создать тестовый платёж в Stripe
4. Ждёте вебхук... Повторяете шаги 2-4 ещё пять раз

С Replay:

1. Stripe отправляет вебхук → сервер падает с ошибкой
2. Вы исправляете код
3. Нажимаете Replay в Inspector → мгновенно видите результат

Для сложных интеграций, где воспроизвести событие непросто (спор по транзакции в Stripe, merge-event в GitHub, callback от платёжного шлюза), Replay — это разница между часами и минутами отладки.

Отладка вебхуков через Inspector

Вебхуки — главный сценарий использования Inspector. Сторонний сервис отправляет запрос на ваш сервер, и вы не контролируете его содержимое. Inspector позволяет увидеть каждый вебхук до того, как его обработает ваш код.

Stripe: проверка подписи

Stripe подписывает каждый вебхук заголовком Stripe-Signature. Если ваш сервер отвечает 400 Bad Request, Inspector покажет:

POST /webhook HTTP/1.1
Content-Type: application/json
Stripe-Signature: t=1709294400,v1=5257a869e7eceb...

{"id": "evt_1abc", "type": "payment_intent.succeeded", ...}

--- Response ---
HTTP/1.1 400 Bad Request
{"error": "Webhook signature verification failed"}

Вы видите: запрос пришёл, подпись есть, но верификация провалилась. Проблема в коде, а не в Stripe. Исправляете, нажимаете Replay, видите 200 OK.

GitHub: формат событий

GitHub отправляет тип события в заголовке X-GitHub-Event, а подпись — в X-Hub-Signature-256. Inspector показывает оба:

POST /webhook HTTP/1.1
X-GitHub-Event: push
X-Hub-Signature-256: sha256=abc123...

{"ref": "refs/heads/main", "commits": [...]}

Telegram: обновления бота

Telegram не подписывает вебхуки, но отправляет сложную структуру Update. Inspector позволяет изучить полный payload:

{
  "update_id": 123456789,
  "message": {
    "message_id": 42,
    "from": {"id": 100, "first_name": "Aleksei"},
    "chat": {"id": 100, "type": "private"},
    "text": "/start"
  }
}

Вы видите точный формат, который получает ваш обработчик, — без угадывания.

Отладка API мобильных приложений

Inspector незаменим при тестировании мобильных приложений через туннель. Телефон отправляет запросы на публичный URL fxTunnel, а Inspector записывает каждый из них — без прокси на телефоне, без Charles Proxy, без модификации кода.

# Запускаете API-сервер и туннель
node server.js  # слушает порт 3000
fxtunnel http 3000
# → Public URL: https://mobile-api.fxtun.dev
# → Inspector:  https://mobile-api.fxtun.dev/_inspector

В мобильном приложении укажите https://mobile-api.fxtun.dev как базовый URL API. Inspector покажет каждый запрос:

GET /api/v1/user/profile HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
User-Agent: MyApp/2.1.0 (iPhone; iOS 18.3)

--- Response ---
HTTP/1.1 200 OK
{"id": 42, "name": "Aleksei", "email": "dev@example.com"}

Если приложение получает ошибку — вы видите и запрос, и ответ, и можете определить, на чьей стороне проблема.

Сравнение с альтернативами

Inspector – не единственный способ смотреть HTTP-трафик, но он встраивается в рабочий процесс без дополнительной настройки. Сравним его с альтернативами.

Главное удобство – нулевой порог входа. Запустили туннель, открыли Inspector, уже видите трафик.

Фильтрация и поиск запросов

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

Inspector поддерживает фильтрацию по нескольким критериям:

• По методу — показать только POST, только GET или любой другой
• По пути — найти все запросы к /api/webhook или /healthcheck
• По статус-коду — отфильтровать ошибки (4xx, 5xx) или успешные (2xx)
• По времени — запросы за последние 5 минут, час или произвольный интервал

Также доступен поиск по содержимому заголовков и тела. Например, найти все неуспешные вебхуки Stripe:

Метод: POST | Путь: /webhook | Статус: 4xx, 5xx
→ 3 запроса найдено

Открываете каждый, изучаете тело и ответ, находите причину и используете Replay для проверки исправления.

Рабочий процесс: debug → replay → fix → verify

Inspector встраивается в цикл разработки как инструмент наблюдения и повтора.

1. Debug — обнаружить проблему

Баг-репорт: «вебхук от Stripe не обрабатывается». Открываете Inspector:

POST /webhook → 500 Internal Server Error
{"error": "Cannot read property 'amount' of undefined"}

2. Replay — воспроизвести

Нажимаете Replay. Тот же запрос снова приходит на сервер. При необходимости ставите брейкпоинт в IDE и нажимаете Replay ещё раз — отладчик остановится на нужной строке.

3. Fix — исправить код

Изучив тело запроса, вы видите, что Stripe отправляет amount_received, а не amount:

// Было:
const amount = event.data.object.amount;

// Стало:
const amount = event.data.object.amount_received;

4. Verify — проверить

Нажимаете Replay. Inspector показывает POST /webhook → 200 OK. Проблема решена за минуты, а не за часы.

Тарифы и доступность

Traffic Inspector доступен в платных тарифах fxTunnel:

Для ориентира: ngrok берёт от $8/мес за Inspector с Replay, Postman – от $14/мес за расширенный мониторинг.

Inspector не заменяет unit-тесты, APM-системы и серверные логи – он дополняет их. Его задача – дать вам мгновенную видимость HTTP-трафика во время разработки. Подробное сравнение тарифов и возможностей – в ngrok vs Cloudflare vs fxTunnel.

FAQ

Что такое Traffic Inspector в fxTunnel?

Это веб-панель, которая записывает каждый HTTP-запрос, проходящий через ваш туннель. В ней видны заголовки, тела запроса и ответа, статус-коды, тайминги и размер данных – всё обновляется в реальном времени прямо в браузере. Доступен на платных тарифах от $5/мес.

Чем Inspector в fxTunnel отличается от ngrok Inspector?

По функциям они похожи: оба показывают HTTP-трафик в реальном времени с возможностью повтора запросов. Разница в цене: fxTunnel включает Inspector с Replay от $5/мес, ngrok – от $8/мес. Плюс в fxTunnel фильтрация по методу, пути и статус-коду работает из коробки.

Можно ли использовать Inspector для отладки вебхуков?

Да, и это один из самых частых сценариев. Каждый входящий вебхук записывается целиком – тело и заголовки. Когда нужно повторить, нажимаете Replay – тот же payload снова приходит на сервер. Заново тригерить событие в Stripe, GitHub или Telegram не надо.

Работает ли Inspector с TCP и UDP туннелями?

Нет. Inspector опирается на структуру HTTP (заголовки, тело, статус-коды), чтобы отображать осмысленные данные. TCP и UDP передают сырой поток байтов без HTTP-семантики, и Inspector не может его разобрать. Подробнее о режимах протоколов – в статье об архитектуре fxTunnel.

Нужно ли устанавливать дополнительное ПО для использования Inspector?

Нет. Всё работает в браузере. При запуске туннеля командой fxtunnel http в терминале появляется ссылка на Inspector. Открываете – и готово, ничего дополнительно ставить не нужно.