Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Chrome DevTools'a Giriş ve Elements Paneli: DOM, Styles, Box Model ve Angular Component'lerini İncelemek
Bir stil kuralı uygulanmıyorsa Elements panelinde element'e uyan kuralları, specificity'yi ve Computed değeri okursun; Angular'da sebep çoğu zaman _ngcontent attribute'uyla kilitlenen ViewEncapsulation'dır. Command Menu, Device Mode, :hov, box model, Flexbox ve anchor positioning araçları, ng.getComponent($0) ve ::ng-deep yerine CSS custom property, Chrome 156 ve Angular 22 ile gerçek çıktılarla.
Console Paneli Derinlemesine: console API, Live Expression, Utility'ler ve Angular'ın ng Global'leri
Console paneli bir log penceresi değil, sayfanın içine açılan bir REPL'dir: seviyeler ve filtreler, console.time/count/assert/trace, top-level await, Live Expression ve $$, getEventListeners, monitorEvents gibi utility'ler. Angular 22'de ng.getComponent, getContext, getListeners ve getDirectiveMetadata; OnPush ve zoneless dünyada düz field için neden ng.applyChanges gerektiği ve log'lanan object'in canlı referans tuzağı, Chrome 156'dan gerçek çıktılarla.
Sources Paneli ile JavaScript Debugging: Breakpoint Türleri, Source Map ve Ignore List
Sources panelinde line, conditional ve logpoint breakpoint'leri, DOM, XHR/fetch ve exception breakpoint'leri, async call stack ve Scope/Watch ile bir hatayı tahminle değil kanıtla bulursun. Angular 22'de yerinde değiştirilen array yüzünden tetiklenmeyen signal effect'i adım adım; Angular CLI source map'leri, hidden source map, x_google_ignoreList ile framework frame'lerini gizlemek ve Workspaces.
Network Paneli: Waterfall, Timing, Throttling, HAR ve Request Override'ları
Network panelinde bir isteğin Timing sekmesi, yavaşlığın ağda mı sunucuda mı olduğunu söyler: 800 ms bekleyen endpoint'te 803,9 ms'nin 803,1'i Waiting (TTFB). Angular 22 HttpClient'ının preflight'ı, CORS hatasını okumak, filtre syntax'ı, throttling, request blocking, Copy as cURL, Edit and resend, Local Overrides ile mock, sanitized HAR ve .NET 10 Server-Sent Events akışı, Chrome 156'dan gerçek çıktılarla.
Application Paneli: Storage, Cookie Flag'leri, Cache Storage ve Angular Service Worker
Application paneli tarayıcının sakladığı her şeyi gösterir: localStorage, IndexedDB, kota, HttpOnly/Secure/SameSite/Partitioned cookie'ler ve reddedilen bir cookie'nin nedeni (SameSiteNoneInsecure). Angular Service Worker deploy sonrası ilk yenilemede eski bundle'ı sunar; /ngsw/state, Cache Storage, SwUpdate VERSION_READY, Update on reload ve Bypass for network ile teşhis, manifest ve bfcache testi.
Performance Paneli: Live Metrics, Trace Kaydı, Insights ve Angular Custom Track
Performance paneli bir etkileşimin süresini input delay, processing ve presentation delay olarak ayırır; zoneless Angular'da render presentation delay'e düşer. 2000 kitaplık listede filtreye yazmanın INP'sini 20x CPU'da 712 ms'den ölçüp computed signal ve @for track ile düzeltiyoruz; live metrics, flame chart, long task, Insights ve ng.enableProfiling() ile açılan Angular custom track gerçek trace verisiyle.
Memory Paneli: Heap Snapshot, Allocation Timeline ve Angular'da Memory Leak Avı
Memory panelinde üç snapshot tekniğiyle sızıntıyı kanıtlar, retainer zinciriyle kimin tuttuğunu bulursun: 10 ziyarette 10 BookDetail kaldı, her biri kendi boyutu 0.0 kB iken 201 kB tutuyordu. Window resize listener'ı, paylaşılan closure context'i, service'teki array ve unsubscribe edilmeyen interval; detached DOM'un bütün ağacı tutması, shallow ve retained size, Chrome 155–156'nın context analizi ve takeUntilDestroyed ile düzeltme.
Lighthouse, Rendering ve Coverage: Audit'leri Doğru Okumak
Lighthouse 13'te audit'ler Performance Insights ile birleşti ama skor yalnız metriklerden hesaplanıyor: cache-insight'ı düzeltince skor değişmedi, aynı sayfada üç koşu 89–91 arası oynadı. Simüle ve gözlenen LCP farkı, lab ve field verisi, navigation/timespan/snapshot modları, Rendering emülasyonları ve Coverage'daki yüzde 42'nin yalnız 2.6 KB'ının bizim kodumuz olduğunu source map ile göstermek.
DevTools ve AI: Gemini AI Assistance, Chrome DevTools MCP ve Recorder
Chrome DevTools MCP server'ı coding agent'a tarayıcıdaki her şeyi açar: ayrı profil, --no-usage-statistics ve --no-performance-crux olmadan kişisel oturumların ve URL'lerin dışarı çıkabilir. Agent'la /books/abc'de SPA fallback'inin API'ye HTML döndürdüğü ve NaN IndexedDB key'i hatalarını source-mapped stack'lerle bulup düzeltiyoruz; Gemini AI assistance'ın şartları, DevToolsGenAiSettings policy'si ve Recorder kaydını Puppeteer'a aktarmak.