Browser Debugging Agent Skill

# NPM ile
npm install -g @anthropic/chrome-devtools-mcp

# veya npx ile (kurulum gerektirmez)
npx @anthropic/chrome-devtools-mcp

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "@anthropic/chrome-devtools-mcp"],
      "env": {
        "CHROME_DEVTOOLS_PORT": "9222"
      }
    }
  }
}

# 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

devtools.get_console_logs({
  level: "error",     // log | warn | error | info | debug
  limit: 50,
  clear_after: false
})

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

devtools.get_network_requests({
  url_filter: "/api/",
  method: "POST",
  status_code: 500,
  limit: 20
})

devtools.get_request_detail({
  request_id: "req-123",
  include_body: true,
  include_headers: true
})

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

devtools.get_performance_metrics({
  include_timing: true,
  include_memory: true
})

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 });
  `
})

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

devtools.query_selector({
  selector: "#main-content .card",
  include_styles: true,
  include_attributes: true
})

devtools.get_dom_tree({
  depth: 3,
  root_selector: "#app"
})

devtools.evaluate_expression({
  expression: "document.querySelectorAll('*').length"
})
// 1500+ ise performance sorunu

devtools.get_computed_styles({
  selector: ".problematic-element",
  properties: ["display", "position", "z-index", "overflow"]
})

devtools.evaluate_expression({
  expression: "JSON.stringify(window.__NEXT_DATA__, null, 2)"
})

devtools.evaluate_expression({
  expression: `
    // React DevTools hook
    const fiber = document.querySelector('#root')._reactRootContainer?._internalRoot?.current;
    JSON.stringify(fiber?.memoizedState, null, 2);
  `
})

devtools.evaluate_expression({
  expression: `
    const el = document.querySelector('.button');
    getEventListeners(el);
  `
})

// 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
})

devtools.take_heap_snapshot({
  include_summary: true
})

devtools.get_memory_info()
// Response: { jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize }

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

devtools.get_css_coverage({
  url_filter: "styles.css"
})
// Kullanilmayan CSS oranini goster

// 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 }
    }));
  `
})

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));
  `
})

devtools.run_lighthouse({
  url: "http://localhost:3000",
  categories: ["performance", "accessibility", "best-practices", "seo"],
  form_factor: "mobile"  // mobile | desktop
})

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;
  `
})

devtools.get_page_info()
// Response: url, title, status, loading_state

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

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

devtools.take_screenshot({
  format: "png",
  quality: 80,
  full_page: true
})

devtools.get_cookies({
  url: "http://localhost:3000"
})

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;
      }, {})
    })
  `
})

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

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