browser-debugging

Solid

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

AI & Automation 519 stars 44 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 89/100

Stars 20%
90
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

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

Details

Author
vibeeval
Repository
vibeeval/vibecosystem
Created
4 months ago
Last Updated
1 weeks ago
Language
C#
License
MIT

Integrates with

Anthropic · AI npm · DevTools

Similar Skills

Semantically similar based on skill content — not just same category

Testing & QA Solid

browser-testing

Test and debug browser code with Chrome DevTools MCP. Use when building or debugging browser UI, inspecting the DOM, capturing console errors, analyzing network requests, or verifying visual output.

33 Updated yesterday
OutlineDriven
Testing & QA Listed

browser-testing-with-devtools

Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data via Chrome DevTools MCP.

2 Updated yesterday
LLl0k0laD
Testing & QA Solid

browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

30 Updated today
nota-america