Browser Debugging

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

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

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

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

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

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

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