Chrome DevTools - Coverage, Paint Flashing, Console Levels
✏️ Продолжаем разбирать малоизвестные фишки DevTools: обнаружение неиспользуемого кода (coverage), скриншот элемента (capture node screenshot), уровни консоли (console levels), имитация замедления скорости сети (network throttling), индикация перерисовок (paint flashing).
🔴 Timeline:
▶ 00:00 | Введение
▶ 00:10 | Обнаружение неиспользуемого кода (coverage)
▶ 02:53 | Скриншот элемента (capture node screenshot)
▶ 03:22 | Уровни консоли (console levels)
▶ 04:59 | Имитация замедления скорости сети (network throttling)
▶ 05:45 | Индикация перерисовок (paint flashing)
▶ 06:20 | Выводы
📚 Полезные ссылки:
➖ Coverage: developer.chrome.com/docs/dev...
➖ Capture node screenshot: developer.chrome.com/blog/new...
➖ Console levels: developer.chrome.com/docs/dev...
➖ Network throttling: developer.chrome.com/docs/dev...
➖ Paint flashing: developer.chrome.com/docs/dev...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #devtools
Пікірлер: 16
Спасибо. Консоль дебаг привнесу в рабочий процесс с понедельника) Подсветка перерисовок - вообще пушка) Снеиспользованным кодом надо поэкспериментировать в реакт приложении
Очень информативно, надо пробовать использовать
Вот Paint Flashing прям вообще топ, очень нужная, но спрятанная вещь.
очень круто, спасибо за контент
Пушечка!!!
Офигенно! Насколько неиспользуемые скрипты и стили нагружают страницу и уменьшают скорость загрузки?
@AleksanderLamkov
8 ай бұрын
Сложно сказать. Всё зависит от их объема и от скорости интернет-соединения. Медиаресурсы, стили и скрипты - это основные ресурсы страницы, поэтому чем их меньше, чем они легче, тем лучше для конечного пользователя.
@alexb.2616
8 ай бұрын
Понято
Привет, по улучшению показателей pagespeed сделаешь видео?
@AleksanderLamkov
10 ай бұрын
Привет! Думаю да, но не в рамках контента про DevTools. Тут нужен полноценный гайд с рекомендациями. За идею спасибо!
Coverage сложно будет обрабатывать и репортить, со стороны QA Наверное, это должен сам разработчик делать
Эх, еще б на русском названия - ни Coverage, ни Paint Flashing не находит при русскоязычном интерфейсе.
@AleksanderLamkov
10 ай бұрын
Я бы посоветовал на английский интерфейс все же перейти. В разработке сложно без базового знания языка, к нему нужно привыкать.
@Vorono4ka
10 ай бұрын
coverage - покрытие, paint flashing - рисование вспышек Если планируете использовать русские названия, то используйте ещё переводчик. Думаю найти хотя с примерным переводом уже возможно
Огонь 🔥
Весьма полезное видео, благодарю! В подаче материала можно еще немного улучшить произношение ключевых английских слов, но это уже не очень важно, и так всё отлично! В разделе про вывод инфы в консоль, вспомнилась неочевидная фича про добавление CSS стилей в выводимый текст, типа console.log('%cHello world!', 'color: green;'), вдруг кому-то интересно будет. Paint Flashing - огонь!