How do I install the Chrome Debug Screenshot skill?

Run npx skillmds@latest add catesandrew/chrome-debug-screenshot in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Chrome Debug Screenshot safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Chrome Debug Screenshot?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Chrome Debug Screenshot free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Chrome Debug Screenshot?

catesandrew (@catesandrew) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Chrome Debug Screenshot by catesandrew

Name: Chrome Debug Screenshot
Author: catesandrew

File contents

chrome-debug-screenshot

Systematic diagnosis for Chrome MCP screenshot failures. Tries multiple parameter combinations in order and reports which works, so you can use the correct approach going forward.

Requires: Chrome DevTools MCP server running and connected.

Inputs

Variable	Description	Example
`${input:selector}`	CSS selector of the element to screenshot	`#submit-button`, `.modal-container`
`${input:filePath}`	Preferred output path	`/tmp/debug-screenshot.png`

Procedure

Work through these steps in order. Stop at the first success and report the winning approach.

Step 1: Plain full-page screenshot (baseline)

mcp__chrome__take_screenshot: { "path": "/tmp/mcp-plain-test.png" }

Record: success or error message.

Step 2: DOM snapshot with frames

mcp__chrome__take_snapshot: { "includeAccessibility": true, "includeAttributes": true, "includeFrames": true }

Find first node matching ${input:selector}. Extract:

uid — the node's unique identifier
frameId — if the node is inside an iframe

Step 3: Scroll & verify element rect

(() => {
  element.scrollIntoView({ block: 'center', inline: 'center' });
  const r = element.getBoundingClientRect();
  return { x: r.x, y: r.y, width: r.width, height: r.height };
})()

If width <= 0 || height <= 0: element is not visible — note "non-visible" and skip clip attempts.

Step 4: Element screenshot attempts (try in order)

Attempt A — path + clipToElementBounds:

{ "uid": "<uid>", "clipToElementBounds": true, "path": "${input:filePath}" }

Attempt B — filePath + clipToElement:

{ "uid": "<uid>", "clipToElement": true, "filePath": "${input:filePath}" }

Attempt C — uid only, no clip:

{ "uid": "<uid>", "path": "${input:filePath}" }

Attempt D — full page with absolute path:

{ "path": "${input:filePath}" }

Step 5: Report

Document which attempt succeeded and the full path written.

Output Format

Step	Result	Error / Notes
Plain screenshot	✅ / ❌
Snapshot + uid	`<uid>` `<frameId?>`
Element rect	`{w, h}`	visible?
Attempt A	✅ / ❌
Attempt B	✅ / ❌
Attempt C	✅ / ❌
Attempt D	✅ / ❌

Conclusion

Most likely cause: <explain> Working approach: <parameter combination that succeeded> Fix for future use: <recommendation>

Common Root Causes

Symptom	Likely cause
All attempts fail	MCP server not running / no active Chrome tab
Plain works, element fails	Element inside iframe — need `frameId`
Returns wrong element	Multiple matches — refine selector
Element rect is 0×0	Element is hidden (`display:none`, `visibility:hidden`, or outside viewport)
Path write error	Directory doesn't exist — create with `fs.mkdirSync` first
`path` works but `filePath` doesn't	Chrome MCP version uses `path` parameter, not `filePath`

Notes

Chrome MCP versions differ on whether the screenshot parameter is called path or filePath — this skill tests both.
Elements inside Storybook's preview iframe require includeFrames: true in the snapshot to be discovered.
If uid is found but screenshot of it fails, the element may be in a cross-origin iframe (cannot screenshot).

---name: chrome-debug-screenshotdescription: Use when Chrome DevTools MCP screenshot calls are failing or producing unexpected results — systematically diagnoses path, uid, frame, and clip parameter issues.---# chrome-debug-screenshotSystematic diagnosis for Chrome MCP screenshot failures. Tries multiple parameter combinations in order and reports which works, so you can use the correct approach going forward.**Requires:** Chrome DevTools MCP server running and connected.## Inputs| Variable | Description | Example ||----------|-------------|---------|| `${input:selector}` | CSS selector of the element to screenshot | `#submit-button`, `.modal-container` || `${input:filePath}` | Preferred output path | `/tmp/debug-screenshot.png` |## ProcedureWork through these steps in order. Stop at the first success and report the winning approach.### Step 1: Plain full-page screenshot (baseline)```jsonmcp__chrome__take_screenshot: { "path": "/tmp/mcp-plain-test.png" }```Record: success or error message.### Step 2: DOM snapshot with frames```jsonmcp__chrome__take_snapshot: { "includeAccessibility": true, "includeAttributes": true, "includeFrames": true }```Find first node matching `${input:selector}`. Extract:- `uid` — the node's unique identifier- `frameId` — if the node is inside an iframe### Step 3: Scroll & verify element rect```js(() => { element.scrollIntoView({ block: 'center', inline: 'center' }); const r = element.getBoundingClientRect(); return { x: r.x, y: r.y, width: r.width, height: r.height };})()```If `width <= 0 || height <= 0`: element is not visible — note "non-visible" and skip clip attempts.### Step 4: Element screenshot attempts (try in order)**Attempt A** — `path` + `clipToElementBounds`:```json{ "uid": "<uid>", "clipToElementBounds": true, "path": "${input:filePath}" }```**Attempt B** — `filePath` + `clipToElement`:```json{ "uid": "<uid>", "clipToElement": true, "filePath": "${input:filePath}" }```**Attempt C** — `uid` only, no clip:```json{ "uid": "<uid>", "path": "${input:filePath}" }```**Attempt D** — full page with absolute path:```json{ "path": "${input:filePath}" }```### Step 5: ReportDocument which attempt succeeded and the full path written.## Output Format| Step | Result | Error / Notes ||------|--------|---------------|| Plain screenshot | ✅ / ❌ | || Snapshot + uid | `<uid>` `<frameId?>` | || Element rect | `{w, h}` | visible? || Attempt A | ✅ / ❌ | || Attempt B | ✅ / ❌ | || Attempt C | ✅ / ❌ | || Attempt D | ✅ / ❌ | |### Conclusion**Most likely cause:** `<explain>`**Working approach:** `<parameter combination that succeeded>`**Fix for future use:** `<recommendation>`## Common Root Causes| Symptom | Likely cause ||---------|-------------|| All attempts fail | MCP server not running / no active Chrome tab || Plain works, element fails | Element inside iframe — need `frameId` || Returns wrong element | Multiple matches — refine selector || Element rect is 0×0 | Element is hidden (`display:none`, `visibility:hidden`, or outside viewport) || Path write error | Directory doesn't exist — create with `fs.mkdirSync` first || `path` works but `filePath` doesn't | Chrome MCP version uses `path` parameter, not `filePath` |## Notes- Chrome MCP versions differ on whether the screenshot parameter is called `path` or `filePath` — this skill tests both.- Elements inside Storybook's preview iframe require `includeFrames: true` in the snapshot to be discovered.- If `uid` is found but screenshot of it fails, the element may be in a cross-origin iframe (cannot screenshot).

Frequently asked questions

Chrome Debug Screenshot