Agent skill · AI & Agents

browser-debugging

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

vibeevalgithub.com/vibeevalGitHub ↗
claude-codeMIT
Install
npx skills add vibeeval/vibecosystem --skill browser-debugging --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 1
SKILL.md size: 11 KB
Bundled scripts: none
Path: skills/browser-debugging/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 521
Language: C#

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# 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 (pro

What's inside
Steps it walks through
  1. Chrome DevTools MCP Setup
  2. Kurulum
  3. MCP Config (~/.mcp.json)
  4. Chrome'u Debug Modunda Baslat
  5. Console Log Okuma ve Analiz
  6. Console Mesajlarini Yakala
  7. Console Mesaj Analizi
  8. Yaygin Console Hatalari
  9. Network Request Izleme
  10. Request'leri Listele
  11. Request Detayi
  12. Network Analiz Tablosu
  13. Yaygin Network Sorunlari
  14. Performance Profiling
Commands it runs
NPM ile
npm install -g @anthropic/chrome-devtools-mcp
veya npx ile (kurulum gerektirmez)
npx @anthropic/chrome-devtools-mcp
macOS
Linux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
Headless mod
google-chrome --headless --remote-debugging-port=9222
More from vibecosystem
All skills →
frontend-devFull-stack frontend development combining premium UI design, cinematic animations, AI-generated…Frontendminimax-pdfUse this skill when visual quality and design identity matter for a PDF. CREATE (generate from…Code Review & Qualitycontinuous-learning-v2Instinct-based learning system that observes sessions via hooks, creates atomic instincts with…Othercontinuous-learningAutomatically extract reusable patterns from Claude Code sessions and save them as learned skills…AI & Agentsminimax-docxProfessional DOCX document creation, editing, and formatting using OpenXML SDK (.NET). Three…Content & Marketingminimax-xlsxOpen, create, read, analyze, edit, or validate Excel/spreadsheet files (.xlsx, .xlsm, .csv, .tsv).…Data & Analytics
About this skill
What does the browser-debugging skill do?

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

How do I install it?

Run `npx skills add vibeeval/vibecosystem --skill browser-debugging --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.