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

| 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 | 600ms | Server response suresi | | Download | 500ms | Payload buyuklugu | | Total time | 2s | Butun pipeline | | Payload size | 1MB | Compression, pagination | | Request count | 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 | { 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.runlighthouse({ url: "http://localhost:3000", categories: ["performance", "accessibility", "best-practices", "seo"], formfactor: "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.getpageinfo() // Response: url, title, status, loading_state

### Tab Yonetimi

// Tum tab'lari listele devtools.list_targets()

// Tab'a baglan devtools.attachtotarget({ target_id: "target-123" })

### Screenshot

devtools.takescreenshot({ format: "png", quality: 80, fullpage: 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)

1. 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)

1. DIAGNOSE

• Performance profil al (yavas mi)
• Memory kontrol et (leak var mi)
• Lighthouse calistir (genel skor)

1. 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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [vibeeval](https://github.com/vibeeval)
- **Source:** [vibeeval/vibecosystem](https://github.com/vibeeval/vibecosystem)
- **License:** MIT

Install and usage instructions live in the source repository linked above.