11 полезных фичей Chrome DevTools
Всем привет!
Все мы постоянно используем 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.
Accessibility Contrast в числовом формате
Кстати, если зайти в настройки Devtools —> Experiments —> Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ration and AA/AAA guidelines, то мы сможем увидеть контрастность в %.
Accessibility Contrast в процентах
Name — это доступное имя (оно может быть текстом в теге, aria-атрибутом), текст который проговорит экранный диктор.
Accessibility Name
Accessibility Role
Accessibility Keyboard-focusable
2. Accessibility Tree
Дальше интереснее, если посмотреть на табы справа, то мы увидим довольно интересный таб под названием Accessibility.
Accessibility Tab
И что мы тут наблюдаем:
Выбирая любой элемент в инспекторе, мы увидим его семантическое дерево в Accessibility Tree, а также его свойства, которые важны в контексте семантики: aria-атрибуты, Role, contents.
Accessibility Tree
Accessibility Tree — экспериментальная фича, которая показывает всю семантику страницы. По сути мы можем увидеть наш DOM глазами скринридера, что довольно сильно упрощает жизнь при улучшении доступности.
Как включить: нажимаем галочку включить —> перезагружаем инструменты разработчика —> нажимаем на человечка в инспекторе и видим следующую картину: в нашем DOM осталась только семантически значимая разметка.
Accessibility Tree
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
4. Lighthouse accessibility audit
И последняя фишка по доступности о которой я расскажу — аудит доступности с помощью Lighthouse. В верхнем таб баре выбираем Lighthouse —> выбираем Mode —> выбираем Device —> выбираем в категориях только Accessibility —> нажимаем Analyze page load
Lighthouse accessibility audit
В результате получаем score in [0–100], а также определенные рекомендации по устранению проблем с доступностью.
N.B. Нужно помнить, что этот аудит проверяет только по некоторым заданным параметрам, что не гарантирует, что ваш сайт будет хорошо доступным даже при показателе 100, про метрики для оценки можно почитать тут.
Lighthouse accessibility audit result
Подробнее про инструменты доступности в Chrome можно почитать по следующим ссылкам: тык, тык1, тык2.
Анализ производительности и общего состояния приложения
Помимо всем известных инструментов: Perfomance, Memory, Lighthouse, есть еще два менее распространенных, но не менее полезных:
5. Coverage JS + CSS кода
У Chrome DevTools есть очень удобная фича — Coverage. Она позволяет посмотреть какой код используется, а какой нет.
Запустить Coverage можно следующим образом: DevTools —> cmd (ctrl) + shift + p —> Show Coverage (Drawer) —> жмякаем на record button.
Coverage process
Получаем отчет о нашем сайте и видим сколько (Unused Bytes) и в каком файле (URL) неиспользуемого JS и CSS (Type) кода.
Также мы можем зайти внутрь файла и посмотреть какие конкретно функции/стили не используются (зеленым помечены используемые строки, красным неиспользуемые). Очень полезная штука, когда занимаешься оптимизацией приложения.
Coverage result
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 result
Вкладка Console
Тут очень много разных фичей, расскажу лишь про 3, которыми сам пользуюсь (остальные можно почитать тут):
7. Редактирование всей страницы
document.designMode = "on" — все элементы на странице становятся редактируемыми.
Безумно удобная фича для вашего дизайнера/копирайтера, если он хочет изменить текст, убрать картинку, поменять заголовок и посмотреть как это будет выглядеть на странице. Просто говорим ему прописать эту команду в консоли и наслаждаемся!
Также это полезная фича для создания рекламных картинок (можно без участия разработчика поменять текст чтобы смотрелось красиво).
Можно редактировать любые текстовые поля/удалять картинки
8. Быстрый доступ к элементам из инспектора в консоли
$0, $1, $2, $3, $4 — можно быстро обратиться к элементу, который был выбран в инспекторе. $0 — последний выбранный элемент, $1 — предпоследний выбранный элемент и т.д.
body — $0
Обращение по $0
9. Постоянно вычисляемые выражения
Live Expression — глазик сверху рядом с поиском. С помощью него можно создавать JavaScript выражения, которые будут вычисляться раз в 250ms и отображать вам результат, иногда очень полезная вещь для отладки.
Live Expression Example
Вкладка Network
10. Копирование запроса в любых форматах
Если нажать ПКМ на запрос, то можно скопировать его с Headers, Payload в виде cURL/PowerShell/fetch/Node.js fetch. После этого его можно будет вставить, допустим в Postman, и отладить.
Copy cURL
11. Тестирование приложения при разной скорости интернета
С помощью этой фичи вы можете протестировать свое приложение в условиях слабого интернета (fast 3g/slow 3g/offline), а также создать свою конфигурацию.
Change internet connection
Итого
DevTools — Слуга Народа
В общем, в Chrome DevTools очень много различных фичей и настроек, я рассказал про несколько интересных и, как мне кажется, редко используемых возможностях.
Если хотите почитать про все доступные фичи, вам в официальную документацию, удачи!
Если у вас есть интересные киллер фичи, которые вы постоянно юзаете, но при этом они не очень распространены, поделитесь в комментариях!
Если статья показалась вам интересной, то у меня есть Телеграм Канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.
