Debug Web App with DevTools
curated by SkillMD · plugin · 7 skills
Install this pack to test and debug a web application in a real browser using Chrome DevTools MCP.
Install the whole plugin (CLI)
npx skillmds add addyosmani/browser-testing-with-devtools
npx skillmds add addyosmani/debugging-and-error-recovery
npx skillmds add alirezarezvani/focused-fix
npx skillmds add dangquangse/playwright-skill
npx skillmds add sdiamante13/agent-browser
npx skillmds add huuanh20/playwright-skill
npx skillmds add samuelpatro/agent-browserSkills in this plugin
- ▌ browser-testing-with-devtools · addyosmaniTests and debugs web applications in real browsers using Chrome DevTools MCP, enabling DOM inspection, console error capture, network analysis, performance profiling, and visual verification with live runtime data.
- ▌ debugging-and-error-recovery · addyosmaniProvides a structured triage process for debugging test failures, build errors, runtime bugs, and production incidents, including steps to reproduce, localize, fix, and guard against recurrence.
- ▌ focused-fix · alirezarezvaniSystematically repair a broken feature or module by scoping, tracing dependencies, diagnosing all issues, fixing them in order, and verifying end-to-end.
- ▌ playwright-skill · dangquangse bundleAutomates browser testing and interaction with Playwright, including form filling, screenshots, responsive checks, and login flows, with automatic dev server detection.
- ▌ agent-browser · sdiamante13 bundleAutomates browser interactions for web testing, form filling, screenshots, and data extraction.
- ▌ playwright-skill · huuanh20 bundleAutomates browser interactions and testing with Playwright, including form filling, screenshots, responsive checks, and login flows, with automatic dev server detection.
- ▌ agent-browser · samuelpatroAutomates Chrome/Chromium via CDP with accessibility-tree snapshots and element refs, covering web pages, Electron apps, Slack, and cloud browsers.