Для баг-репорта снимите только ту часть страницы, где видна проблема, отметьте, что не так, и скройте всё личное, прежде чем вставить изображение в issue. В OpenScreenShot используйте для съёмки Выделенная область или Снимок элемента, для отметок — инструменты Стрелка и Номер шага, а для скрытия данных — Размытие с заливкой Заливка. URL, браузер и шаги воспроизведения укажите в тексте issue, потому что скриншот показывает содержимое страницы без адресной строки.

Снять и отметить баг шаг за шагом

  1. Откройте страницу и доведите её до сломанного состояния. Закройте баннеры, которые скрывают проблему.
  2. Нажмите на страницу правой кнопкой, откройте подменю OpenScreenShot и выберите Выделенная область или Снимок элемента. С настройками по умолчанию клик по значку на панели инструментов снимает вместо этого всю страницу.
  3. Для области обведите проблему прямоугольником, захватив достаточно интерфейса вокруг, чтобы было понятно, где она находится. Нажмите Enter для подтверждения. Для элемента наводите курсор, пока нужная карточка, таблица или форма не будет обведена, затем нажмите на неё или Enter.
  4. В Редактор поставьте Стрелка (A) у сломанной детали. Добавьте Номер шага (S) для каждого действия, если для воспроизведения бага нужно несколько кликов.
  5. Выберите Размытие (B), выберите Заливка в Скрытие и закройте токены доступа, адреса электронной почты, имена аккаунтов и внутренние имена хостов.
  6. Нажмите Копировать или Ctrl+C (⌘C на macOS) и вставьте изображение в issue.

В режиме элемента ↑ выбирает родительский элемент, а ↓ — дочерний. Это помогает, когда обводка попадает на обёртку, которая слишком мала или слишком велика. Если элемент не полностью виден, выбор элемента предлагает вместо этого снимок всей страницы.

Снимать состояния наведения, выпадающие меню и подсказки

Меню или подсказка часто закрывается, когда вы нажимаете в другом месте. Задайте Задержка в 3, 5 или 10 секунд в окне расширения или в Настройки, запустите съёмку, затем откройте меню, пока значок на панели инструментов не закончит обратный отсчёт.

Задержка идёт до начала выделения области, поэтому перетаскивание всё равно может закрыть меню. Для состояния наведения используйте Видимая часть с задержкой, а потом обрежьте снимок инструментом Обрезка (C). Можно также один раз выделить область, а затем использовать Повторить область из меню правой кнопки с задержкой: она снимает тот же прямоугольник без повторного выделения.

Пропустить редактор с действием «Буфер обмена»

Когда скриншоту не нужны отметки, задайте для После съёмки значение Буфер обмена в окне расширения или в Настройки. Тогда каждый снимок сразу попадает в буфер обмена, а значок на панели инструментов это подтверждает. Вставьте изображение в issue через Ctrl+V или ⌘V.

Эта настройка действует и для сочетаний клавиш, и для меню правой кнопки. Верните Редактор, когда нужно добавить аннотации или скрыть данные. Снимок в буфер обмена пропускает шаг скрытия данных, поэтому проверьте страницу на личные данные до съёмки.

Что написать рядом со скриншотом

Скриншот показывает, что пошло не так. Текст issue даёт контекст, который нужен разработчику, чтобы воспроизвести проблему:

  • URL страницы без личных параметров запроса
  • название и версия браузера, а также операционная система
  • шаги воспроизведения в том же порядке, что и номера шагов на изображении
  • что вы ожидали и что произошло на самом деле
  • время проблемы, если страница показывает данные в реальном времени

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

Ограничения

Размытие и мозаика смягчают пиксели, но могут оставить подсказки о коротком тексте. Заливка полностью закрывает область в экспорте; руководство по скрытию данных объясняет, как проверить результат. Внутренние страницы браузера и другие защищённые страницы блокируют съёмку расширениями; см. поддержку и известные ограничения.

Справка по режимам съёмки описывает управление выделением, а справка по аннотациям перечисляет все инструменты и клавиши. Об ответах пользователям, которые сообщают о проблеме, см. скриншоты для поддержки клиентов. Чтобы показать баг в движении, см. демо-видео продукта.