# Browser Debugging

Chrome DevTools MCP ile browser debugging.

- Repository: https://github.com/vibeeval/vibecosystem (541 stars)
- Category: Testing
- License: MIT
- Last updated: 2026-08-08
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add vibeeval/vibecosystem --skill browser-debugging -g -a claude-code -y`
Codex: `npx skills add vibeeval/vibecosystem --skill browser-debugging -g -a codex -y`
Cursor: `npx skills add vibeeval/vibecosystem --skill browser-debugging -g -a cursor -y`
Gemini CLI: `npx skills add vibeeval/vibecosystem --skill browser-debugging -g -a gemini-cli -y`

## Description

Chrome DevTools MCP ile browser debugging. Console, network, performance, DOM analizi.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/vibeeval/vibecosystem/blob/HEAD/skills/browser-debugging/SKILL.md