browser-debugging
starsforks
How to install browser-debugging?
vibeeval/vibecosystem/browser-debugging
$npx -y skills add vibeeval/vibecosystem --skill browser-debugging--- name: browser-debugging description: "Chrome DevTools MCP ile browser debugging. Console, network, performance, DOM analizi." ---
SKILL.md
| 1 | # Browser Debugging (Chrome DevTools MCP) |
| 2 | |
| 3 | ## Chrome DevTools MCP Setup |
| 4 | |
| 5 | ### Kurulum |
| 6 | |
| 7 | ```bash |
| 8 | # NPM ile |
| 9 | npm install -g @anthropic/chrome-devtools-mcp |
| 10 | |
| 11 | # veya npx ile (kurulum gerektirmez) |
| 12 | npx @anthropic/chrome-devtools-mcp |
| 13 | ``` |
| 14 | |
| 15 | ### MCP Config (~/.mcp.json) |
| 16 | |
| 17 | ```json |
| 18 | { |
| 19 | "mcpServers": { |
| 20 | "chrome-devtools": { |
| 21 | "command": "npx", |
| 22 | "args": ["-y", "@anthropic/chrome-devtools-mcp"], |
| 23 | "env": { |
| 24 | "CHROME_DEVTOOLS_PORT": "9222" |
| 25 | } |
| 26 | } |
| 27 | } |
| 28 | } |
| 29 | ``` |
| 30 | |
| 31 | ### Chrome'u Debug Modunda Baslat |
| 32 | |
| 33 | ```bash |
| 34 | # macOS |
| 35 | /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ |
| 36 | --remote-debugging-port=9222 \ |
| 37 | --user-data-dir=/tmp/chrome-debug |
| 38 | |
| 39 | # Linux |
| 40 | google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug |
| 41 | |
| 42 | # Headless mod |
| 43 | google-chrome --headless --remote-debugging-port=9222 |
| 44 | ``` |
| 45 | |
| 46 | ## Console Log Okuma ve Analiz |
| 47 | |
| 48 | ### Console Mesajlarini Yakala |
| 49 | |
| 50 | ``` |
| 51 | devtools.get_console_logs({ |
| 52 | level: "error", // log | warn | error | info | debug |
| 53 | limit: 50, |
| 54 | clear_after: false |
| 55 | }) |
| 56 | ``` |
| 57 | |
| 58 | ### Console Mesaj Analizi |
| 59 | |
| 60 | | Seviye | Anlam | Aksiyon | |
| 61 | |--------|-------|---------| |
| 62 | | error | Runtime hatasi | HEMEN fix et | |
| 63 | | warn | Potansiyel sorun | Incele, gerekiyorsa fix | |
| 64 | | info | Bilgi mesaji | Debug icin kullan | |
| 65 | | log | Debug output | Temizle (production'da olmamali) | |
| 66 | |
| 67 | ### Yaygin Console Hatalari |
| 68 | |
| 69 | ``` |
| 70 | // TypeError: Cannot read properties of undefined |
| 71 | → Null check eksik, optional chaining kullan: obj?.prop |
| 72 | |
| 73 | // CORS error |
| 74 | → Backend'de Access-Control-Allow-Origin header eksik |
| 75 | |
| 76 | // Uncaught Promise rejection |
| 77 | → async/await'te try/catch eksik |
| 78 | |
| 79 | // React: Each child should have a unique key |
| 80 | → map() icinde key={unique_id} ekle |
| 81 | |
| 82 | // React: Maximum update depth exceeded |
| 83 | → useEffect dependency array'de sonsuz dongu |
| 84 | ``` |
| 85 | |
| 86 | ## Network Request Izleme |
| 87 | |
| 88 | ### Request'leri Listele |
| 89 | |
| 90 | ``` |
| 91 | devtools.get_network_requests({ |
| 92 | url_filter: "/api/", |
| 93 | method: "POST", |
| 94 | status_code: 500, |
| 95 | limit: 20 |
| 96 | }) |
| 97 | ``` |
| 98 | |
| 99 | ### Request Detayi |
| 100 | |
| 101 | ``` |
| 102 | devtools.get_request_detail({ |
| 103 | request_id: "req-123", |
| 104 | include_body: true, |
| 105 | include_headers: true |
| 106 | }) |
| 107 | ``` |
| 108 | |
| 109 | ### Network Analiz Tablosu |
| 110 | |
| 111 | | Metrik | Iyi | Kotu | Kontrol | |
| 112 | |--------|-----|------|---------| |
| 113 | | TTFB | <200ms | >600ms | Server response suresi | |
| 114 | | Download | <100ms | >500ms | Payload buyuklugu | |
| 115 | | Total time | <500ms | >2s | Butun pipeline | |
| 116 | | Payload size | <100KB | >1MB | Compression, pagination | |
| 117 | | Request count | <50/sayfa | >100/sayfa | Batching, caching | |
| 118 | |
| 119 | ### Yaygin Network Sorunlari |
| 120 | |
| 121 | ``` |
| 122 | Status 401 → Token expired, auth flow kontrol et |
| 123 | Status 403 → Permission eksik, RBAC kontrol et |
| 124 | Status 404 → URL yanlis, routing kontrol et |
| 125 | Status 429 → Rate limited, backoff ekle |
| 126 | Status 500 → Server error, backend log'lara bak |
| 127 | Status 502 → Proxy/gateway sorunu, infra kontrol et |
| 128 | CORS error → Preflight (OPTIONS) basarisiz |
| 129 | Mixed content → HTTPS sayfada HTTP request |
| 130 | ``` |
| 131 | |
| 132 | ## Performance Profiling |
| 133 | |
| 134 | ### Performance Snapshot |
| 135 | |
| 136 | ``` |
| 137 | devtools.get_performance_metrics({ |
| 138 | include_timing: true, |
| 139 | include_memory: true |
| 140 | }) |
| 141 | ``` |
| 142 | |
| 143 | ### Core Web Vitals Olcumu |
| 144 | |
| 145 | ``` |
| 146 | devtools.evaluate_expression({ |
| 147 | expression: ` |
| 148 | new PerformanceObserver((list) => { |
| 149 | for (const entry of list.getEntries()) { |
| 150 | console.log(entry.name, entry.value || entry.startTime); |
| 151 | } |
| 152 | }).observe({ type: 'largest-contentful-paint', buffered: true }); |
| 153 | ` |
| 154 | }) |
| 155 | ``` |
| 156 | |
| 157 | ### Performance Metrikleri |
| 158 | |
| 159 | | Metrik | Hedef | Olcum | |
| 160 | |--------|-------|-------| |
| 161 | | LCP | <2.5s | En buyuk elementin renderlanma suresi | |
| 162 | | FID/INP | <100ms | Ilk input'a tepki suresi | |
| 163 | | CLS | <0.1 | Gorsel kayma skoru | |
| 164 | | FCP | <1.8s | Ilk icerigin gorundugu an | |
| 165 | | TTI | <3.8s | Tamamen interaktif olma suresi | |
| 166 | | TBT | <200ms | Main thread bloklanma suresi | |
| 167 | |
| 168 | ### Performance Anti-Patterns |
| 169 | |
| 170 | ``` |
| 171 | 1. Layout thrashing: DOM oku/yaz/oku/yaz (batch et) |
| 172 | 2. Forced reflow: offsetHeight gibi prop'lar reflow tetikler |
| 173 | 3. Unoptimized images: WebP/AVIF kullan, lazy load et |
| 174 | 4. Render blocking CSS: Critical CSS inline, gerisi async |
| 175 | 5. Long tasks: 50ms+ main thread task'lari parcala |
| 176 | 6. Excessive DOM: 1500+ node varsa virtual scroll kullan |
| 177 | ``` |
| 178 | |
| 179 | ## DOM Inspection |
| 180 | |
| 181 | ### Element Sec ve Incele |
| 182 | |
| 183 | ``` |
| 184 | devtools.query_selector({ |
| 185 | selector: "#main-content .card", |
| 186 | include_styles: true, |
| 187 | include_attributes: true |
| 188 | }) |
| 189 | ``` |
| 190 | |
| 191 | ### DOM Tree |
| 192 | |
| 193 | ``` |
| 194 | devtools.get_dom_tree({ |
| 195 | depth: 3, |
| 196 | root_selector: "#app" |
| 197 | }) |
| 198 | ``` |
| 199 | |
| 200 | ### Element Sayisi Kontrol |
| 201 | |
| 202 | ``` |
| 203 | devtools.evaluate_expression({ |
| 204 | expression: "document.querySelectorAll('*').length" |
| 205 | }) |
| 206 | // 1500+ ise performance sorunu |
| 207 | ``` |
| 208 | |
| 209 | ### Computed Styles |
| 210 | |
| 211 | ``` |
| 212 | devtools.get_computed_styles({ |
| 213 | selector: ".problematic-element", |
| 214 | properties: ["display", "position", "z-index", "overflow"] |
| 215 | }) |
| 216 | ``` |
| 217 | |
| 218 | ## JavaScript Debugging |
| 219 | |
| 220 | ### Expression Eva |
People who liked this also viewed
6 picksType
- azure-diagnosticsDebug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deploySkillsJul 2026
- systematic-debuggingUse when encountering any bug, test failure, or unexpected behavior, before proposing fixesSkillsJul 2026
- safe-debugRigor Debug / Rigor Audit skill for deep learning research work. Use when the user pastes a traceback, terminal error, CUDA OOM, checkpoint load failure, shape mismatch, NaN loss symptom, or training SkillsMay 2026
- explore-runRigor Improve / Rigor Explore run leaf skill for bounded exploratory evidence in deep learning research repositories. Use when the researcher explicitly authorizes exploratory runs such as small-subseSkillsMay 2026
- minimal-run-and-auditRigor Run skill for README-first deep learning repo reproduction. Use when the task is specifically to capture or normalize evidence from the selected smoke test or documented inference or evaluation SkillsMay 2026
- insforge-debugUse when diagnosing problems in an InsForge project — reactive failures (SDK error object, HTTP 4xx/5xx, gateway timeout 502/503/504, edge function failure or timeout, login/OAuth/auth errors, RLS denSkillsJul 2026
