Урок 3.3Урок 14 з 24

Діагностика в Chrome DevTools

Given a scenario, utilize the Browser Dev Tools to investigate code behavior.

Головне

1Elements показує живий DOM і стилі, дає змогу ставити точки зупину на зміни DOM і перелічує слухачів подій елемента.
2Console виконує код на сторінці, показує логи й помилки і оновлює live expression, не зупиняючи сторінку.
3Sources — це дебагер: точки зупину (на рядку, умовні, на XHR/fetch, на слухачах подій), зупинка на винятках, стек викликів і область видимості.
4Network перелічує всі запити зі статусом, заголовками, переданими даними, відповіддю, таймінгами та ініціатором і вміє обмежувати швидкість з'єднання.
5Performance записує, що робив головний потік, і знаходить довгі задачі; Application показує сховища, як-от localStorage, sessionStorage і cookies.

Що перевіряє іспит із цієї теми

Формулювання з програми іспиту (англійською).

3.3.K1Sources, Console, Network, Elements and Performance panels and what each shows
3.3.S1Choose the dev tools feature that finds the cause of a given behaviour

Дайте відповідь на запитання за сценаріями з цієї теми. До кожного варіанта є розбір.