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