Browser DevTools — The First Tool for Debugging
Browser DevTools — The First Tool for Debugging
It is no exaggeration to say that half of the first few months of frontend work is learning how to use DevTools. Logging values to the console, inspecting network requests, tweaking styles on the fly, simulating mobile screens — all of it inside a single panel. This article covers DevTools' origins, the core panels, and common debugging flows.
1. About DevTools
The browser-built-in developer tools first gained popularity with Mozilla's Firebug extension in 2006, and with Google Chrome's release in 2008, Chrome DevTools took the standard tool's seat. Safari has Web Inspector, Firefox has its own Developer Tools. Edge is Chromium-based, so it is nearly identical to Chrome.
Opening shortcuts:
| OS · Browser | Shortcut |
|---|---|
| Windows · Chrome / Edge / Firefox | F12 or Ctrl + Shift + I |
| macOS · Chrome / Edge / Firefox | Cmd + Option + I |
| macOS · Safari | Cmd + Option + I (first enable Preferences > Advanced > Show Develop menu) |
The fastest way to inspect a specific element is right-click → "Inspect" / "Inspect Element".
2. Core Panels
| Panel | Use |
|---|---|
| Elements | DOM tree and CSS style inspection. Live editing |
| Console | JS execution, console.log output, errors |
| Sources | Source files, breakpoints, debugger |
| Network | HTTP request / response, headers, payload, timing |
| Performance | CPU profile, rendering timeline |
| Memory | Heap snapshots, memory leak tracing |
| Application | Cookies, LocalStorage, IndexedDB, Service Worker, Cache |
| Lighthouse | Performance, accessibility, SEO automated audit |
| Security | Certificates, HTTPS state |
| Recorder (Chrome) | Record and replay user flows |
3. Elements Panel
The DOM as a tree. Selecting a node shows the applied CSS on the right, sorted by specificity. We can click a line to change a value on the spot, and changes disappear on reload.
The Computed tab shows all finally applied styles, the Layout tab visualizes the box model, and the Accessibility tab shows the computed ARIA attributes.
4. Console Panel
console.log("기본 출력");
console.warn("경고");
console.error("에러");
console.table([{ id: 1, name: "a" }, { id: 2, name: "b" }]);
console.dir(document.body);
console.time("step"); /* ... */ console.timeEnd("step");
console.trace(); // 호출 스택 출력
console.assert(x > 0, "양수여야");
$0 refers to the most recently selected node in Elements, and $_ is a console-only variable pointing to the result of the last expression.
5. Sources Panel
The JS debugger. Clicking a line number in a source file sets a breakpoint. When execution pauses, we inspect variables, call stack, and scope.
| Shortcut (Win · Mac shared) | Action |
|---|---|
F8 or Ctrl/Cmd + \ |
Run to next breakpoint |
F10 |
Step over (next line, do not enter function) |
F11 |
Step into (enter function) |
Shift + F11 |
Step out (leave function) |
Breakpoint kinds:
- Line breakpoint — pauses at a line.
- Conditional breakpoint — pauses only when a condition is true.
- Logpoint — adds a console log without modifying code.
- DOM breakpoint — pauses on changes to a specific node.
- XHR / Fetch breakpoint — pauses on a request to a specific URL.
- Event listener breakpoint — pauses when events like
clickorkeydownfire.
6. Network Panel
HTTP traffic in real time. Frequently used features:
- Filter — by category (
XHR,JS,CSS,Img,Doc) or regex. - Preserve log — keeps records across navigations. Essential for debugging login flows.
- Disable cache — disables cache while DevTools is open. Useful when changed static files don't update.
- Throttling — simulate slow 3G.
- Click a request — breaks down into Headers, Payload, Preview, Response, Timing.
Right-click on a request → Copy as cURL reproduces the same request as a one-liner in the terminal. Frequently used for backend debugging.
7. Application Panel
The single place to see all browser storage:
- Cookies — name, value, domain,
HttpOnly,Secure,SameSite. The first stop for auth debugging. - Local Storage / Session Storage — directly edit key-value entries.
- IndexedDB — object stores as a tree.
- Service Workers — registered workers, force update / unregister.
- Cache Storage — resources cached by the worker.
8. Performance · Lighthouse · Mobile Emulation
Performance — press the record button, interact with the page, and stop to see CPU, network, and rendering timelines. Long Tasks (work over 50 ms) appear as red bars.
Lighthouse — automated page audit. Scores Performance, Accessibility, Best Practices, and SEO out of 100. The recommendations on the result page are themselves a learning resource.
Mobile emulation — top-left "Toggle device toolbar" in DevTools (Win: Ctrl + Shift + M, Mac: Cmd + Shift + M) simulates a mobile viewport. Presets like iPhone, Pixel. User-Agent and touch events are mimicked. Real mobile validation still requires a real device.
9. Chrome DevTools Protocol (CDP)
DevTools' own protocol for talking to the browser is public. Automation tools like Puppeteer and Playwright drive the browser via CDP. Debugging tools and automation tools share the same surface.
10. Other Paths
- VS Code debugger — attach to Chrome / Edge to use breakpoints inside the IDE.
- React Developer Tools / Vue DevTools / Redux DevTools — framework-specific extensions. Inspect component tree and state changes.
- Postman · Insomnia · Bruno — API call tools. Complements the Network tab.
- Wireshark · tcpdump — packet-level analysis.
11. A Small Debugging Flow
- A button on the page doesn't work.
- Go to the Console tab and check the red error.
- Click the file / line in the error message → jump to that line in the Sources panel.
- Set a breakpoint on that line.
- Reload the page and click the button again.
- Inspect variables and the call stack at the pause point.
- Form a hypothesis, fix the code → try again.
12. Common Pitfalls
Missing the red error in the console while suspecting other places — the first step of debugging is always the console.
Network request returns 4xx / 5xx but the detailed message lives in the response body — be sure to expand the Response tab.
Network log disappears after navigation, blocking auth-flow tracing — turn on "Preserve log".
Service Worker keeps serving old assets — Application > Service Workers, unregister or "Update on reload".
DevTools' own cache — when wanting to see a different response for the same URL, use Disable cache.
JS minified onto a single line — pressing the Pretty print button ({}) expands it readably. With a source map present, the original source appears as well.
Closing thoughts
The four panels Console, Network, Sources, and Application cover 90% of debugging in DevTools. Following the source of red error messages is the fastest path. Automated verification rests on the same foundation via chrome-devtools MCP and Playwright. It is the first tool a beginner should master, and a tool we still use every day ten years on.
Next
- (web-fundamentals end)
Chrome DevTools Documentation · Firefox Developer Tools · Safari Web Inspector Reference · Chrome DevTools Protocol Viewer · React Developer Tools · Vue DevTools · Lighthouse · The History of Firebug (Wikipedia) for reference.