Inspect reads the page you are on rather than a capture of it. Start it from the command palette, from the Inspect shortcut (Alt+Shift+I by default, rebindable in settings), or by right-clicking an element and choosing "Inspect with Stele", which pins what you clicked.
Inspecting, measuring, copying code and downloading assets are free on every plan. Your first session needs no account; after it, Stele asks you to sign in to a free account to keep inspecting. If Stele cannot reach its servers while you are signed in, inspecting keeps working.
While a session is on
The session stays on in that tab across navigations until you turn it off, so following a link keeps it running. Pages the browser does not let extensions read, its own settings pages, the Web Store and the PDF viewer, say so in one line rather than failing quietly.
- Clicking selects instead of activating, so a link does not navigate while you are reading it.
- Hover deliberately passes straight through, so the page’s own hover menus still open and can be inspected.
- Typing into one of the page’s own fields always reaches that field. Stele’s single-key shortcuts stand down while you type.
- On a site built entirely on single-key shortcuts, you can hand the keys back for that site alone.
The keys
- Arrows: move to the parent, the first child, or a sibling.
- Space: pin or unpin what is under the pointer.
- Escape: clear the newest mark, then the tool, then the pin, then leave.
- 1 to 4: Design, Code, HTML, Accessibility.
- C: copy in your default format. I: pick a colour. Shift+I: isolate the pinned element.
- M: drag a box to measure any region. Alt held: measure from the pinned element.
- G: guides along the hovered element’s edges. Shift+G: the layout grid. R: rulers.
- Shift+click a measurement to keep it on screen.
- ?: the full list, in the panel.
The panel
The panel is Stele’s own window over the page, not a browser side panel, so the page keeps its full width and its breakpoints do not change while you read it. Dock it to either side, float it, or collapse it to a pill; it remembers which. When the element you pinned ends up underneath it, it moves to the other side.
Because it is a separate document, the site cannot read it, cannot style it, and never sees a key you press inside it.
The whole page, not one element
The panel has two modes. Element reads whatever you pinned; Page reads the page. Switch with the control above the tabs, or press P. A page scan runs the first time you open a Page tab, never before, and it is capped and sliced so the page stays responsive while it runs.
- Colours: every colour the page paints, merged when they are the same to the eye, ranked by how much of the page they cover, and named by the custom property that defines it. Every text-on-background pair is graded, failures first. Choosing any colour outlines every element using it.
- Type: every family with its weights and where it loads from, and the type scale ranked by use. Preview a different family across the whole page and undo it in one step.
- Assets: every image, picture source, CSS background, inline SVG, sprite symbol and video poster, with rendered and natural size, format and bytes. Images served much larger than they are shown are flagged. Save one, a selection, or all as a zip.
- CSS: size, rules, selectors, specificity and the heaviest ten, complexity, and custom properties declared but never read or read but never declared. Choosing a row outlines what it matches.
- Accessibility: the audit over the page or over the pinned section, findings by severity with their WCAG links, plus overlays for the heading outline, landmarks, missing alt text and unlabelled fields.
- Debug: outline every element, tag labels, an overflow finder, a stacking-context map, the page without CSS, wireframe, grayscale and colour-vision filters, text expanded by 50% or 100%, placeholder images, a head check, and the page opened at a chosen width.
Every debug view is reverted when you turn it off and when the session ends. The ones that change content are edits, so ⌘Z undoes them and they appear in Changes.
The AI review
The AI review reads the pinned element or the whole view and writes back what it finds: hierarchy, spacing against the page’s own scale, contrast, and how consistently the page uses its own tokens. With a design system imported, it compares against that too. Each point links to the element it names.
Before the first review, Stele tells you that a screenshot of the view will be sent to its AI provider, and offers "Review without screenshot", which sends the structure and nothing else. Your choice is remembered. Reviews are not stored on your captures.
Each review uses one of your monthly AI runs. Free includes 3 a month; when they are gone the panel says so and when they come back.
Saving what you find
"Save with changes" saves the element as the page renders it now, with anything you changed. "Save original" saves the page’s own version and puts your changes back afterwards, so the two are two saves of one element rather than one you have to undo your way back to.
A saved element opens in the app’s inspector showing the same styles the live panel showed. "Save and generate prompt" saves it and then runs the prompt generation, which uses one of your monthly AI runs.
Coming from CSS Scan or VisBug
If you already use one of those, here is the map.
- CSS Scan’s hover-and-copy: hover, then C. The difference is that Stele shows the CSS as it was written rather than as the browser computed it, so shorthands stay whole and custom properties stay named, and the hover and breakpoint rules are there beside the base one instead of folded away.
- VisBug’s guides (G): Stele’s G too, along the hovered element’s edges. Shift+G is the layout grid and R is rulers, and you can drag a guide off a ruler. The difference is that VisBug’s guides are a drawing aid on the page; Stele’s are remembered per site, so they are there again next time.
- VisBug’s inspect and move tools: arrows navigate the tree rather than nudging an element, because Stele is reading the page rather than rearranging it. Editing lives in the Design tab.
- VisBug’s accessibility inspection: the Accessibility tab, with contrast grading against what is actually behind the text.
- What neither has: measuring between any two things (M and Alt), cross-origin stylesheets read in full, and a library that still has the element in it next month.
When something is not there
The panel says so rather than showing you an empty state. An element the page re-rendered is looked for by its shape and, when found, keeps your changes with a "found again" note; when it is really gone, the selection clears and says so. A page that keeps undoing one of your changes is marked as such after the third time rather than fought over. A frame Stele cannot reach says it cannot be inspected.