Chrome Dev Tools полный курс [2024] | Performance, Memory, Network, Debugger, Layers, Animations

• Видео начинается с обзора Chrome DevTools, включая панель Element, Network, Sources, DevTools, Performance, Application, Audits, and Accessibility.  

• Рассматриваются различные вкладки и функции, такие как Element, Network, Sources, DevTools, Performance, Application, Audits, и Accessibility.  

• В панели Element можно редактировать HTML-код, добавлять и удалять элементы, а также отслеживать стили и события.  

• Можно также создавать собственные классы и стили для элементов.  

• В панели Sources можно просматривать и редактировать HTML-код, а также отключать и включать свойства.  

• Можно также создавать собственные классы и стили для элементов.  

• В панели Performance можно отслеживать производительность сайта, включая время загрузки, использование памяти и другие показатели.  

• Можно также отслеживать события, такие как hover и active, и применять стили к элементам.  

• В панели Accessibility можно проверить доступность сайта для пользователей с ограниченными возможностями.  

• Можно также отслеживать стили и анимацию, а также настраивать их интерактивно.  

• Вкладка "Консоль" позволяет напрямую писать код и проверять его работу, а также логировать информацию.  

• Можно скрыть ненужные консоли и сохранить информацию в логах.  

• Доступ к любой переменной, которую консолю, можно получить через консоль.  

• Вкладка "Стык Трейс" позволяет просматривать исходники кода и отслеживать, где произошел консоль лок.  

• Можно имитировать ошибки и отслеживать путь к ошибке.  

• Дебагер позволяет отслеживать выполнение кода поэтапно и управлять им.  

• Видео рассказывает о дебагере, который позволяет остановить выполнение кода и поэтапно отслеживать его работу.  

• Дебагер можно найти во вкладке "Сорс".  

• Вкладка "Нетворк" позволяет отслеживать все, что происходит с сетью, включая запросы и ответы сервера.  

• Можно анализировать запросы, добавлять дополнительную информацию и фильтровать запросы по типу контента.  

• Вкладка "Призер лок" позволяет сохранить информацию о запросах и ответах сервера, даже после обновления страницы.  

• Вкладка "Медленный интернет" позволяет имитировать медленный интернет и проверить, как будет работать сайт у пользователя с плохим соединением.  

• Вкладка "Респонс" позволяет искать по ключевым словам в ответах сервера.  

• Удобная функция для поиска информации в большом количестве данных.  

• В дефтулзах есть имитация мобильного устройства, которая позволяет просматривать сайт на разных устройствах.  

• Можно выбрать разные телефоны, включая айфоны и пиксели.  

• Если нужного устройства нет в списке, можно добавить его вручную.  

• Плотность пикселей может быть разной на разных мониторах, что может привести к проблемам с отображением контента.  

• В дефтулзах есть возможность имитировать разную плотность пикселей и проверять, как это влияет на отображение контента.  

• Для этого нужно активировать функцию "девайс тайп" и выбрать плотность пикселей.  

• В дефтулзах есть вкладки для просмотра куки, сессии и локального хранилища.  

• Вкладка "апликейшн" позволяет просматривать данные, сохраненные в браузере.  

• Вкладка "лайт хаус" позволяет анализировать скорость загрузки контента и время реакции пользователя.  

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

• Автор демонстрирует, как отследить утечку памяти на сайте, используя специальную вкладку "Мемори".  

• Утечка памяти происходит, когда на сайте создаются элементы, которые не удаляются.  

• Автор находит утечку памяти, используя график, который показывает, какие элементы создаются и сколько памяти они потребляют.  

• Автор переходит к вкладке "Перфоманс", где можно отслеживать производительность сайта.  

• Автор использует специальный сайт для отслеживания производительности, где можно добавить элементы и наблюдать за просадками FPS.  

• Автор использует вкладку "Перфоманс" для отслеживания работы с памятью и производительности сайта.  

• Анализируется функция "aset top", которая вызывает много перерисовок.  

• Оптимизация кода позволяет уменьшить количество вызовов функции и улучшить производительность.  

• С помощью вкладок "Performance" и "Memory" можно отслеживать утечки памяти.  

• Анализируется код, где происходит утечка памяти, и находится место, где она происходит.  

• Вкладка "Rendering" позволяет настроить, как сайт будет выглядеть для пользователей с проблемами зрения.  

• Можно настроить дефекты зрения, такие как неспособность видеть красный цвет или отсутствие поддержки темной темы.  

• Вкладка "Слои" в браузере позволяет отслеживать анимацию и ее влияние на другие элементы сайта.  

• Если анимация влияет на соседние элементы, это может снизить производительность сайта.  

• Использование специальных свойств для анимации позволяет вынести ее на отдельный слой, что улучшает производительность.  

• Вкладка "Анимешн" позволяет записывать и исследовать анимацию на сайте.  

• Можно настроить параметры анимации, включая скорость и время появления элементов.  

• Вкладка также позволяет редактировать анимацию и наблюдать за изменениями в коде.  

• Вкладка "Элемент" позволяет редактировать и удалять элементы, добавлять события и стили.  

• Вкладка "Консоль" позволяет писать свой код и просматривать код, который выводится в консоли.  

• Вкладка "Сорс" показывает, откуда пришел стиль и какой код его применил.  

• Вкладка "Нетворк" отслеживает запросы и фильтры.  

• Вкладка "Апликейшн" содержит хранилища, такие как куки и локла сторож.  

• Вкладка "Лайтуош" позволяет анализировать код и находить проблемы с производительностью.  

• Вкладка "Мемори" отслеживает утечку памяти и находит элемент с утечкой.  

• Вкладка "Перфоманс" показывает, где происходит утечка памяти.  

• Вкладка "Рендеринг" эмулирует, как видит сайт пользователь с проблемами зрения.  

• Вкладка "Анимация" позволяет детально изучить анимацию на сайте и кастомизировать ее.