browser-debugging

Files (1)

• SKILL.md

SKILL.md (first lines)

---
name: browser-debugging
description: "Chrome DevTools MCP ile browser debugging. Console, network, performance, DOM analizi."
---

# 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 |

From vibeeval/vibecosystem, MIT.

More from vibeeval/vibecosystem