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

• Обсуждение панели элементов, консоли и сети.  

• Обзор панели Source, работы с дебагером и стеком трассировки.  

• Настройка панели Network, фильтрация запросов и замедление сети.  

• Вкладки Application и Lighthouse, анимации и слои, производительность.  

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

• Дополнительная информация о консоли и дебагере.  

• Более детальное рассмотрение вкладки Performance.  

• Обзор Shift Interactions, Source Map Files и дополнительных вкладок.  

• Обзор простого кода с кнопками и стилями.  

• Призыв к лайкам и комментариям.  

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

• Основные функции панели: редактирование HTML, добавление и удаление элементов.  

• Отключение и включение CSS свойств.  

• Анализ CSS кода и исправление проблем.  

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

• Применение анимаций и отслеживание событий наведения.  

• Интерактивное изменение цветов и трансформаций.  

• Интерактивное изменение цветов и трансформаций.  

• Настройка анимаций и просмотр их выполнения.  

• Заготовленные варианты для анимации.  

• Можно интерактивно выбирать анимации и копировать их стили.  

• Вкладка "Компьютер" показывает финальные стили элемента.  

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

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

• Разные типы логов: обычный, предупреждения, ошибки.  

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

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

• Пример: работа с датой и строками в консоли.  

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

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

• Используется для отслеживания ошибок и отладки кода.  

• Пример: отслеживание пути к ошибке и использование дебагера.  

• Дебагер останавливает выполнение кода при достижении определенного ключевого слова.  

• Позволяет пошагово отслеживать выполнение кода.  

• Пример: управление выполнением кода и проверка значений переменных.  

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

• Вкладку "Sources" можно открыть из консоли или через баггер.  

• Вкладка "Sources" содержит дебаггер и файлы проекта.  

• Отслеживает сетевые запросы и данные, поступающие с сервера.  

• По умолчанию показывает запросы на CSS и JavaScript файлы.  

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

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

• Просмотр заголовков и контента, поступающего от сервера.  

• Фильтрация запросов по различным параметрам.  

• Сохранение данных запросов для последующего анализа.  

• Имитация медленного интернета для тестирования производительности.  

• Проверка времени выполнения запросов при различных условиях подключения.  

• Поиск ключевых слов в больших объемах данных.  

• Использование панели поиска для фильтрации данных по ключевым словам.  

• Пример поиска слова в ответах на запросы.  

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

• Панель можно перемещать и откреплять.  

• Можно выбрать устройство из выпадающего меню, например, iPhone 12.  

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

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

• Функция "Девайс тайп" активирует имитацию мобильного устройства.  

• Есть настройка для имитации слабых телефонов.  

• Можно имитировать горизонтальное и вертикальное расположение экрана.  

• Вкладка "Плотность пикселей" помогает отслеживать плотность пикселей монитора.  

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

• Имитация плотности пикселей помогает проверить, какие картинки скачиваются.  

• В Chrome можно очистить кэш для точного тестирования.  

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

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

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

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

• Вкладка показывает проблемы с сайтом, такие как отсутствие alt-атрибутов и проблемы с фреймами.  

• На сайте есть кнопка для запуска утечки памяти.  

• Используется вкладка "Мемори" для отслеживания потребления памяти.  

• Процесс утечки памяти можно остановить и детально отследить.  

• Запись информации о памяти и остановка утечки.  

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

• Обнаружение массива, занимающего 45% памяти.  

• Поиск кода, заполняющего массив.  

• Обнаружение кода, создающего массив с датами.  

• Изменение кода для сохранения данных в другой массив.  

• Запуск сканирования на утечку памяти.  

• Анализ данных и обнаружение массива "ван рей".  

• Переход к файлу кода для отслеживания утечки.  

• Отслеживание производительности сайта.  

• Использование анимации для выявления проблем с производительностью.  

• Запись и анализ данных о производительности и памяти.  

• Запись данных о производительности и памяти.  

• Оптимизация анимации и анализ результатов.  

• Исследование графиков и графиков памяти для выявления проблем.  

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

• Поиск и устранение частых вызовов функций.  

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

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

• В нашем случае функция была вызвана браузером, но в другом случае это была наша функция из файла app.js.  

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

• Оптимизированный код работает без лагов.  

• Память растет и очищается быстрее, фиолетовый график стал более адекватным.  

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

• Оптимизированный код вызывает меньше перерисовок и работает быстрее.  

• Функция update теперь отрабатывает быстрее, так как не вызывает setTop.  

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

• Утечки памяти можно отслеживать через вкладки performance и memory.  

• Нажатие на квадратик показывает, где происходит утечка памяти.  

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

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

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

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

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

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

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

• Использование вкладки "Слои" в Chrome для отслеживания анимации.  

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

• Анимация с использованием "top" влияет на все элементы страницы.  

• Использование "transform" позволяет анимации работать на отдельном слое.  

• Панель "Layers" помогает отслеживать, как анимация влияет на слои.  

• Анимация с "transform" не мерцает и не влияет на соседние элементы.  

• Статья на Хабре объясняет, как правильно использовать свойства для анимации на отдельном слое.  

• Настройка "Paint" помогает наглядно видеть, как анимация не задевает другие элементы.  

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

• Функция записи анимации и её детального разбора.  

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

• Пример исследования анимации прыгающего шарика.  

• Настройка скорости и периодичности анимации.  

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

• Обзор всех основных вкладок, полезных для работы.  

• Анонс второй части видео, где будут рассмотрены дебагер и вкладки "Performance".  

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

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

• Вкладка "Сорс" помогает отслеживать события и стили, активировать дебаггер.  

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

• Вкладка "Хранилище" показывает и очищает куки, локальные хранилища.  

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

• Вкладка "Мемори" помогает отслеживать утечки памяти.  

• Вкладка "Перфоманс" помогает анализировать производительность кода.  

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

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

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

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