Lesson 3.3Lesson 14 of 24
Investigating with Chrome DevTools
Given a scenario, utilize the Browser Dev Tools to investigate code behavior.
Key points
- 1Elements shows the live DOM and styles, lets you set breakpoints on DOM changes, and lists an element's event listeners.
- 2Console runs code in the page, shows logs and errors, and keeps a live expression updated without pausing.
- 3Sources is the debugger: line, conditional, XHR/fetch and event listener breakpoints, pausing on exceptions, the call stack and scope.
- 4Network lists every request with status, headers, payload, response, timing and initiator, and can throttle the connection.
- 5Performance records what the main thread did and finds long tasks; Application shows storage such as localStorage, sessionStorage and cookies.
What the exam guide checks here
Objective wording from the exam guide (English).
- 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
Lock it in
Answer scenario questions on this topic. Every option comes with an explanation.
Practise 3.3 · 12 questions