DevRecorder

Что такое DevRecorder?

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

Рекордер также сохраняет детали запросов и ответов (включая заголовки, полезные данные и тела ответов) и может добавлять звук с микрофона, пока вы комментируете воспроизведение. Он предназначен для того, чтобы команды могли делиться отчётами о багах с полным контекстом через ссылку для общего доступа.

Ключевые возможности

• Синхронизированная по кадрам шкала отладки: Логи, сетевые запросы и изменения маршрутов/навигации привязаны к кадрам видео, позволяя перематывать запись прямо к нужному моменту.
• Захват консоли с сохранением деталей: Записывает логи консоли, предупреждения и ошибки с полными трассировками стека и аргументами «точно так, как их показывает DevTools».
• Захват сети с точностью DevTools: Сохраняет полные сетевые запросы с заголовками, полезными данными, телами ответов и информацией о времени, сопоставимой с тем, что показывает DevTools.
• Отслеживание навигации и смены маршрутов: Записывает события навигации для SPA и традиционных потоков страниц, чтобы запись отражала путь пользователя.
• Поддержка комментариев с микрофона: Позволяет добавлять звук с микрофона во время записи, чтобы объяснять происходящее без выхода из рекордера.
• Ссылка для общего доступа (без входа для просмотра): Создаёт URL, который коллеги могут открыть для просмотра видео с синхронизированными отладочными данными.
• Контекст для ИИ-ассистента через MCP: Вы можете подключиться через MCP, чтобы ИИ-ассистент получил доступ к контексту записи (видео, логи и сеть). На странице упоминаются рабочие процессы, такие как перетаскивание записи в Cursor.

Как использовать DevRecorder

1. Установите расширение: Добавьте расширение DevRecorder для Chrome из Chrome Web Store.
2. Начните запись: Нажмите кнопку записи, затем воспроизведите проблему, которую хотите захватить.
3. Запишите нужное: При необходимости выберите окно или выделите область, чтобы захватить только релевантную часть экрана.
4. Проверьте захват: Во время воспроизведения DevRecorder автоматически фиксирует вывод консоли, сетевую активность и события навигации (с комментариями с микрофона, если включено).
5. Поделитесь для проверки: Используйте опцию «Поделиться», чтобы сгенерировать ссылку, по которой команда сможет просмотреть синхронизированный отладочный контекст.
6. (Необязательно) Отправьте контекст в ИИ-инструменты: Подключитесь через MCP, чтобы поддерживаемые ИИ-инструменты могли использовать содержимое записи.

Сценарии использования

• Воспроизведение клиентской ошибки: Запишите, вызывая поток JavaScript/TypeError, затем перемотайте к точному кадру, где ошибка появляется в выводе консоли.
• Отладка несоответствий запрос/ответ: Захватите неудачный API-вызов (включая статус, полезные данные, заголовки и тело ответа) и сопоставьте его с состоянием интерфейса и временем, показанным в видео.
• Отслеживание переходов маршрутов SPA: Когда баг появляется после навигации (например, переход от товаров к корзине и оформлению заказа), используйте события навигации, чтобы подтвердить фактический путь пользователя.
• Написание отчёта о баге с комментариями: Запишите и проговорите шаги воспроизведения, чтобы рецензенты могли следовать логике и одновременно видеть лежащие в основе логи и сетевую активность.
• Подготовка анализа с помощью ИИ: Предоставьте контекст записи ИИ-ассистенту, подключённому через MCP, чтобы он мог ссылаться на то, что произошло в видео, вместе с записанными отладочными данными.

FAQ

Требуется ли вход в DevRecorder для общего доступа к записям?

На странице указано, что зрители из команды могут открыть ссылку для общего доступа без необходимости входа.

Что захватывает DevRecorder во время записи?

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

Можно ли записывать только часть экрана?

Да. На странице описана возможность выбрать окно или выделить область, чтобы захватить только выбранную часть.

Как ИИ-ассистенты получают контекст из DevRecorder?

На сайте указано, что вы можете подключиться через MCP, чтобы ИИ-ассистент получил доступ к контексту записи (видео, логи и сеть). Также упоминается перетаскивание записи в Cursor как пример рабочего процесса.

Какая настройка браузера упоминается?

В инструкции по установке на странице предлагается добавить расширение DevRecorder из Chrome Web Store.

Альтернативы

• Запись производительности, сети и консоли в DevTools: встроено в Chrome DevTools и ориентировано на захват трассировок и сетевых данных; обычно требует ручного экспорта и сопоставления, а не единой видеохронологии с синхронизацией кадров.
• Универсальные инструменты записи экрана с аннотациями: инструменты для записи видео под туториалы и воспроизведение багов можно сочетать с отдельным экспортом логов, но они не синхронизируют автоматически данные консоли и сети с видео.
• Инструменты баг-репортинга, собирающие сессии (например, session replay): продукты session replay фиксируют таймлайны пользовательских взаимодействий и иногда сетевые данные; акцент обычно делается на взаимодействиях пользователя, а не на захвате консоли и сети в стиле DevTools с привязкой к кадрам.