DOM Scanner Pro

Inspect layouts, compare element details and share clear, redacted fix reports. Runs locally, only on pages you choose.

DOM Scanner Pro shows what the browser actually rendered, explains it in plain language, and turns it into evidence you can share. It is built for frontend engineers, designers, QA testers and anyone learning CSS. INSPECT • Box model, visible size and layout size, and position in labelled CSS pixel coordinates • Typography with the font stack and which fonts could be confirmed • Flex and grid gaps, measured separately from margins • Images and SVG: intrinsic and rendered size, scale, srcset and object-fit • Text contrast with WCAG thresholds, or "needs review" when the background cannot be calculated • Selectors tested against the page, labelled unique, ambiguous or unstable, including shadow DOM • Computed styles you can filter and copy, the CSS rules they came from, and why an element is hidden, cut off or covered COMPARE • Pin two "identical" buttons and see exactly how they differ, with CSS to match • Save snapshots and compare staging with production, or one viewport with another, with matches you confirm REVIEW • Horizontal overflow: what makes the page scroll sideways • Accessibility rules (axe-core, bundled and run locally), target sizes, labels and a focus order walkthrough • Colour, spacing and type outliers, palette and type boards, CSS variables and token mapping • Layout shift recording, real window resizing and review checklists SHARE • Screenshots with permanent redaction and annotations • Issue reports with expected and actual results, steps, measurements and findings • Markdown, JSON, PNG and ZIP exports, saved through your browser PRIVATE BY DESIGN • Nothing runs on a page until you click the icon or use the shortcut • No account, no analytics, no network requests, no remote code • Reports are stored only in your browser, only when you choose to save them KEYBOARD AND ACCESSIBILITY • Start with Alt+Shift+D and pick with Alt+Shift+S; select the focused element and move with the arrow keys • Light and dark themes, reduced-motion support and a command menu (Ctrl/⌘ K) • Focus mode dims everything except the element you are inspecting HONEST LIMITS Chrome's own pages, the Web Store and other extensions cannot be inspected. Closed shadow roots, canvas drawings and frames you have not allowed stay unavailable. Automated accessibility checks find only some issues and are not a compliance certificate. Includes a practice playground with real layout bugs that works offline. The usage guide, privacy policy and support page are included in the extension: Settings → About.