— о чём статья: расширения, которые делают жизнь разработчика проще
— зачем читать: чтобы меньше беситься и не изобретать велосипед
— почему это важно: в 2025 браузер — это твоя IDE, только с мемами
Было плохо
Я заметил, что у меня браузер — это уже не просто «открыл сайт». Это:
- инспекция стилей
- проверка API
- дебаг SVG
- сравнение верстки с макетом
- заголовки, cookie, localStorage
- тесты форм, кнопок, цветов, адаптива
И вот в какой-то момент поймал себя на мысли: половину из этого я делаю вручную, по привычке. Хотя можно было нажать одну кнопку — и всё.
Так что я сел, пересмотрел все свои расширения, почистил хлам и оставил 10 штук, которые реально работают. Без фейковых пятизвёздочных «улучшайзеров» и «супероптимизаторов».
Пишу каждый день про новые технологии без лишнего шума. Забирай инсайды первым — в Telegram 🧠
1. Wappalyzer — шпион, который палит стэк сайта
Хочешь быстро понять, на чём сделан сайт?
Жмёшь и видишь: React, Next.js, Cloudflare, Laravel, jQuery (иногда, увы).
🎯 Удобно проверять конкурентов, фреймворки, CMS.
Бонус — сразу видишь, стоит ли лезть в DevTools вообще.
2. JSON Viewer Pro — читаемый JSON без боли
Если ты хоть раз открывал API-ответ в голом виде, то знаешь этот ад:
{"meta":{"user":{"data":{"id":4,"attributes":{"email":"... — и всё, до свидания.
С этим расширением JSON красиво подсвечен, сворачивается, открывается по узлам. Работает быстрее, чем встроенный в Chrome просмотр.
3. EditThisCookie — самый вменяемый способ редактировать куки
Зашёл на сайт, поставил тестовый токен, проверил, как работает авторизация. Или удалил куку, которая мешает — без танцев с DevTools.
👨🔧 Особенно удобно при тестировании OAuth, A/B-тестов, всяких тем с геолокацией.
4. ColorZilla — пипетка из мира мечты
Наведись на любой элемент, кликни — и получи hex. Или RGB. Или скопируй градиент.
🎨 Я ею пользуюсь даже вне фронта: берёшь цвет с чужого сайта, макета или картинки и вставляешь в Figma. Красота.
5. Clear Cache — кэш ушёл за секунду
Нет, не «очистить кэш в настройках Chrome», а одна кнопка. Всё, кэш сброшен.
Незаменимо, когда правишь статику, и браузер жрёт старую версию. Я её жму по 10 раз в день, особенно когда сижу в дев-сервере и браузер упирается.
6. WhatFont — шпион по шрифтам
Навёлся на заголовок — показало Inter Bold 18px. Красота.
Не надо копать в инспекторе, искать родителя, париться с наследованием.
📚 Полезно, если ты дизайнер, верстальщик или просто хочешь взять шрифт себе.
7. CSSViewer — минималистичный инспектор стилей
Навёлся на блок — и он показывает margin, padding, display, font, color.
Не заменяет DevTools, но если надо быстро глянуть, что не так с отступами — это must-have.
8. Dark Reader — не только про «тёмную тему»
Удивительно, но некоторые сайты до сих пор без dark mode.
Dark Reader не просто инвертирует, а аккуратно перекрашивает.
А ещё — удобный дебаг цветов и контрастов.
Проверял с Lighthouse — улучшает доступность на ура.
9. Dimensions — измеритель на экране
Показывает расстояние между элементами прямо на странице. Типа как линейка в Figma, только для браузера.
📐 Навёл курсор на кнопку — и сразу знаешь, сколько пикселей до заголовка.
Полезно, когда нужно сверить верстку с макетом или понять, почему всё поехало.
Это часть большой рубрики. Продолжение будет жарким — подпишись на телегу, чтобы не проспать 🔥
Можно и без расширений, но нафига?
Да, всё это можно сделать руками, через DevTools.
Но, блин, зачем, если можно одним кликом?
Расширения — это как горячие клавиши:
ты не обязан ими пользоваться, но если начал — уже не хочешь без них.
Я реально стал работать быстрее.
Меньше бесился, меньше отвлекался, больше делал.
На всякий случай: где ставить?
Все эти расширения:
- работают в Chrome
- работают в Яндекс Браузере (да, нормально ставятся)
- и почти все работают в Edge
❗ Не забудь проверить разрешения: иногда расширения требуют доступ ко всем сайтам — и это норм, но лучше включать "по клику".
В Telegram почти каждый день — такие же разборы, фишки и утечки. Присоединяйся 💬
Короче, штуки годные. Уже пользуюсь.
Если пробовал что-то своё — напиши. Сравним.