browser-debugging

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