Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →bilal140202/browser-devtools-mcp
Integrating Chrome DevTools and browser automation via MCP for live UI inspection, screenshot-to-code workflows, and visual debugging. Bridges the gap between design and implementation.
Passed 16 of 19 test cases with the skill, and 8 of 19 without it.
and 16 more in the full report
10 fixed8 passed either way3 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
The layout on https://pricing.test-app.org has weird vertical misalignment between grid items. I need to inspect where element bounding boxes overlap visually.
| Checked | Without skill | With skill |
|---|---|---|
| Injects visual outline debug styles into the DOM via browser script evaluation | Missed | Passed |
| Captures a screenshot displaying visual debug outlines | Missed | Passed |
The instructions your model reads when the skill loads.
Leverage browser automation and DevTools through MCP (Model Context Protocol) for live UI inspection, screenshot-to-code workflows, and visual debugging. This skill enables direct observation and manipulation of running interfaces.
Model Context Protocol (MCP) is Anthropic's standard for connecting LLMs to external tools. It provides:
+-------------------+ +-------------------+ +-------------------+
| Playwright MCP | | Puppeteer MCP | | Chrome DevTools |
| (Full browser) | | (Headless) | | Protocol (CDP) |
+-------------------+ +-------------------+ +-------------------+
| | |
+-----------+-------------+-----------+-------------+
| |
+------v------+ +------v------+
test cases passed, vs 8 / 19 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.