3 фичи DevTools в Chrome, которые экономят время разработчику
Привет!
Сегодня хочу рассказать про несколько фишек DevTools в Chrome, которые могут сэкономить кучу времени в разработке.
Многие из них спрятаны где-то глубоко в интерфейсе, поэтому многие разработчики просто не знают, что они существуют.
1. Diff для CSS свойств
Довольно старая, но очень удобная функция.
Она позволяет не вспоминать после настройки CSS в браузере "а что именно я поменял", а сразу увидеть изменения.
DevTools показывает diff прямо в панели стилей и можно быстро перенести изменения в код.
Как открыть:
В дев тулзах: Cmd + Shift + P → Show Coverage
Очень полезно, когда долго крутишь стили и потом нужно аккуратно перенести их в проект.
2. Имитация слабого устройства (CPU Throttling)
Практически все знают, что можно замедлить сеть черезNetwork → Throttling. Но далеко не все знают, что можно эмулировать слабое железо. Например бюджетный Android телефон.
Как включить:
Performance → Settings → CPU
Там можно выбрать готовые пресеты или создать свои.
Это помогает проверить лаги интерфейса, тяжелые анимации, проблемы производительности до того, как это увидят пользователи.
3. Coverage — поиск неиспользуемого CSS и JS
DevTools умеет показывать какая часть CSS и JavaScript действительно используется на странице. Это очень полезно при оптимизации.
Можно быстро понять:
- сколько CSS реально используется
- сколько кода просто лежит мертвым грузом
- какие библиотеки грузятся зря
Как открыть:
В дев тулзах: Cmd + Shift + P → Show Coverage
После запуска покажет процент используемого кода. Иногда можно найти очень много лишнего CSS.
4. Бонус — блокировка отдельных запросов
Можно заблокировать определенный ресурс и посмотреть, как сайт ведет себя без него.
Например:
- если не загрузился CDN
- если API не отвечает
- если пропала картинка
Как сделать:
- Открываем Network
- ПКМ по запросу
- Block request или Throttle request
Можно заблокировать конкретный запрос или целый домен. Удобный способ протестировать краевые кейсы, которые редко проверяют.
На сегодня всё.
Если тема IT, фронтенда, AI и SaaS вам интересна — я пишу об этом в Telegram-канале:
Там делюсь:
• мысли про IT и жизнь в Европе
• опытом запуска своих SaaS
• AI как для жизни, так и для разработчиков