Browser Debugging (Chrome DevTools MCP)

Chrome DevTools MCP Setup

Kurulum

# NPM ile
npm install -g @anthropic/chrome-devtools-mcp

# veya npx ile (kurulum gerektirmez)
npx @anthropic/chrome-devtools-mcp

MCP Config (~/.mcp.json)

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@anthropic/chrome-devtools-mcp"],
      "env": {
        "CHROME_DEVTOOLS_PORT": "9222"
      }
    }
  }
}

Chrome'u Debug Modunda Baslat

# 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) => {
        acc[key] = localStorage.getItem(key);
        return acc;
      }, {}),
      sessionStorage: Object.keys(sessionStorage).reduce((acc, key) => {
        acc[key] = sessionStorage.getItem(key);
        return acc;
      }, {})
    })
  `
})

Debug Workflow

Sistematik Debug Adimlari

1. REPRODUCE
   - Console log'lari oku (error seviyesi)
   - Network request'leri incele (4xx/5xx)
   - Screenshot al (goruntuyu dogrula)

2. ISOLATE
   - DOM inspect et (element var mi, dogru mu)
   - CSS kontrol et (gorunum sorunu mu)
   - JS evaluate et (state dogru mu)
   - Network filtrele (hangi request basarisiz)

3. DIAGNOSE
   - Performance profil al (yavas mi)
   - Memory kontrol et (leak var mi)
   - Lighthouse calistir (genel skor)

4. FIX & VERIFY
   - Kodu duzelt
   - Browser'da tekrar kontrol et
   - Console temiz mi
   - Network basarili mi
   - Performance iyilesti mi

Entegrasyon: browser-use MCP

Mevcut browser-use MCP ile birlikte kullanim:

browser-use: Sayfa navigasyon, form doldurma, tikla, icerik cek
chrome-devtools: Console, network, performance, DOM, memory analizi

Workflow:
1. browser-use ile sayfaya git
2. chrome-devtools ile console error kontrol
3. chrome-devtools ile network analiz
4. browser-use ile interaksiyon yap
5. chrome-devtools ile performance olc