Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
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.
Angular DevTools: Component Tree, Profiler, Injector Tree and Router Tree
Angular DevTools only works on development builds, and a build made with optimization: false also behaves in development mode: the Service Worker turns off and budgets are exceeded. We read Components, the Signal Graph, the Profiler, the Injector Tree and the Router Tree with real data: fixing NG0201 with a route-level provider and seeing the new Route: reviews injector, and card template updates dropping from 855 to 0 with OnPush and track book.id.
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.
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.
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 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 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.
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 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.
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.
What Changed in IDEs: From Visual Studio 2022 to 2026, and Rider and VS Code in 2025–2026
Keep a global.json in the repo so an IDE update can't silently move your build to a new SDK; in a real run latestPatch picked 10.0.402, and an uninstalled 11.0.100 stopped with exit code 155. Visual Studio 2026 GA and monthly updates from 18.0 to 18.11, Rider from 2025.3 to the 2026.3 EAP, VS Code's move to weekly releases and agent windows, IDE support status with .NET 11 RC3, and a migration checklist.
AI Assistants in the IDE: Copilot Agent Mode, Rider AI and Safe Use
The compiler catches an invented API, but only a test that knows the business rule catches wrong behavior that compiles: MidpointRounding.HalfUp in an agent-written test gave CS0117, and an xUnit test with the boundary value 1.025 found banker's rounding in the implementation. Completion, NES, chat and agent; the AI features of Visual Studio 2026 18.x, VS Code 1.145 and Rider 2026.2; copilot-instructions.md, MCP trust and safe-use rules.