Расширения Chrome, которые веб-разработчики обычно оставляют надолго, делятся на пять групп: инструменты для фреймворков (React, Vue, Angular, Redux), проверка доступности (axe DevTools, WAVE), инспекторы страниц (Web Developer, WhatFont, ColorZilla, Wappalyzer), инструмент для просмотра мобильной версии и несколько утилит. Ставьте только то, чем пользуетесь каждую неделю: каждое расширение получает доступ к страницам и может замедлять браузер. Ниже разобрано, что каждое из них умеет такого, чего нет в Chrome DevTools.
Сразу оговоримся: Mobile View Extension, которое упомянуто в разделе про мобильный вид, делаем мы. Остальные расширения выпускают другие разработчики, и они попали в список потому, что закрывают понятную задачу.
Что уже умеет Chrome DevTools
Прежде чем что-то ставить, полезно знать, что встроено в браузер. В Chrome DevTools есть инспектор элементов и CSS, отладчик JavaScript, запись сети и производительности, эмуляция мобильных устройств (инструкция), подмена user agent (инструкция), аудит Lighthouse (инструкция), пипетка и проверка контраста в панели Styles, а также CSS Overview. Многие старые расширения «для веб-разработчика» дублируют эти функции. Обзор встроенных панелей есть в нашем руководстве по Chrome DevTools.
Инструменты для фреймворков
| Расширение | Разработчик | Что добавляет |
|---|---|---|
| React Developer Tools | Meta (команда React) | Панели Components и Profiler: просмотр props, state и хуков, поиск медленных рендеров |
| Vue.js devtools | Команда Vue | Дерево компонентов, состояние Pinia, роутер и таймлайн для Vue-приложений |
| Angular DevTools | Команда Angular | Обозреватель компонентов и профайлер change detection |
| Redux DevTools | Мейнтейнеры Redux | Журнал экшенов, diff состояния и time-travel отладка для Redux и совместимых хранилищ |
Установите то, что подходит под ваш фреймворк. Эти расширения включаются только на страницах, где этот фреймворк используется.
Проверка доступности
axe DevTools (Deque) добавляет в DevTools панель, которая ищет на странице нарушения WCAG: пропущенные подписи, низкий контраст, ошибки ARIA. К каждой проблеме есть объяснение и ссылка на правило. Бесплатной версии хватает для автоматических проверок.
WAVE (WebAIM) рисует значки прямо поверх страницы и показывает, где находится каждая ошибка, предупреждение и структурный элемент. Им особенно удобно объяснять проблемы дизайнерам и редакторам.
Автоматические проверки находят только часть проблем с доступностью. Дополняйте их проверкой с клавиатуры и скринридером.
Инспекторы страниц
Web Developer (Chris Pederick) существует много лет. Это панель с сотнями мелких инструментов: отключить CSS или JavaScript, обвести элементы, показать alt у картинок, посмотреть параметры форм и многое другое. Большая часть этого есть где-то в DevTools, но здесь всё доступно в один клик.
WhatFont определяет шрифт текста под курсором, включая запасной шрифт, который реально применился.
ColorZilla добавляет пипетку, которой можно взять цвет из любого места страницы, а ещё историю цветов и генератор градиентов.
Wappalyzer показывает технологии сайта: CMS, фреймворки, аналитику, хостинг. Пригодится, чтобы изучить конкурентов или понять стек клиента до начала проекта.
Мобильный вид и проверка адаптивности
Режим устройства в DevTools мощный, но на каждой вкладке его нужно включать в несколько шагов, и он занимает большую часть экрана. Если вы смотрите мобильную вёрстку много раз в день, отдельное расширение экономит время.
Mobile View Extension перезагружает текущую вкладку внутри рамки телефона или планшета с user agent, client hints, размером экрана и плотностью пикселей конкретного устройства. Можно выбрать готовые профили Apple и Android или задать своё разрешение, повернуть экран в альбомную ориентацию и сохранить PNG-скриншот вместе с рамкой. Расширение работает на localhost, не выключается при переходах по страницам и не собирает данные о просмотренных сайтах. Ограничения у него те же, что у большинства превью внутри браузера: управление мышью, без touch-событий, а медиазапросы hover и pointer эмулируются не полностью. Подробное сравнение есть в статье мобильный симулятор в виде расширения или DevTools.
Утилиты
Просмотрщик JSON форматирует сырой JSON в сворачиваемое дерево, когда вы открываете адрес API. По умолчанию Chrome показывает его простым текстом.
Переключатель user agent нужен, если вы часто проверяете определение устройства или код под конкретные браузеры. Сначала прочитайте, что делает user agent switcher: для проверки мобильной вёрстки лучше подходит инструмент мобильного просмотра.
Как понять, что расширение безопасно
Расширения для разработчиков часто просят доступ ко всем сайтам. Это значит, что они могут читать и менять любую открытую страницу, включая админки и почту. Перед установкой:
- Проверьте издателя. Инструменты фреймворка должна выпускать команда самого фреймворка.
- Посмотрите разрешения на странице в Chrome Web Store. Определителю шрифтов не нужен доступ к вашим загрузкам.
- Прочитайте политику конфиденциальности. В ней должно быть сказано, что собирается. Для большинства инструментов разработчика правильный ответ: ничего.
- Обратите внимание на дату последнего обновления. Заброшенные расширения ломаются после обновлений Chrome и не получают исправлений безопасности.
- Следите за сменой владельца. Популярные расширения иногда продают, после чего они начинают вставлять рекламу. Если поведение расширения внезапно изменилось, удалите его.
Если хотите держать инструменты разработчика отдельно от личного браузинга, заведите для работы отдельный профиль Chrome.
Минимальный стартовый набор
Если настраиваете новый компьютер, начните с этого:
- инструменты для вашего фреймворка;
- axe DevTools или WAVE;
- расширение для просмотра мобильной версии;
- WhatFont или ColorZilla, если много работаете с дизайном.
Остальное добавляйте, только когда заметите, что раз за разом делаете вручную то, что расширение сделало бы за вас.
Частые вопросы
Какое расширение Chrome самое полезное для веб-разработчика?
Инструменты для фреймворка, на котором вы пишете: в Chrome их ничто не заменит. Следом по пользе для большинства фронтенд-разработчиков идут проверка доступности и инструмент мобильного просмотра.
Замедляют ли расширения браузер?
Каждое расширение занимает память и может запускать скрипты на каждой странице. Несколько качественных расширений почти не влияют на скорость, а десятки уже заметно тормозят загрузку страниц и DevTools. Отключайте те, которыми не пользуетесь.
Lighthouse это расширение?
Lighthouse встроен в Chrome DevTools как отдельная панель. Существует и отдельное расширение Lighthouse, но обычно его запускают из DevTools.