Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Getting Started with Chrome DevTools and the Elements Panel: DOM, Styles, Box Model and Inspecting Angular Components
When a style rule does not apply, the Elements panel shows the matching rules, their specificity and the computed value; in Angular the cause is often ViewEncapsulation locking styles with the _ngcontent attribute. The Command Menu, Device Mode, :hov, the box model, Flexbox and anchor positioning tools, ng.getComponent($0) and a CSS custom property instead of ::ng-deep, with real outputs from Chrome 156 and Angular 22.
The Console Panel in Depth: The console API, Live Expressions, Utilities and Angular's ng Globals
The Console panel is not a log window but a REPL that opens into the page: levels and filters, console.time/count/assert/trace, top-level await, Live Expressions and utilities such as $$, getEventListeners and monitorEvents. In Angular 22: ng.getComponent, getContext, getListeners and getDirectiveMetadata, why a plain field needs ng.applyChanges in an OnPush, zoneless world, and the live-reference trap of logged objects, with real outputs from Chrome 156.
JavaScript Debugging with the Sources Panel: Breakpoint Types, Source Maps and the Ignore List
In the Sources panel you find a bug with proof instead of guesses: line, conditional and logpoint breakpoints, DOM, XHR/fetch and exception breakpoints, the async call stack and Scope/Watch. Step by step through an Angular 22 signal effect that never fires because an array was mutated in place; Angular CLI source maps, hidden source maps, hiding framework frames with x_google_ignoreList, and Workspaces.
The Network Panel: Waterfall, Timing, Throttling, HAR and Request Overrides
In the Network panel, a request's Timing tab tells you whether slowness is in the network or on the server: for an endpoint that waits 800 ms, 803.1 of 803.9 ms is Waiting (TTFB). The Angular 22 HttpClient preflight, reading a CORS error, filter syntax, throttling, request blocking, Copy as cURL, Edit and resend, mocking with Local Overrides, sanitized HAR and a .NET 10 Server-Sent Events stream, with real outputs from Chrome 156.
The Application Panel: Storage, Cookie Flags, Cache Storage and the Angular Service Worker
The Application panel shows everything the browser stores: localStorage, IndexedDB, quota, HttpOnly/Secure/SameSite/Partitioned cookies and the reason a cookie was rejected (SameSiteNoneInsecure). After a deploy, the Angular Service Worker serves the old bundle on the first reload; diagnosing it with /ngsw/state, Cache Storage, SwUpdate VERSION_READY, Update on reload and Bypass for network, plus the manifest and a bfcache test.
The Performance Panel: Live Metrics, Recording Traces, Insights and the Angular Custom Track
The Performance panel splits an interaction into input delay, processing and presentation delay; in zoneless Angular, rendering lands in presentation delay. We measure the INP of typing into a 2000-book list filter at 712 ms on a 20x CPU and fix it with computed signals and @for track; live metrics, the flame chart, long tasks, Insights and the Angular custom track enabled with ng.enableProfiling(), with real trace data.
The Memory Panel: Heap Snapshots, Allocation Timelines and Hunting Memory Leaks in Angular
In the Memory panel you prove a leak with the three-snapshot technique and find who holds it with the retainer chain: after 10 visits, 10 BookDetail instances remained, each holding 201 kB with a shallow size of 0.0 kB. A window resize listener, a shared closure context, an array in a service and an interval never unsubscribed; detached DOM holding the whole tree, shallow vs retained size, Chrome 155–156 context analysis and the fix with takeUntilDestroyed.
Lighthouse, Rendering and Coverage: Reading Audits Correctly
In Lighthouse 13 the audits merged with Performance Insights, but the score is calculated only from metrics: fixing cache-insight left the score unchanged, and three runs on the same page varied between 89 and 91. Simulated vs observed LCP, lab vs field data, navigation/timespan/snapshot modes, Rendering emulations, and using a source map to show that only 2.6 KB of the 42 percent in Coverage is our own code.
DevTools and AI: Gemini AI Assistance, Chrome DevTools MCP and Recorder
The Chrome DevTools MCP server opens everything in the browser to a coding agent: without a separate profile, --no-usage-statistics and --no-performance-crux, personal sessions and URLs can leave your machine. With an agent we find and fix, via source-mapped stacks, an SPA fallback returning HTML for an API call and a NaN IndexedDB key on /books/abc; Gemini AI assistance requirements, the DevToolsGenAiSettings policy, and exporting a Recorder recording to Puppeteer.