Run comprehensive diagnostics on an element or the entire page. Checks CSS, JS errors, accessibility, and more.
Runs comprehensive diagnostics on web pages or specific elements, checking visual layout, JavaScript errors, network failures, and accessibility issues.
/plugin marketplace add AnthemFlynn/ccmp/plugin install website-debug@ccmpselectoropusRun comprehensive diagnostics on a specific element or the entire page.
Check element exists:
node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-eval.js 'document.querySelector("$ARGUMENTS") !== null'
Get element details:
node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-eval.js '(() => {
const el = document.querySelector("$ARGUMENTS");
if (!el) return "Element not found";
const s = getComputedStyle(el);
const r = el.getBoundingClientRect();
return {
tag: el.tagName,
id: el.id,
classes: [...el.classList],
dimensions: { width: r.width, height: r.height },
position: { top: r.top, left: r.left },
styles: {
display: s.display,
visibility: s.visibility,
opacity: s.opacity,
position: s.position,
zIndex: s.zIndex,
overflow: s.overflow,
flex: s.display === "flex" ? { direction: s.flexDirection, justify: s.justifyContent, align: s.alignItems } : null,
grid: s.display === "grid" ? { columns: s.gridTemplateColumns, rows: s.gridTemplateRows } : null
},
text: el.textContent?.slice(0, 100)
};
})()'
Screenshot element:
node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-screenshot.js --selector="$ARGUMENTS"
Take screenshot:
node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-screenshot.js
Check for JavaScript errors:
node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-console.js --errors
Check network failures:
node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-network.js --failures
Get page summary:
node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-dom.js
Check accessibility basics:
node ~/.claude/plugins/**/website-debug/skills/website-debug/scripts/browser-eval.js '(() => {
const issues = [];
// Images without alt
const imgs = document.querySelectorAll("img:not([alt])");
if (imgs.length) issues.push(`${imgs.length} images missing alt text`);
// Buttons/links without text
const emptyBtns = [...document.querySelectorAll("button, a")].filter(el => !el.textContent.trim() && !el.getAttribute("aria-label"));
if (emptyBtns.length) issues.push(`${emptyBtns.length} buttons/links without accessible text`);
// Form inputs without labels
const inputs = document.querySelectorAll("input:not([type=hidden]):not([type=submit])");
const unlabeled = [...inputs].filter(i => !i.getAttribute("aria-label") && !document.querySelector(`label[for="${i.id}"]`));
if (unlabeled.length) issues.push(`${unlabeled.length} form inputs without labels`);
return issues.length ? issues : "No basic accessibility issues found";
})()'
Provide a structured diagnosis: