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

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

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

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

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

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

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

• В видео также демонстрируется работа с анимацией и слоями в панели Performance.  

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

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

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

• Можно сохранить информацию в логах, чтобы она не терялась при обновлении страницы.  

• Можно очистить консоль, нажав на соответствующую кнопку.  

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

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

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

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

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

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

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

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

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

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

• Это полезно, если сайт переходит на другой ресурс или у пользователя плохой интернет.  

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

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

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

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

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

• Можно добавить дополнительные телефоны и настроить плотность пикселей.  

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

• Можно анализировать страницу на скорость загрузки и доступность для пользователей.  

• Вкладка анализирует страницу на доступность и скорость загрузки.  

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

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

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

• Он находит массив, который занимает 45% объема, созданного во время работы сайта, и определяет, что это даты.  

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

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

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

• Анализируется функция, вызываемая в сет-топ, которая вызывает кучу перерисовок.  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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