Всем привет!
Все мы постоянно используем Chrome DevTools, но там так много фичей, что некоторые из них мы никогда не использовали и даже не замечали. В этой небольшой статье, я хочу поделиться интересными находками, которыми пользуюсь сам.
Возможно вы уже видели эти фичи и используете их на постоянной основе, а возможно это именно те фичи, которых вам так давно не хватало в вашей работе.
Погнали!
Понимание доступности с помощью Chrome DevTools
В крупных компаниях есть специальные люди или даже команды ответственные за доступность и работу с ней, однако что делать, если вы небольшая компания и хотите сделать ваш продукт чуточку лучше в плане доступности.
Chrome DevTools предоставляют вам много возможностей для работы с доступностью, вот некоторые из них:
1. Accessibility в Inspect Element
Начнем с Inspect Element, та кнопка, которую мы чаще всего используем при дебаге верстки нашего приложения.
Вы когда-нибудь замечали, что кроме информации о width/height/margin/padding/font-styles, там есть раздел Accessibility(я столько лет смотрел верстку с помощью инспектора и только недавно заметил, что там есть такой раздел), в котором есть следующие поля:
Contrast — значение контрастности текста(это кстати проблема номер 1 в плане доступности в интернете), у Google даже есть специальная обучалка, в которой они рассказывают о том, как исправить эту проблему и как ее обнаружить - тык. В этой же обучалке они рассказывают о том, какие значения минимально рекомендуемые - 3.0 и просто рекомендуемые - 4.5.
Кстати, если зайти в настройки Devtools —> Experiments —> Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ration and AA/AAA guidelines, то мы сможем увидеть контрастность в %.
Name — это доступное имя (оно может быть текстом в теге, aria-атрибутом), текст который проговорит экранный диктор.
Role — ARIA роль текущего тега.
Keyboard-focusable — можно ли сфокусироваться на элементе с помощью клавиатуры.
2. Accessibility Tree
Дальше интереснее, если посмотреть на табы справа, то мы увидим довольно интересный таб под названием Accessibility.
И что мы тут наблюдаем:
Выбирая любой элемент в инспекторе, мы увидим его семантическое дерево в Accessibility Tree, а также его свойства, которые важны в контексте семантики: aria-атрибуты, Role, contents.
Accessibility Tree — экспериментальная фича, которая показывает всю семантику страницы. По сути мы можем увидеть наш DOM глазами скринридера, что довольно сильно упрощает жизнь при улучшении доступности.
Как включить: нажимаем галочку включить —> перезагружаем инструменты разработчика —> нажимаем на человечка в инспекторе и видим следующую картину: в нашем DOM осталась только семантически значимая разметка.
3. Имитация проблем со зрением
С помощью Emulate vision deficiencies (DevTools —> Show Rendering —> Emulate vision deficiencies), мы можем сымитировать, некоторые виды проблем со зрением и узнать, как наш сайт будет выглядеть при следующих проблемах:
Blurred Vision — имитация нечеткого зрения.
Reduced Contrast — имитация ухудшения контрастной чувствительности.
Protanopia (no red) — имитация неспособности воспринимать любой красный цвет.
Deuteranopia (no green) — имитация неспособности воспринимать любой зеленый цвет.
Tritanopia (no blue) — имитация неспособности воспринимать любой синий цвет.
Achromatopsia (no color) — имитация неспособности воспринимать любой цвет, кроме оттенков серого.
4. Lighthouse accessibility audit
И последняя фишка по доступности о которой я расскажу — аудит доступности с помощью Lighthouse. В верхнем таб баре выбираем Lighthouse —> выбираем Mode —> выбираем Device —> выбираем в категориях только Accessibility —> нажимаем Analyze page load
В результате получаем score in [0-100], а также определенные рекомендации по устранению проблем с доступностью.
N.B. Нужно помнить, что этот аудит проверяет только по некоторым заданным параметрам, что не гарантирует, что ваш сайт будет хорошо доступным даже при показателе 100, про метрики для оценки можно почитать тут.
Подробнее про инструменты доступности в Chrome можно почитать по следующим ссылкам: тык, тык1, тык2.
Анализ производительности и общего состояния приложения
Помимо всем известных инструментов: Perfomance, Memory, Lighthouse, есть еще два менее распространенных, но не менее полезных:
5. Coverage JS + CSS кода
У Chrome DevTools есть очень удобная фича — Coverage. Она позволяет посмотреть какой код используется, а какой нет.
Запустить Coverage можно следующим образом: DevTools —> cmd(ctrl) + shift + p —> Show Coverage (Drawer) —> жмякаем на record button(у кого-то Capture overview).
Получаем отчет о нашем сайте и видим сколько (Unused Bytes) и в каком файле (URL) неиспользуемого JS и CSS (Type) кода.
Также мы можем зайти внутрь файла и посмотреть какие конкретно функции/стили не используются(зеленым помечены используемые строки, красным неиспользуемые). Очень полезная штука, когда занимаешься оптимизацией приложения.
6. CSS overview
С помощью этой фичи можно увидеть отчет по вашему CSS коду. Там указываются все цвета используемые на странице для background/color/border-color, все проблемы с контрастностью, какие font-size/line-height и @media есть на странице.
Запустить CSS overview можно следующим образом: DevTools —> cmd(ctrl) + shift + p —> Show CSS overview (Panel) —> жмякаем на click record button.
Получаем следующий отчет(со всеми параметрами, о которых я говорил ранее):
Вкладка Console
Тут очень много разных фичей, расскажу лишь про 3, которыми сам пользуюсь (остальные можно почитать тут):
7. Редактирование всей страницы
document.designMode = "on" — все элементы на странице становятся редактируемыми.
Безумно удобная фича для вашего дизайнера/копирайтера, если он хочет изменить текст, убрать картинку, поменять заголовок и посмотреть как это будет выглядеть на странице. Просто говорим ему прописать эту команду в консоли и наслаждаемся!
Также это полезная фича для создания рекламных картинок (можно без участия разработчика поменять текст чтобы смотрелось красиво).
8. Быстрый доступ к элементам из инспектора в консоли
$0, $1, $2, $3, $4 — можно быстро обратиться к элементу, который был выбран в инспекторе. $0 — последний выбранный элемент, $1 — предпоследний выбранный элемент и т.д.
9. Постоянно вычисляемые выражения
Live Expression — глазик сверху рядом с поиском. С помощью него можно создавать JavaScript выражения, которые будут вычисляться раз в 250ms и отображать вам результат, иногда очень полезная вещь для отладки.
Вкладка Network
10. Копирование запроса в любых форматах
Если нажать ПКМ на запрос, то можно скопировать его с Headers, Payload в виде cURL/PowerShell/fetch/Node.js fetch. После этого его можно будет вставить, допустим в Postman, и отладить.
11. Тестирование приложения при разной скорости интернета
С помощью этой фичи вы можете протестировать свое приложение в условиях слабого интернета (fast 3g/slow 3g/offline), а также создать свою конфигурацию.
Итого
В общем, в Chrome DevTools очень много различных фичей и настроек, я рассказал про несколько интересных и, как мне кажется, редко используемых возможностях. Если хотите почитать про все доступные фичи, вам в официальную документацию, удачи!
Если статья показалась вам интересной, то у меня есть Телеграм Канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.
