Фишки Chrome DevTools, о которых ты не знал - CSS Overview, Accessibility tree, DOM Breakpoints

✏️ Разбираем необычные малоизвестные фишки DevTools: CSS Overview, Accessibility tree, DOM Breakpoints, Live Expressions и Frame rendering stats.
🔴 Timeline:
▶ 00:00​ | Введение
▶ 00:11​ | CSS Overview
▶ 03:08​ | Accessibility tree
▶ 05:10​ | DOM Breakpoints
▶ 06:58​ | Live Expressions
▶ 07:46​ | FPS (frame rendering stats)
▶ 08:42​ | Выводы
📚 Полезные ссылки:
➖ CSS Overview: developer.chrome.com/docs/dev...
➖ Accessibility tree: developer.chrome.com/docs/dev...
➖ DOM Breakpoints: developer.chrome.com/docs/dev...
➖ Live Expressions: developer.chrome.com/docs/dev...
➖ Frame rendering stats: 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

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@user-ml5dv2zm8r]

Отлично получается образовательный контент, давай еще!

[@alexey5174]

Открывал видео с мыслью, что сейчас "узнаю" как изменять dom элементы, копировать cURL запроса или еще какую банальщину. Был приятно удивлён такими фишками!

[@Ivanfwit]

это было интересно, мне как новичку особенно первые две темы, чтобы удобно смотреть контраст цветов, проверять шрифты, не используемые стили и смотреть дерево доступности

[@Fisheries-Union4]

Александр ты молодец, продолжай заниматься, очень хорошая подача!

[@alexb.2616]

Отличная рубрика! Для тех, кто не понял - на 5:40 "СПА приложение" - Single Page Application.

[@evgenyyakushenko4636]

Очень круто! Хочется еще подобных видео!

[@REUTYO]

огонь! крайне полезная рубрика!

[@master8920]

То самое чувство когда покупал ПК не для игр. Но даже в браузере меня достаёт FPS 😅 Благодарю, попробую в дальнейшем пользоваться 🤝

[@user-qi4yl1go2b]

Спасибо тебе огромное! Твои видео это просто находка, продолжай снимать

[@user-md5mw1tp3e]

Спасибо! Это просто шок-контент) Особенно с брекпоинтом на элемент

[@dmitriikulbaka1862]

Открыл по новой DevTool;s для себя. Огроменный респект за труды!

[@ilya10rus]

Было очень полезно, про то как скрин ридеры читают сайт особенно, потому-что понял, что ничего не понял, пробел однако, буду пересматривать) Спасибо😊

[@AleksanderLamkov]

Привет! Спасибо за фидбек :) По поводу скринридеров - посмотри на канале мини-курс по цифровой доступности: kzbin.info/aero/PL0MUAHwery4r4gCA3AOtHgArM_UOb2QUV Найдешь для себя много нового в плане работы скринридера :)

[@smotritelyoutube]

Пушка! Лайк

[@AliceWonder984]

Снимите ещё продолжение, очень полезные фишки 👍

[@user-en4cj3dn9p]

Спасибо за информацию. Было бы полезно узнать больше о фишках devTools

[@bibo4shot]

кайф, пойду баги репортить, спасибо

[@user-vk4si1oz7w]

Я поставил 666 лайк! Контент - бомба! Я уже 5 лет фронтоном занимаюсь, но некоторые не знал! Спасибо!

[@SabatonShip]

Спасибо

[@durko_o]

Продолжай в том же духе, подача материала отличная!

[@user-pu9wy3bt1r]

А это даже мне интересно было послушать.)

[@Vladislav1449]

От души спс

[@ukraine1514]

Спасибо 👍

[@virtuoz-ru]

Благодарю. Ничего этого не знал.

[@dsalodki]

Не скажу что знал, но я фулстек, мне вёрстка не всегда сложная попадается. Может и пригодится

[@lenurabdiramanov8055]

Насчёт наведения вопрос остался. Я так полагаю сейчас наведение и показ тултипа реализовано через JS, но ведь у нас есть во вкладке elements кнопка :hov, где указаны все состояние элемента. Если выбрать hover, то мы сможем отследить состояние наведении кнопки и показать тултипа для его анализа? Через CSS она все ок отрабатывает, а что насчёт JS? А так крутые фишки, побольше фишек о вебе 😊

[@AleksanderLamkov]

Эффект наведения hover в CSS и события mouseenter / mouseout в JS - это разные вещи и отследить JS-логику через панель ":hov" не получится.

[@bambalbino]

Лайк, конечно, но всё-таки это 5 фишек о которых я знал.

[@mihinov]

Ты не знаешь как повысить количество кадров в секунду в Chrome? У меня по умолчанию 60, но видеокарта, процессор и оперативки готова работать на 144/120, у меня монитор 144 герца. Не нашёл в интернете слов об этом

[@AleksanderLamkov]

Привет! В гугле по запросу «chrome limit fps» есть парочку тем, там что-то с флагами на ярлыке запуска хрома сделать нужно, чтобы лимит снять.

[@mihinov]

@@AleksanderLamkov да, у меня ничего не работает :D

[@oleksandrdemchenko482]

++

[@dlazder3937]

Я не разработчик но о больше половине знал. Дерево доступности это неинтересно и для зануд, ну ладно. Про живые выражения тоже не знал, это поинтереснее. DOM брейкпоинты это интересно но ведь можно дать состояние hover через вкладку стилей? Или это только для css работает?

[@AleksanderLamkov]

Верно, так будет работать только для CSS. Если разметка генерируется через JS, появляется в DOM при маусовере и удаляется при маусауте, то только брейкпоинт поможет проинспектить элемент.

[@user-hi6fw1bm2x]

@@AleksanderLamkov да и в целом это не только для визуальной отладки. Вот например у меня есть довольно костыльное решение когда скрипт добавляет в спрятанную ноду контент который потом будет выведен. И теперь я могу отлавливать это немного раньше чем до того как я узнал об этой фиче. Вотчи опять же, вообще ни разу не использовал эту кнопку с глазом, а теперь, походу, будет моим чуть ли не основным инструментом.

[@AleksanderLamkov]

@@user-hi6fw1bm2x Круто! Рад, что эти штуки оказались вам полезны :) До возникновения идеи этого видоса и рубрики в целом была мысль "да что там не знать, наверняка каждый разраб уже протыкал весь функционал", но оказывается нет, малоизвестных нюансов просто море...

[@Vanterkraft]

Пример с использованием дебагера и breakpoints не слишком удачный, ибо можно повесить класс hover на элемент через DevTools, но в каких-то более сложных вещах или анимациях может быть полезно

[@AleksanderLamkov]

Увы, так, как вы пишете, сделать не получится. Эффект наведения от CSS-псевдокласса состояния hover и кастомный эффект динамически появляющегося / удаляющегося элемента после событий mouseover / mouseout - разные вещи. Механика, которую я показал, часто встречается в SPA приложениях: попробуйте взять условный компонент тултипа / поповера из MUI или AntDesign библиотеки, а затем проинспектируйте разметку появляющегося элемента. Если библиотека не опирается на hover-состояние из CSS (а так оно в большинстве случаев), то тут только брейкпоинт спасет, если нужен серьёзный анализ элемента.

[@Ivan_Killin]

Саша, зачем мне твоя голова в отдельном окне?

[@AleksanderLamkov]

Потому что мой канал - не набор скринкастов-туториалов с закадровым голосом. Текущий формат меня полностью устраивает.

[@Ivan_Killin]

@@AleksanderLamkov Да, на здоровье. Только, зачем? Все же смотрят на экран, а не на голову.

[@alexb.2616]

@@Ivan_Killin, мне и на реакцию автора интересно посмотреть.

[@Ivan_Killin]

@@alexb.2616 Что ты там хочешь увидеть? Выпученные от ужаса глаза или искривлённый гримасой рот. Не отвлекайся, смотри на код.

[@31danmaster31]

Весьма!

[@dimonlimon1770]

Довольно интересно, узнал для себя новые инструменты для разработки, их же можно спокойно в react использовать?

[@AleksanderLamkov]

Разумеется! Весь инструментарий DevTools будет работать независимо от технологии, на которой разработано веб-приложение :)

[@dimonlimon1770]

@@AleksanderLamkov отлично, благодарю за видео