# Investigating code with browser DevTools

*JavaScript Developer Study Guide · Browser and Events · Last updated October 16, 2026 · https://www.certifyforce.com/study-guide/javascript-developer/browser-and-events/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).

- Certification: Salesforce JavaScript Developer
- Exam section: Browser and Events
- Study guide: https://www.certifyforce.com/study-guide/javascript-developer

**Official exam objective:**

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

## 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

| Fact | Detail | Source |
|---|---|---|
| Inspector | Shows the page's HTML as it is at runtime, editable live | [What are browser developer tools?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) |
| Event Listeners tab | Lists events associated with the selected element | [What are browser developer tools?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) |
| Call stack pane | Shows what code ran to reach the paused line | [What are browser developer tools?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools) |
| `HttpOnly` | Blocks `document.cookie` access; still sent with `fetch()` | [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie) |
| `Secure` | Sent only over HTTPS; does not hide the cookie from scripts | [Using HTTP cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies) |
| Long task | Main thread busy for 50 ms or longer | [Long task](https://developer.mozilla.org/en-US/docs/Glossary/Long_task) |
| Garbage collection | Only unreachable objects are collected | [Memory management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Memory_management) |
| Credentials on a request | Sent in the `Authorization` request header | [Authorization header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Authorization) |

## Check yourself

- 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?

## Sources

- [What are browser developer tools?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools)
- [What went wrong? Troubleshooting JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_went_wrong)
- [console](https://developer.mozilla.org/en-US/docs/Web/API/console)
- [Using HTTP cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies)
- [Set-Cookie header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie)
- [Memory management](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Memory_management)
- [Long task](https://developer.mozilla.org/en-US/docs/Glossary/Long_task)
- [PerformanceLongTaskTiming](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming)
- [Authorization header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Authorization)

## About the full unit

The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 12 linked practice questions, and unlimited timed mock exams are included with the JavaScript Developer pack (USD $19): https://www.certifyforce.com/practice-exams