Всем привет!
Все мы постоянно используем Chrome DevTools, но там так много фичей, что некоторые из них мы никогда не использовали и даже не замечали. В этой небольшой статье, я хочу поделиться интересными находками, которыми пользуюсь сам.
Возможно вы уже видели эти фичи и используете их на постоянной основе, а возможно это именно те фичи, которых вам так давно не хватало в вашей работе.
Погнали!
![Я сказал стартуем! Я сказал стартуем!](https://habrastorage.org/getpro/habr/upload_files/508/ba7/741/508ba7741aca42d396c188a5da33b3b1.jpg)
Понимание доступности с помощью Chrome DevTools
В крупных компаниях есть специальные люди или даже команды ответственные за доступность и работу с ней, однако что делать, если вы небольшая компания и хотите сделать ваш продукт чуточку лучше в плане доступности.
Chrome DevTools предоставляют вам много возможностей для работы с доступностью, вот некоторые из них:
1. Accessibility в Inspect Element
Начнем с Inspect Element, та кнопка, которую мы чаще всего используем при дебаге верстки нашего приложения.
Вы когда-нибудь замечали, что кроме информации о width/height/margin/padding/font-styles, там есть раздел Accessibility(я столько лет смотрел верстку с помощью инспектора и только недавно заметил, что там есть такой раздел), в котором есть следующие поля:
Contrast — значение контрастности текста(это кстати проблема номер 1 в плане доступности в интернете), у Google даже есть специальная обучалка, в которой они рассказывают о том, как исправить эту проблему и как ее обнаружить - тык. В этой же обучалке они рассказывают о том, какие значения минимально рекомендуемые - 3.0 и просто рекомендуемые - 4.5.
![Accessibility Contrast в числовом формате Accessibility Contrast в числовом формате](https://habrastorage.org/getpro/habr/upload_files/07f/cbe/ff8/07fcbeff897ea62c51bb8916a36246ad.png)
Кстати, если зайти в настройки Devtools —> Experiments —> Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ration and AA/AAA guidelines, то мы сможем увидеть контрастность в %.
![Accessibility Contrast в процентах Accessibility Contrast в процентах](https://habrastorage.org/getpro/habr/upload_files/0e5/969/ff5/0e5969ff55235dca94a6c53d1ab883df.png)
Name — это доступное имя (оно может быть текстом в теге, aria-атрибутом), текст который проговорит экранный диктор.
![Accessibility Name Accessibility Name](https://habrastorage.org/getpro/habr/upload_files/46d/c2e/c08/46dc2ec086c45db08ac2671a2292429b.png)
Role — ARIA роль текущего тега.
![Accessibility Role Accessibility Role](https://habrastorage.org/getpro/habr/upload_files/0d7/439/9a4/0d74399a4c2b556314eb142d66dd921c.png)
Keyboard-focusable — можно ли сфокусироваться на элементе с помощью клавиатуры.
![Accessibility Keyboard-focusable Accessibility Keyboard-focusable](https://habrastorage.org/getpro/habr/upload_files/823/0a7/add/8230a7addb6fefaaea115a92173aecfe.png)
2. Accessibility Tree
Дальше интереснее, если посмотреть на табы справа, то мы увидим довольно интересный таб под названием Accessibility.
![Accessibility Tab Accessibility Tab](https://habrastorage.org/getpro/habr/upload_files/26b/bdb/959/26bbdb9596b4379685b07afc3467d40d.png)
И что мы тут наблюдаем:
Выбирая любой элемент в инспекторе, мы увидим его семантическое дерево в Accessibility Tree, а также его свойства, которые важны в контексте семантики: aria-атрибуты, Role, contents.
![Accessibility Tree Accessibility Tree](https://habrastorage.org/getpro/habr/upload_files/4b6/3a2/31a/4b63a231a86951628c0c88cb40f400c0.png)
Accessibility Tree — экспериментальная фича, которая показывает всю семантику страницы. По сути мы можем увидеть наш DOM глазами скринридера, что довольно сильно упрощает жизнь при улучшении доступности.
Как включить: нажимаем галочку включить —> перезагружаем инструменты разработчика —> нажимаем на человечка в инспекторе и видим следующую картину: в нашем DOM осталась только семантически значимая разметка.
![Accessibility Tree Accessibility Tree](https://habrastorage.org/getpro/habr/upload_files/1ce/69a/d4b/1ce69ad4bc8e3c7bbc6ffaf6cbfca869.png)
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) — имитация неспособности воспринимать любой цвет, кроме оттенков серого.
![Emulations Emulations](https://habrastorage.org/getpro/habr/upload_files/de3/555/b0a/de3555b0aac8f1bbf0e2ef3606336461.gif)
4. Lighthouse accessibility audit
И последняя фишка по доступности о которой я расскажу — аудит доступности с помощью Lighthouse. В верхнем таб баре выбираем Lighthouse —> выбираем Mode —> выбираем Device —> выбираем в категориях только Accessibility —> нажимаем Analyze page load
![Lighthouse accessibility audit Lighthouse accessibility audit](https://habrastorage.org/getpro/habr/upload_files/12d/2fe/021/12d2fe021ca08b2bcee28debf607f215.png)
В результате получаем score in [0-100], а также определенные рекомендации по устранению проблем с доступностью.
N.B. Нужно помнить, что этот аудит проверяет только по некоторым заданным параметрам, что не гарантирует, что ваш сайт будет хорошо доступным даже при показателе 100, про метрики для оценки можно почитать тут.
![Lighthouse accessibility audit result Lighthouse accessibility audit result](https://habrastorage.org/getpro/habr/upload_files/b1b/700/3b3/b1b7003b3abbaeb72ea88d5190110421.png)
Подробнее про инструменты доступности в 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).
![Coverage process Coverage process](https://habrastorage.org/getpro/habr/upload_files/9b9/65f/bb9/9b965fbb96e5bde7d02f724d8c3e1f33.gif)
Получаем отчет о нашем сайте и видим сколько (Unused Bytes) и в каком файле (URL) неиспользуемого JS и CSS (Type) кода.
Также мы можем зайти внутрь файла и посмотреть какие конкретно функции/стили не используются(зеленым помечены используемые строки, красным неиспользуемые). Очень полезная штука, когда занимаешься оптимизацией приложения.
![Coverage result Coverage result](https://habrastorage.org/getpro/habr/upload_files/fdd/74a/454/fdd74a454a80a9606a89922285db2696.png)
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.
![CSS overview process CSS overview process](https://habrastorage.org/getpro/habr/upload_files/f79/621/e7e/f79621e7e5c7e12078c4206f871ce854.gif)
Получаем следующий отчет(со всеми параметрами, о которых я говорил ранее):
![CSS overview result CSS overview result](https://habrastorage.org/getpro/habr/upload_files/671/726/087/671726087fdf37403d03c99c794786d9.png)
Вкладка Console
Тут очень много разных фичей, расскажу лишь про 3, которыми сам пользуюсь (остальные можно почитать тут):
7. Редактирование всей страницы
document.designMode = "on"
— все элементы на странице становятся редактируемыми.
Безумно удобная фича для вашего дизайнера/копирайтера, если он хочет изменить текст, убрать картинку, поменять заголовок и посмотреть как это будет выглядеть на странице. Просто говорим ему прописать эту команду в консоли и наслаждаемся!
Также это полезная фича для создания рекламных картинок (можно без участия разработчика поменять текст чтобы смотрелось красиво).
![Можно редактировать любые текстовые поля/удалять картинки Можно редактировать любые текстовые поля/удалять картинки](https://habrastorage.org/getpro/habr/upload_files/b46/575/7b2/b465757b22a8401d24e89b002b32dbf4.gif)
8. Быстрый доступ к элементам из инспектора в консоли
$0, $1, $2, $3, $4
— можно быстро обратиться к элементу, который был выбран в инспекторе. $0
— последний выбранный элемент, $1
— предпоследний выбранный элемент и т.д.
![body - $0 body - $0](https://habrastorage.org/getpro/habr/upload_files/ad0/e2e/5e3/ad0e2e5e32c7f3961d39fd74bbddb872.png)
![Обращение по $0 Обращение по $0](https://habrastorage.org/getpro/habr/upload_files/4ce/5c7/aa9/4ce5c7aa97662d0af255b9a4abcec873.png)
9. Постоянно вычисляемые выражения
Live Expression — глазик сверху рядом с поиском. С помощью него можно создавать JavaScript выражения, которые будут вычисляться раз в 250ms и отображать вам результат, иногда очень полезная вещь для отладки.
![Live Expression Example Live Expression Example](https://habrastorage.org/getpro/habr/upload_files/ece/3ba/182/ece3ba18290e6cc86d83bb7297dc2211.gif)
Вкладка Network
10. Копирование запроса в любых форматах
Если нажать ПКМ на запрос, то можно скопировать его с Headers, Payload в виде cURL/PowerShell/fetch/Node.js fetch
. После этого его можно будет вставить, допустим в Postman, и отладить.
![Copy cURL Copy cURL](https://habrastorage.org/getpro/habr/upload_files/cdb/0fd/c10/cdb0fdc10fd5369b2521eca4d3e64e75.png)
11. Тестирование приложения при разной скорости интернета
С помощью этой фичи вы можете протестировать свое приложение в условиях слабого интернета (fast 3g/slow 3g/offline), а также создать свою конфигурацию.
![Change internet connection Change internet connection](https://habrastorage.org/getpro/habr/upload_files/0de/ac1/4bc/0deac14bc0a02e9a08b47fd103c3b73f.png)
Итого
В общем, в Chrome DevTools очень много различных фичей и настроек, я рассказал про несколько интересных и, как мне кажется, редко используемых возможностях. Если хотите почитать про все доступные фичи, вам в официальную документацию, удачи!
Если статья показалась вам интересной, то у меня есть Телеграм Канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.