Chrome DevTools #
В данном модуле студентам необходимо изучить: #
- Вкладка Elements:
- нахождение HTML-элемента в DOM-дереве
- просмотр и динамическое(но временное) изменение HTML-структуры документа
- Просмотр и динамическое(но временное) изменение стилей DOM-элемента
- Нахождение в файле стилей (вкладка Source) определенного стиля
- Просмотр результирующих стилей, которые применились к HTML-элементу
- Вкладка Console:
- виды логов из js-файла, которые рендерятся во вкладке Сonsole - console.log(), console.info(), console,error().
- переход из консоли в строку в файл скрипта(вкладка Source) к источнику лога.
- сохранение/очищение логов между перезагрузками страницы
- Вкладка Source:
- просмотр конечной структуры веб-приложения
- просмотр содержимого файлов из структуры в подвкладке Page
- приведение в читаемый вид содержимого файла при необходимости
- точки останова в скрипте
- переход между точками останова и пошаговый просмотр выполнения кода
- просмотр областей видимости точек основа, текущего состояния переменных
- Вкладка Network:
- просмотр запросов
- фильтрация запросов по типам
- сохранение/очищение логов запросов между перезагрузками страницы
- просмотр информации о запросе - подвкладки Header, Preview, Response, остальное - опционально.
- подвкладка Header. Уметь читать информацию:
- url запроса
- метод запроса
- статус запроса
- payload запроса (request body или query параметры)
- подвкладки Preview, Response
- содержимое ответа на запрос
- Вкладка Application
- просмотр и манипуляции с Local Storage (Coockies, Session Storage опционально)
Приблизительное время прохождения модуля #
2 часа