Блог

Скриншоты в код-ревью и пул-реквестах

Опубликовано 25 октября 2026 г. · код-ревью, пул-реквест, скриншоты, рабочий процесс

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

Пул-реквест, который меняет поведение кнопки, проверку формы или состояние загрузки, трудно оценить по диффу. Ревьюеры в итоге переключаются на ветку, пересобирают проект и ищут экран, который вы имели в виду. Небольшой, аккуратно сделанный набор снимков снимает эту работу.

Снимите до и после

Для любого видимого изменения снимите один и тот же экран дважды:

1. На базовой ветке снимите затронутую область.
2. В своей ветке снимите ту же область при том же размере окна и масштабе.
3. Сохраните оба снимка; не обрезайте один сильнее другого.

Именно совпадение области просмотра, масштаба браузера и размера окна делает сравнение осмысленным. Если вёрстка адаптивная, снимите важные ширины (например, 1280 и 390) и подпишите их.

Пометьте только разницу

Ревьюеру нужно знать, куда смотреть, а не совершать полную экскурсию:

• Номера для нескольких изменений на одном снимке: 1 — новое пустое состояние, 2 — сообщение об ошибке.
• Фигуры, чтобы обвести изменившуюся область.
• Текст для ожидаемого поведения, коротко.
• Мозаика или размытие для всего личного: имена клиентов, адреса почты, токены, внутренние адреса.

Не размечайте весь экран. Если изменение — один элемент управления, достаточно одной стрелки и одного предложения.

Запишите взаимодействие, когда снимка мало

Некоторые изменения понятны только в движении: раскрывающийся список, который закрывался слишком рано, индикатор, который теперь исчезает, перетаскивание. Запишите 10–20 секунд через Быструю запись, затем приложите MP4 или, для удобного просмотра прямо в ревью, GIF (Pro).

• Сначала покажите сломанное поведение, затем исправленное, по возможности в одном ролике.
• Выключите микрофон, если комментарий ничего не добавляет; беззвучный ролик безопасно запускается сам.
• Держите ролик достаточно коротким, чтобы его можно было посмотреть дважды.

Положите доказательства в пул-реквест

Предсказуемая структура экономит ревьюеру время:

1. Что изменилось — одним предложением.
2. До / после — изображения рядом или друг под другом, всегда в одном порядке.
3. Как воспроизвести состояние на снимке, если это не экран по умолчанию.
4. Что проверить — одну-две вещи, которые могут сломаться.
5. Окружение, если оно важно: ОС, браузер, масштаб дисплея.

Прикрепляйте изображения прямо к пул-реквесту, а не ссылайтесь на личный диск. Если используете ссылку для отправки, помните, что у неё может истечь срок или понадобиться пароль; для код-ревью вложение обычно лучше.

Держите набор небольшим

Ревьюеры просматривают быстро. Три сосредоточенных снимка прочитают; пятнадцать пролистают.

• Одна пара на одно видимое изменение.
• Обрежьте интерфейс браузера и посторонние панели.
• Сжимайте или уменьшайте изображения, которые нужны только для контекста; для изменений на уровне пикселей сохраняйте полное разрешение.
• Удаляйте снимки, которые повторяют то же состояние под чуть другим углом.

Чек-лист перед отправкой

Частые вопросы

Приложить скриншоты или запись экрана?

Снимки — для состояний, короткий ролик — для взаимодействий. Записи на 10–20 секунд достаточно, чтобы показать переход; всё длиннее обычно пропускают.

Как скрыть данные клиентов на снимке для ревью?

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

Нужен ли Pro, чтобы делать снимки для ревью?

Нет, если речь о снимке, пометках, номерах, мозаике и базовой записи в MP4. Экспорт GIF, умное удаление и эффекты видеоредактора — функции Pro, но набора снимков и MP4 хватает для большинства ревью бесплатно.

Ещё из блога