Скриншот всей страницы сайта: пометки, CSS и баг-репорт

Сделайте скриншот всей страницы сайта, блока или области, добавьте пометки и CSS и выгрузите баг-репорт с замечаниями по сайту.

Сделайте скриншот всей страницы сайта, отметьте, что не так, и отправьте разработчику один файл. Снимите область, всю страницу или один блок, напишите комментарий, и каждый захват станет пронумерованным пунктом отчета. Отчет выгружается в Markdown, HTML, DOCX или PDF. ЧТО МОЖНО СНЯТЬ • Область: обведите прямоугольник на видимой части страницы. • Вся страница: расширение прокручивает ее и склеивает кадры в одно изображение, вместе с тем, что ниже первого экрана. • Блок: его изображение, HTML, CSS-селектор и XPath. • Текст: выделение, блок кода или таблица. • Данные страницы: title, description, canonical, robots, язык, заголовки и теги для соцсетей. CSS БЛОКА Многие ошибки верстки живут в стилях, поэтому вместе с изображением блока сохраняется CSS: правила в порядке каскада, файл стилей каждого правила, условия @media и состояния :hover. Лишнее снимается галочкой. Разработчик получает те же правила, что видели вы, без DevTools. КАК ЭТО РАБОТАЕТ Расширение открывается в боковой панели Chrome: страница и ваши заметки остаются в одном окне. 1. Нажмите на значок расширения на проверяемом сайте. 2. Выберите режим захвата. 3. Напишите комментарий к пункту. Адрес и время добавятся сами. 4. Откройте вкладку отчета, разложите пункты по разделам и выгрузите файл. ПОМЕТКИ НА СКРИНШОТЕ Редактор добавляет прямоугольники, стрелки, текст, номера и размытие. Размытие скрывает почту и имена перед отправкой файла. Оригинал хранится, поэтому размытие можно снять и позже. ОДИН ОТЧЕТ НА ЗАДАЧУ Ведите несколько отчетов: по клиенту, релизу или сайту. Добавляйте разделы, введение и заключение, меняйте порядок пунктов перетаскиванием или с клавиатуры. Резервная копия отчета сохраняется в файл и восстанавливается из него. Релиз с десятками адресов помещается в один отчет. ВЫГРУЗКА 1️⃣ Markdown с изображениями, для задачи или репозитория. 2️⃣ Самодостаточный HTML-файл. 3️⃣ DOCX с нумерацией страниц и оглавлением. 4️⃣ PDF через печать браузера. У каждого пункта остаются номер, комментарий, адрес и время, поэтому файл читается как готовый баг-репорт для разработчика. БЕЗ АККАУНТОВ И СЕРВЕРА Все хранится на вашем компьютере, регистрация не нужна. Вы собираете замечания и отправляете файл, а получатель открывает PDF без аккаунта. Если команда ведет задачи в трекере или на онлайн-доске, приложите выгрузку туда. ПРИВАТНОСТЬ ПО УСТРОЙСТВУ 📌 Данные лежат на вашем устройстве. Без сервера и без аналитики. 📍 Сайт читается только по вашему действию: значок, сочетание клавиш или пункт меню. «Всегда разрешать» включается по желанию и отзывается. 📌 Значения полей форм, токены и секретные параметры URL маскируются в снятом HTML. 📍 Единственный сетевой запрос скачивает собственную таблицу стилей сайта без cookie, когда браузер скрывает ее правила. ВОПРОСЫ И ОТВЕТЫ Вопрос: Как сделать скриншот всей страницы сайта? Ответ: Нажмите на значок и выберите «Вся страница». Расширение прокрутит ее сверху донизу и склеит кадры в одно изображение. Вопрос: Можно ли отправить результат заказчику? Ответ: Да. Создайте отчет для заказчика, снимите и прокомментируйте страницы, затем выгрузите PDF или DOCX. Заказчик читает один файл. Вопрос: Подходит ли оно для проверки верстки? Ответ: Да. Снимайте блок: изображение и CSS сохраняются за один шаг. Задачи в трекере расширение не создает, приложите к задаче выгрузку. Вопрос: На каких сайтах работает? Ответ: На обычных сайтах, в том числе в разделах за логином. Служебные адреса chrome://, настройки и Chrome Web Store браузер закрывает для расширений. Вопрос: Можно ли оставить комментарий без скриншота? Ответ: Да. Захват текста и данных страницы сохраняет цитату, таблицу или заголовки вместе с комментарием. Сочетания клавиш открывают панель и снимают область, блок или текст. Для режима «Вся страница» сочетание назначается на chrome://extensions/shortcuts. Интерфейс на русском и английском.