Как разметить скриншот
- Снимите область, всю страницу или элемент. Новый пункт появится в боковой панели SiteAnnotation.
- Нажмите Разметить под скриншотом. Редактор откроется в новой вкладке.
- Выберите инструмент и цвет и рисуйте на картинке.
- Нажмите Сохранить и вернитесь в панель. Размеченная картинка заменит исходную в отчете, а исходник сохранится.
Инструменты
| Инструмент | Для чего |
|---|---|
| Стрелка | Показать место, о котором речь |
| Прямоугольник | Обвести кнопку, цену или кусок текста |
| Текст | Короткая подпись прямо на картинке |
| Номер | Метки 1, 2, 3, когда на одном скриншоте несколько проблем |
| Размытие | Скрыть почту, имена, цены и все, чем не хотите делиться |
| Обрезка | Оставить только нужную часть |
Цвета: красный, желтый, синий и черный, этого хватает, чтобы выделиться и на светлой, и на темной странице.
Каждая пометка в своем слое
Пометки не впечатываются в картинку, пока вы работаете. Справа список всех пометок: выберите любую, чтобы сдвинуть или удалить. Отменить и Повторить проходят по вашим правкам. Редактор можно открыть через день и поменять пометки: они остаются редактируемыми.
Номера, которые совпадают с комментарием
Поставьте метку 1 на цену, метку 2 на кнопку и поясните их в комментарии: «1: итог 110,00 $, 2: кнопка списывает 101,00 $». Разработчик читает список и видит каждый номер на картинке, не гадая, какая стрелка что значит.
Пункты отчета тоже пронумерованы (#1, #2, #3), и номера одинаковы в PDF, Word, HTML и Markdown, поэтому «см. #4, метка 2» указывает на одно место в любом формате.
Размойте перед отправкой
Размойте то, что видно на скриншоте: почту, имена, номера заказов. В выгруженных файлах только размытая картинка. Резервная копия отчета хранит исходник под размытием, чтобы его можно было поправить позже, поэтому передавайте копию только тем, кому можно видеть весь скриншот.
Значения полей форм, токены и идентификаторы сессий в снятом HTML и адресах маскируются автоматически, до сохранения. Что маскирует расширение.
Откуда берутся скриншоты
Редактор работает с любым снимком, у которого есть картинка: область или скриншот всей страницы и элемент с HTML и CSS. После разметки расставьте пункты по порядку, напишите вступление и выгрузите отчет: отчеты и выгрузка.
Размеченный скриншот в готовом отчете: шаблон и пример баг-репорта.
Ограничения
- Редактор размечает скриншоты, снятые SiteAnnotation; файлы картинок с компьютера он не открывает.
- Пометки рисуются на неподвижной картинке, а не на живой странице.