element-inspectorlisted

# Element Inspector — Autonomous DOM Debugging ## MCP Tool (preferred) ``` mcp__scitex__ui_inspect_element(selector="#ws-worktree-resizer") mcp__scitex__ui_inspect_elements(selector=".panel-resizer", limit=5) ``` Standalone — works on any website open in playwright-cli. ## Manual via playwright-cli eval When MCP tool unavailable, use playwright-cli eval directly: ### Single element computed styles ```bash playwright-cli eval 'JSON.stringify({position: getComputedStyle(document.querySelector("#SELECTOR")).position, width: getComputedStyle(document.querySelector("#SELECTOR")).width})' ``` ### Multiple properties at once ```bash playwright-cli eval 'var cs = getComputedStyle(document.querySelector("#SELECTOR")); JSON.stringify({position: cs.position, width: cs.width, height: cs.height, cursor: cs.cursor, display: cs.display, flex: cs.flex, flexDirection: cs.flexDirection})' ``` ### Check inline styles (set by JS) ```bash playwright-cli eval 'document.querySelector("#SELECTOR").style.cssText' ``` ### Parent chain ```bash playwright-cli eval 'var p = document.querySelector("#SELECTOR").parentElement; var chain = []; for(var i=0; i<4 && p; i++) { chain.push(p.tagName + (p.id ? "#"+p.id : "")); p = p.parentElement; } JSON.stringify(chain)' ``` ### Element dimensions/position ```bash playwright-cli eval 'Math.round(document.querySelector("#SELECTOR").getBoundingClientRect().top)' ``` ## Key Patterns for CSS Debugging ### !important specificity wars When mobile CSS uses `!imp