browser-debugging

# Browser Debugging (Chrome DevTools MCP) ## Chrome DevTools MCP Setup ### Kurulum ```bash # NPM ile npm install -g @anthropic/chrome-devtools-mcp # veya npx ile (kurulum gerektirmez) npx @anthropic/chrome-devtools-mcp ``` ### MCP Config (~/.mcp.json) ```json { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "@anthropic/chrome-devtools-mcp"], "env": { "CHROME_DEVTOOLS_PORT": "9222" } } } } ``` ### Chrome'u Debug Modunda Baslat ```bash # macOS /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --remote-debugging-port=9222 \ --user-data-dir=/tmp/chrome-debug # Linux google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug # Headless mod google-chrome --headless --remote-debugging-port=9222 ``` ## Console Log Okuma ve Analiz ### Console Mesajlarini Yakala ``` devtools.get_console_logs({ level: "error", // log | warn | error | info | debug limit: 50, clear_after: false }) ``` ### Console Mesaj Analizi | Seviye | Anlam | Aksiyon | |--------|-------|---------| | error | Runtime hatasi | HEMEN fix et | | warn | Potansiyel sorun | Incele, gerekiyorsa fix | | info | Bilgi mesaji | Debug icin kullan | | log | Debug output | Temizle (production'da olmamali) | ### Yaygin Console Hatalari ``` // TypeError: Cannot read properties of undefined → Null check eksik, optional chaining kullan: obj?.prop // CORS error → Backend'de Access-Control-Allow-Origin header eksik // Uncaught Promise rejection → async/await'te try/catch eksik // React: Each child should have a unique key → map() icinde key={unique_id} ekle // React: Maximum update depth exceeded → useEffect dependency array'de sonsuz dongu ``` ## Network Request Izleme ### Request'leri Listele ``` devtools.get_network_requests({ url_filter: "/api/", method: "POST", status_code: 500, limit: 20 }) ``` ### Request Detayi ``` devtools.get_request_detail({ request_id: "req-123", include_body: true, include_headers: true }) ``` ### Network Analiz Tablosu | Metrik | Iyi | Kotu | Kontrol | |--------|-----|------|---------| | TTFB | <200ms | >600ms | Server response suresi | | Download | <100ms | >500ms | Payload buyuklugu | | Total time | <500ms | >2s | Butun pipeline | | Payload size | <100KB | >1MB | Compression, pagination | | Request count | <50/sayfa | >100/sayfa | Batching, caching | ### Yaygin Network Sorunlari ``` Status 401 → Token expired, auth flow kontrol et Status 403 → Permission eksik, RBAC kontrol et Status 404 → URL yanlis, routing kontrol et Status 429 → Rate limited, backoff ekle Status 500 → Server error, backend log'lara bak Status 502 → Proxy/gateway sorunu, infra kontrol et CORS error → Preflight (OPTIONS) basarisiz Mixed content → HTTPS sayfada HTTP request ``` ## Performance Profiling ### Performance Snapshot ``` devtools.get_performance_metrics({ include_timing: true, include_memory: true }) ``` ### Core Web Vitals Olcumu ``` devtools.evaluate_expression({ expression: ` new PerformanceObserver((list) => { for (const entry of list.getEntries()) { console.log(entry.name, entry.value || entry.startTime); } }).observe({ type: 'largest-contentful-paint', buffered: true }); ` }) ``` ### Performance Metrikleri | Metrik | Hedef | Olcum | |--------|-------|-------| | LCP | <2.5s | En buyuk elementin renderlanma suresi | | FID/INP | <100ms | Ilk input'a tepki suresi | | CLS | <0.1 | Gorsel kayma skoru | | FCP | <1.8s | Ilk icerigin gorundugu an | | TTI | <3.8s | Tamamen interaktif olma suresi | | TBT | <200ms | Main thread bloklanma suresi | ### Performance Anti-Patterns ``` 1. Layout thrashing: DOM oku/yaz/oku/yaz (batch et) 2. Forced reflow: offsetHeight gibi prop'lar reflow tetikler 3. Unoptimized images: WebP/AVIF kullan, lazy load et 4. Render blocking CSS: Critical CSS inline, gerisi async 5. Long tasks: 50ms+ main thread task'lari parcala 6. Excessive DOM: 1500+ node varsa virtual scroll kullan ``` ## DOM Inspection ### Element Sec ve Incele ``` devtools.query_selector({ selector: "#main-content .card", include_styles: true, include_attributes: true }) ``` ### DOM Tree ``` devtools.get_dom_tree({ depth: 3, root_selector: "#app" }) ``` ### Element Sayisi Kontrol ``` devtools.evaluate_expression({ expression: "document.querySelectorAll('*').length" }) // 1500+ ise performance sorunu ``` ### Computed Styles ``` devtools.get_computed_styles({ selector: ".problematic-element", properties: ["display", "position", "z-index", "overflow"] }) ``` ## JavaScript Debugging ### Expression Evaluate Et ``` devtools.evaluate_expression({ expression: "JSON.stringify(window.__NEXT_DATA__, null, 2)" }) ``` ### State Inspection (React) ``` devtools.evaluate_expression({ expression: ` // React DevTools hook const fiber = document.querySelector('#root')._reactRootContainer?._internalRoot?.current; JSON.stringify(fiber?.memoizedState, null, 2); ` }) ``` ### Event Listener Kontrolu ``` devtools.evaluate_expression({ expression: ` const el = document.querySelector('.button'); getEventListeners(el); ` }) ``` ### Breakpoint Yonetimi ``` // Conditional breakpoint devtools.set_breakpoint({ url: "main.js", line: 42, condition: "user.role === 'admin'" }) // DOM breakpoint devtools.set_dom_breakpoint({ selector: "#dynamic-content", type: "subtree-modifications" // subtree-modifications | attribute-modifications | node-removal }) ``` ## Memory Leak Tespiti ### Heap Snapshot ``` devtools.take_heap_snapshot({ include_summary: true }) ``` ### Memory Timeline ``` devtools.get_memory_info() // Response: { jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize } ``` ### Memory Leak Tespiti Adimlari ``` 1. Baslangic heap snapshot al 2. Suphelenen aksiyonu yap (navigate, modal ac/kapa) 3. GC tetikle (devtools uzerinden) 4. Ikinci heap snapshot al 5. Comparison view'da "Detached" DOM node'lari ara 6. Retained size buyuk olan objeleri incele ``` ### Yaygin Memory Leak Sebepleri | Sebep | Cozum | |-------|-------| | Event listener temizlenmemis | useEffect return cleanup | | setInterval temizlenmemis | clearInterval in cleanup | | Detached DOM | removeChild + null referans | | Closure capturing | WeakRef veya scope daralt | | Global degisken birikimi | Scope'a al, gereksizini sil | | WebSocket kapatilmamis | close() in cleanup | ## CSS Debugging ### CSS Coverage ``` devtools.get_css_coverage({ url_filter: "styles.css" }) // Kullanilmayan CSS oranini goster ``` ### Layout Sorunlari ``` // Overflow tespiti devtools.evaluate_expression({ expression: ` [...document.querySelectorAll('*')].filter(el => { return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight; }).map(el => ({ tag: el.tagName, class: el.className, overflow: { w: el.scrollWidth - el.clientWidth, h: el.scrollHeight - el.clientHeight } })); ` }) ``` ### Z-index Debugging ``` devtools.evaluate_expression({ expression: ` [...document.querySelectorAll('*')] .filter(el => getComputedStyle(el).zIndex !== 'auto') .map(el => ({ tag: el.tagName, class: el.className, zIndex: getComputedStyle(el).zIndex, position: getComputedStyle(el).position })) .sort((a, b) => Number(b.zIndex) - Number(a.zIndex)); ` }) ``` ### CSS Anti-Patterns | Anti-Pattern | Dogru Yol | |-------------|-----------| | !important kullanimi | Specificity'yi artir | | Inline style | Class/utility kullan | | Magic number z-index | z-index scale tanimla | | Fixed px font size | rem/em kullan | | * selector | Spesifik selector | ## Lighthouse Audit ### Programmatic Lighthouse ``` devtools.run_lighthouse({ url: "http://localhost:3000", categories: ["performance", "accessibility", "best-practices", "seo"], form_factor: "mobile" // mobile | desktop }) ``` ### Lighthouse Skor Hedefleri | Kategori | Minimum | Hedef | |----------|---------|-------| | Performance | 70 | 90+ | | Accessibility | 80 | 100 | | Best Practices | 80 | 100 | | SEO | 80 | 100 | ### Accessibility Kontrolleri ``` devtools.evaluate_expression({ expression: ` // Eksik alt text [...document.querySelectorAll('img:not([alt])')].length; ` }) devtools.evaluate_expression({ expression: ` // Eksik label [...document.querySelectorAll('input:not([aria-label]):not([id])')].length; ` }) ``` ## Real-Time Browser State Inspection ### Page State ``` devtools.get_page_info() // Response: url, title, status, loading_state ``` ### Tab Yonetimi ``` // Tum tab'lari listele devtools.list_targets() // Tab'a baglan devtools.attach_to_target({ target_id: "target-123" }) ``` ### Screenshot ``` devtools.take_screenshot({ format: "png", quality: 80, full_page: true }) ``` ### Cookie Inspection ``` devtools.get_cookies({ url: "http://localhost:3000" }) ``` ### Local/Session Storage ``` devtools.evaluate_expression({ expression: ` ({ localStorage: Object.keys(localStorage).reduce((acc, key) => {