Using DOM Scanner Pro

This guide covers every part of the side panel. If you prefer to learn by doing, open the practice playground (Settings → Open practice playground, or the command menu): it is a page with seven real layout bugs and optional hints.

Start and stop

• Start: click the toolbar icon, or press Alt+Shift+D (Option+Shift+D on macOS). The side panel opens. The badge shows … while starting and ON once the page has confirmed.
• Pick immediately: press Alt+Shift+S to start and go straight into picking.
• Stop: click the icon while the panel is open, press the shortcut again, or choose Stop in the panel. Everything DOM Scanner Pro added to the page is removed, including any CSS experiments.
• Change shortcuts: Settings → Change keyboard shortcuts (opens chrome://extensions/shortcuts).

If the panel says Allow access to this page, Chrome has not given DOM Scanner Pro access to that tab yet. Click the toolbar icon on that tab (one-time access until you leave the site), or choose Allow on this site to allow it permanently. Remove permanent access in Settings → Site access.

Some pages cannot be inspected at all: Chrome's own pages (chrome://), the Chrome Web Store and other extensions. Local file:// pages work only after you turn on Allow access to file URLs for DOM Scanner Pro in chrome://extensions.

When the page navigates, the inspection of the old page ends. DOM Scanner Pro tries to continue on the new page; if Chrome removed the temporary access, the panel asks you to click the icon again.

Choose an element

• Pick on the page: click an element. While picking, page buttons and links do not react to your clicks. Shift+click pins the element and keeps picking. Esc stops.
• Keyboard: while picking, ↑ moves to the parent, ↓ to the first child, ←/→ to siblings, Enter selects (Shift+Enter pins). Keys typed into page fields are never intercepted.
• Select focused element: selects whatever has keyboard focus on the page, so you can inspect without a pointer.
• Hold to preview: hold the key chosen in Settings (Command on macOS, Control elsewhere by default) and move the pointer for a preview that never blocks clicks.
• In the panel, the ancestor trail, Parent / Child / Prev / Next, and the back and forward history buttons move the selection. Open shadow roots appear in the trail as #shadow-root.

If the page removes or replaces the selected element (common in single-page apps), the panel marks it removed from page and does not quietly attach to a different element. Pick it again, or match it from a snapshot.

Inspect

The order of cards depends on the preset (Inspect, Design review, QA review, Learn). Simple view shows the essentials; Advanced view shows every candidate and card.

• Size and position: a box-model diagram, the visible size (after transforms) and the layout size, position in the viewport and on the page, and notes for fixed, sticky, transformed or wrapped elements. All values are CSS pixels.
• Layout: display and position, flex or grid settings, and a table of the measured distance between items split into CSS gap, margins and anything left over.
• Typography: computed font properties and the font stack with what could be confirmed for each family. Page scripts cannot read the exact font used for every glyph, so this is labelled probable.
• Selectors: candidates tested against the page right now, labelled unique or ambiguous and stable or unstable.
• Computed styles: filter, choose properties and copy them as CSS. Copied CSS includes a comment saying when it was observed.
• Image and media: intrinsic and rendered size, scale, source, srcset and object-fit, and the transfer size only when the browser exposes it.
• Text contrast: the measured ratio and AA/AAA thresholds, or needs review when the background is an image, gradient, translucent or layered.
• What this means (Learn preset): explanations of the box model, gaps and line height using the element's own numbers.
• More tools: stacking, clipping and position context; CSS rules and where they come from (cross-origin stylesheets are listed as unreadable); a Tailwind CSS v4 utility reference; sanitized reference markup; CSS experiments; frames.

CSS experiments

Enter experiment mode to try a value on the selected element. Changes are inline styles owned by DOM Scanner Pro and are listed in the card. Undo restores the exact previous value; if the page changed the same property meanwhile, the change is marked conflict and the page's value is left alone. Everything is reverted when you stop inspecting.

Frames

Embedded frames are separate documents. Find frames lists frames DOM Scanner Pro can already access and frames it cannot, by origin. Choose Allow to grant a frame's site, then Inspect to move the panel into that frame. Screenshots in a frame capture the whole visible tab.

Compare

Pin two elements, then open Compare (or Compare A and B in Inspect). The comparison lists measured differences with units, a table you can filter by group, and Copy CSS to match A. A separate box gives a possible explanation, clearly labelled as interpretation.

Snapshots save the measured styles and geometry of your pins (or the selection) with the viewport, zoom and device pixel ratio, an environment label such as staging and a scenario such as mobile width. Later, open another page and choose Find these elements on this page. Matches are listed with a confidence; nothing is compared until you confirm each one, and unresolved elements stay unresolved. Two snapshots compares two saved snapshots directly, for example staging and production.

Review

Each scan has a scope (whole page or the selected element's contents), shows progress, can be cancelled, and says when results are partial. Large pages stop at 10,000 elements and say so. Mark false positives as Not an issue; the choice is remembered for that site, so the same finding stays dismissed on later runs until you restore it. Send findings to the report draft with Add to report.

• Horizontal overflow: the page's overflow, the elements that stick out, their ancestors and likely CSS causes. Clipped and fixed elements are excluded.
• Accessibility rules: axe-core, bundled and run locally, for WCAG 2.2 A/AA and best practices. Results list automated failures, items that need a decision, and manual checks. Automated rules cover only part of accessibility.
• Text contrast, Target size and labels, Focus order: see the card descriptions. The focus walkthrough highlights each stop without moving focus unless you choose to.
• Viewports: see the real viewport, zoom and device pixel ratio, resize the window to common widths, restore it, and save the observation.
• Layout shift recording: a local recording of unexpected movement while you use the page. It is not a Core Web Vitals field score.
• Checklists: design, QA and manual accessibility templates with Pass, Fail, Not tested and Accepted states.
• Design system: colour, spacing and type outliers with adjustable thresholds; palette and type boards linked to real elements; the page's CSS custom properties, with optional mapping to a token file you load (save it with a project preset to reuse it later); and a list of asset references (nothing is downloaded).

Reports

1. Capture the visible area or the selected element. A notice reminds you that the screenshot may include private information.
2. Redact with solid boxes, and annotate with boxes, arrows and numbered notes. Keyboard users can add marks by coordinates. Apply and keep burns the marks into the pixels; the unredacted capture is discarded and was never saved.
3. Write the title, severity, expected and actual result, steps and notes. Add the selected element, the current comparison, findings and a checklist as evidence.
4. Preview shows exactly what will be exported. The page address is included only if you tick the box, and query strings are always removed.
5. Export Markdown, JSON, a review card PNG, individual screenshots, or everything as a ZIP. Save to history stores the report in this browser.

Saved reports are limited to 100 reports or 100 MB. Near the limit, the panel warns you; it never deletes reports by itself. Saved lets you open, export or delete reports, export everything, and import an export file. Imports are validated and treated as data only.

Compare screenshots shows two captures of the same size with a reveal slider (side by side when reduced motion is on) and highlights differing pixels, with regions you can ignore.

Settings

• Theme (Auto follows the system), preset, detail level, default report template and branding on exports.
• Hover key, overlay layers (box model, distances, labels, gaps, outlines of every element, and focus mode, which dims everything except the selection; also in the command menu), panel-only inspection, and the text preview.
• Outlier thresholds, project presets, site access, clearing all data, diagnostics for support, and links to this guide, the privacy policy and support.

Limits

DOM Scanner Pro reports what page scripts can measure. It labels anything it cannot know instead of guessing:

• 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.
• Cross-origin stylesheets cannot be read, so rule lists can be incomplete (the panel says which files).
• The exact platform font for each glyph is not available to extensions; the panel shows the configured stack and what it could confirm.
• Automated accessibility rules find only some barriers. Results are never a compliance certificate.
• The overlay is attached to <html>; pages whose CSS reacts to extra root children are detected and switched to panel-only inspection, but detection cannot be exhaustive.