Привет!
Сегодня хочу рассказать про несколько фишек 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-канале:
https://t.me/baskovbuilds
Там делюсь:
• мысли про IT и жизнь в Европе
• опытом запуска своих SaaS
• AI как для жизни, так и для разработчиков