Представим, что вам дается задание исправить ошибку в Интернете, которую кто-то зарегистрировал. Вам нужно будет понять, в чем заключается ошибка, найти конечную точку, пройти этапы воспроизведения и точно понять, какой запрос вызвал проблему, а затем попытаться исправить ее. Что, если есть инструмент, который дает вам не только запись экрана, но и сетевую запись. Инструмент может отображать как запрос / ответ, так и видео, а также синхронизировать его. Вы можете выполнить поиск, чтобы найти конкретный текст, содержащийся в запросе / ответе. Инструмент позволит вам экспортировать в файл MKV, который можно воспроизводить с помощью любого медиаплеера, но показывает сеть, как только к ней осуществляется доступ из инструмента. Что ж, теперь это возможно благодаря ReproNow.
ReproNow - это расширение для браузера, созданное для того, чтобы инженеры выполняли сортировку быстрее и лучше. Этот инструмент захватывает ваш экран и базовые сетевые данные и представляет их в виде видео. Он также предоставляет Previewer, который обеспечивает четкое представление для инженера, позволяющего просматривать снимок экрана и соответствующие сетевые запросы. Он также отображает заголовки и тело выбранного запроса и представляет заголовки ответа. Все происходит на стороне клиента и на сервер ничего не отправляется. В довершение всего, это Open Source!
Инструмент состоит из 3-х основных частей.
- Снимок экрана - достигается за счет использования chrome.desktopCapture (который использует getUserMedia API).
- Сетевой захват - достигается с использованием API chrome.webRequest.
- Экспорт экрана + сеть как MKV - достигается за счет сохранения сети в разделе вложений MKV с использованием ffmpeg.js / ts-ebml на клиенте.
Одной из проблем при создании ReproNow было объединение видео и сети в один файл. Цель заключалась в том, чтобы упростить обмен видео с инженером, а также без особых хлопот просматривать его в программе предварительного просмотра ReproNow. Поиск способа сделать все это на стороне клиента усложнил задачу.
После оценки некоторых распространенных видеоформатов, таких как MPEG4, Flash и MKV, MKV выделился тем, что имел раздел вложений, куда можно было прикрепить и выгружать JSON (сетевые данные). WebM, производный от MKV и созданный специально для работы в браузере, также повлиял на решение использовать MKV для ReproNow.
Следующей частью задачи было найти фреймворк, который манипулирует MKV для присоединения JSON на стороне клиента. На помощь пришел Ffmpeg.js, который был реализован для присоединения сетевых данных (JSON) к видеофайлу. Единственное предостережение относительно ffmpeg.js в том, что он немного медленнее, и для решения этого ts-ebml библиотека Node.js используется ReproNow в качестве предпочтительного метода. В случае сбоя ts-ebml он возвращается к файлу ffmpeg.js. В любом случае ReproNow предоставляет надежный способ загрузки видео с сетевыми данными. Итак, теперь вы можете просматривать видео в любом стороннем плеере и по-прежнему просматривать экран, загружать тот же файл в нашу программу предварительного просмотра и наблюдать за прохождением сетевых запросов.
Возможности инструмента
- Захват экрана и сетевых данных
- Возможность скопировать любой запрос как Curl или Raw
- Видео на локальном хранилище
- Программа предварительного просмотра с чистым пользовательским интерфейсом, чтобы вся информация отображалась на одном экране
- Сетевые данные скрыты внутри файла MKV
- История в расширении показывает предыдущие видео
- Разместите Previewer локально или просто перейдите на https://www.repro-now.com/previewer
- Множество опций для настройки того, что вы хотите снимать
- Все работает на стороне клиента
- Открытый исходный код - настраивайте и меняйте по своему усмотрению
Инструмент может использоваться для внутреннего или внешнего контроля качества. Он также может использоваться исследователями и инженерами по программе bug bounty для сообщения и воспроизведения ошибок безопасности.
Демо
Зайдите на Repro-Now.com/previewer и загрузите демонстрационное видео.
Расширение и код Chrome
Загрузите расширение из магазина Chrome или посмотрите код на Github
