Как снять элемент
- Нажмите значок SiteAnnotation на панели инструментов Chrome, чтобы открыть боковую панель рядом со страницей.
- Нажмите Блок, или Alt+Shift+E, или щелкните правой кнопкой по странице и выберите Блок.
- Ведите указатель по странице. Элемент под ним получает рамку и подпись с селектором и размером.
- Уточните выбор стрелками: ↑ берет родительский элемент, ↓ возвращает к меньшему. Enter или щелчок выбирают, Esc отменяет.
- Просмотрите CSS-правила в новом пункте, снимите галочки с ненужных, добавьте комментарий и нажмите Добавить в отчет.
Что хранится в пункте
| Поле | Что сохраняется |
|---|---|
| Скриншот | Только элемент, склеенный из нескольких экранов, если он выше окна |
| HTML | Внешний HTML элемента до 50 КБ, значения полей форм и токены замаскированы |
| Селектор и XPath | CSS-селектор и XPath, по которым элемент находится на странице |
| CSS-правила | Все правила, которые применяются к элементу, в порядке каскада |
| Страница | Адрес, заголовок, время, размер окна и версия Chrome |
| Комментарий | Ваша заметка |
Как собираются CSS-правила
Это те же правила, что показывает вкладка Styles в Chrome DevTools для этого элемента, и в том же порядке. У каждого правила видны:
- селектор и объявления;
- откуда правило: файл таблицы стилей или блок
<style>на странице; - условия
@media, под которыми оно стоит.
Правила для состояний вроде :hover, :focus и :active собираются отдельной группой: в момент щелчка они не действуют, но часто именно из-за них пишут баг-репорт.
Когда сайт отдает таблицу стилей с другого домена, Chrome скрывает ее правила от расширений. Тогда SiteAnnotation скачивает эту таблицу еще раз, без cookie, и читает правила из копии. Больше ничего никуда не отправляется.
Уберите лишнее
У кнопки на большом сайте может быть 30 правил, и большая часть из них сбросы и переменные темы. Снимите галочки с ненужных, и в отчет попадут только оставленные правила.
Разработчик, который откроет отчет, увидит, о каком элементе речь, как он выглядит и какой CSS сделал его таким, не открывая DevTools и не воспроизводя страницу.
В отчете
Разметьте скриншот элемента в редакторе: разметка скриншотов. Если важен контекст всей страницы, добавьте рядом с элементом скриншот всей страницы. HTML и CSS попадают во все форматы выгрузки. Что попадает в каждый формат.
Как это выглядит в готовом отчете: в шаблоне и примере баг-репорта сломанная кнопка снята блоком.
Ограничения
- Iframe выбирается одним элементом: вы получаете фрейм целиком, но не элементы внутри него.
- Элементы внутри Shadow DOM, открытого и закрытого, выбираются.
- HTML длиннее 50 КБ обрезается, и пункт об этом сообщает.
- Chrome не пускает расширения на страницы
chrome://, в Chrome Web Store и во встроенный просмотрщик PDF. Какие страницы недоступны.