Chrome DevTools - самое необходимое для новичков

Разбираемся в панели веб-разработчика - что зачем и как использовать. Смотрим основные возможности.
00:00 Анонс темы
00:20 Панель Elements
09:10 Панель Console
13:12 Вкладка Sources
13:47 Вкладка Network
18:23 Панель Application
19:43 Настройки devTools
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@Taiga_libertarian]

Михаил, спасибо за видео, полезно иногда повторять даже начальную информацию по инструментам, т.к. некоторые фишки всё равно забываются с течением времени. Как всегда хорошо выглядите 🤍

[@user-yo7mw6oj4p]

Спасибо. Очень полезный получился урок.

[@unicoxr5tj417]

Михаил, сурсы, да и вообще дебигинг бы рассмотреть. Хар логи и все тонкое, вызывающее истерики, профессиональное показал бы)

[@user-sd3ov4qb9l]

Михаил, В Firefox есть удобный фишка, которая позволяет увидеть что на элементе html висит обработчик клика и очень быстро можно посмотреть какая функция вызывается при этом. В хроме такое есть?

[@mishanep]

В хроме можно повесить брейкпойнт на ноду на предмет мутации - изменение атрибута или удаление. Касаемо обработчика на клик во вкладке Elements - не помню такого.

[@user-zi5hn3nh6b]

@@user-sd3ov4qb9l вкладка event listeners рядом с style, computed и пр. в elements. выделяете элемент и переходите в эту вкладку. там отображаются все обработчики, которые применяются к элементу

[@RustemmKh]

@@user-sd3ov4qb9l В хроме тоже есть: в Elements, справа Event Listeners.

[@artem6987]

Отличное видео Михаил! Ты единственный ІТ блогер, видео которого не вызывают у меня естественного сопротивления вникать во что-то новое и которые я могу смотреть просто с удовольствием! 👍

[@nameother6213]

Спасибо. Полезное видео.

[@ruslan3040]

так ну михе лайк сразу

[@V4VFAloj7juAyQW]

Спасибо!!! Только я хотел попросить дорогого учителя сделать такой урок... А он уже готов. Михаил, научите ещё дебажить в вскоде и вебшторме. И работать в вебшторме. Это наверное на целый курс потянет

[@mishanep]

У меня есть видео по дебагу Реакт-приложений в VS Code kzbin.info/www/bejne/q6ermKBmjdhqsMksi=F6pzOQJS0VFmUUO3 По вебшторму пока ничего не планирую, так как сейчас им не пользуюсь.

[@V4VFAloj7juAyQW]

@@mishanep спасибо!

[@doberman1396]

тоже болею за МЮ ;))

[@NeoCoding]

спасибо хоть и не первое десятилетие зырю в это окно всё равно кое-что почерпнул

[@kirillbaryba746]

и debug на мобильных устройствах интересно

[@Gazovchik]

Добрый день, Миша. А Продолжение этой темы будет?...... Всем Адекватности мира и добра

[@mishanep]

Приветствую. Пока не планирую. Данное видео было по запросу от одного из моих учеников. У меня есть видео по деббагеру в devTools и отдельно по дебаггингу в VS Code.

[@Gazovchik]

@@mishanep , Услышал.

[@user-pj9mp5vd6n]

Спасибо за ролик, но как быть, если у нас огромное приложение с UI библиотекой, вот мы нашли нужный нам элемент на страничке, но как найти нам этот элемент в коде?

[@mishanep]

Мы смотрели панель без учёта внешних инструментов. Вариантов по усложнению множество - какой фреймворк, какая UI библиотека, какие соглашения внутри команды разработки в частности по именованию компонентов и пр. Универсального ответа здесь нет.

[@user-uk5tj3qn5q]

[3:38] У автора ошибка не от порядка самих класов а от порядка расположения в css файле

[@__a8as]

Ti sam xotyabi ponyal chto skazal?