Investigating code with browser DevTools
Which DevTools panel answers which question: the Elements inspector and DOM change breakpoints, Sources breakpoints for requests and event listeners, the Network panel's Preserve log and Disable cache, the Application panel's HttpOnly cookies, Performance long tasks, Memory heap snapshots for detached nodes, and the Console Utilities ($0, $$, getEventListeners, monitorEvents).
Given a scenario, utilize the Browser Dev Tools to investigate code behavior.
~7 min read · 12 practice questions ·
What the exam expects
- Choose the DevTools panel and feature that answers a debugging question: who changed this element, who sent this request, which listener ran, what was sent, why is it slow, what is leaking.
- Use DOM change, XHR/fetch and event listener breakpoints to pause inside code you cannot search.
- Use the Network panel's request details, Preserve log and Disable cache; read cookies in the Application panel and explain HttpOnly.
- Use the Performance and Memory panels for long tasks and detached DOM nodes, and the Console Utilities (
$0,$,$$,getEventListeners,monitorEvents). - Key terms: breakpoint (a place where execution pauses so you can inspect state); inspector (the Elements panel showing the live DOM); long task (main-thread work of 50 ms or more); detached node (removed from the document but still referenced by JavaScript); Console Utilities (helper functions that exist only at the DevTools Console prompt).
The exam is written against Chrome DevTools. MDN documents the shared ideas (inspector, debugger, console, cookies, memory); Chrome-specific menu names below are marked Exam convention because no allowed reference page documents them.
Key facts
- Detail
- Shows the page's HTML as it is at runtime, editable live
- Detail
- Lists events associated with the selected element
- Detail
- Shows what code ran to reach the paused line
HttpOnly- Detail
- Blocks
document.cookieaccess; still sent withfetch()
Secure- Detail
- Sent only over HTTPS; does not hide the cookie from scripts
- Detail
- Main thread busy for 50 ms or longer
- Detail
- Only unreachable objects are collected
- Detail
- Sent in the
Authorizationrequest header
Sources for this section (6)
- What are browser developer tools?developer.mozilla.org (opens in a new tab)
- Set-Cookiedeveloper.mozilla.org (opens in a new tab)
- Using HTTP cookiesdeveloper.mozilla.org (opens in a new tab)
- Long taskdeveloper.mozilla.org (opens in a new tab)
- Memory managementdeveloper.mozilla.org (opens in a new tab)
- Authorization headerdeveloper.mozilla.org (opens in a new tab)
- Why can a session cookie appear in the Application panel but not in `document.cookie`?
- When is a removed DOM node still using memory?
- Why does a long event handler make scrolling stutter?
- Which debugger pane shows how execution reached a paused line?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the JavaScript Developer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 24 lessons of the JavaScript Developer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (12 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams