Verbatim get started
Verbatim is installed
It reads the CSS that actually applied to a page, by resolving the cascade rather than dumping computed styles. Here is the first thirty seconds.
Open any page and press Alt+Shift+P. A toolbar appears inside the page. Press P, hover to outline something, and click it.
Three things worth doing now
- Pin it. Click the puzzle-piece icon in the Chrome toolbar and pin Verbatim, so the icon stays where you can reach it.
- Try it on this page. Press Alt+Shift+P, then P, then click any heading or card here. The window that opens has the markup on the left, every rule that applies on the right in cascade order, and the extraction rendered back underneath so you can see it is right.
- Learn the one shortcut that matters. Everything else is a single letter once the toolbar is open, and Esc closes it.
The thirteen tools, one key each
| Key | Tool | What it gives you |
|---|---|---|
| P | Pick element | Real CSS in cascade order, with states, breakpoints and tokens intact |
| M | Measure | The box model shaded in place, with rulers to the viewport edges |
| D | Design system | Palette by coverage, type scale, spacing, radii, contrast |
| B | Design prompt | The whole page as one document for an AI to build from |
| C | Sample a colour | Any pixel on screen, including inside images and video |
| F | Fonts in use | The family that really rendered, with sizes, weights and files |
| I | Images and SVGs | Every image on the page, packed as one zip in your browser |
| E | Edit text | Type over any text, in the real layout at the real width |
| X | Hide elements | Remove a banner or a sticky header. Z brings it back |
| V | Move elements | Drag anything without reflowing what is around it |
| S | Screenshot | One element, with the toolbar out of the shot |
| W | Save page HTML | The page exactly as it stands, as one file |
| G | Send to agent | Hand the selection to a coding agent on your machine |
Z undoes the last hide or move. Esc closes the toolbar.
If you work with a coding agent
There is an optional server that gives an editor speaking the Model Context Protocol the same extraction as tools it calls itself, including a step it can use to verify its own work. One line to install, and it covers the pages an agent cannot reach on its own: anything behind a login, and any element that only exists while a menu is held open.
Set up the MCP server Read the guides
If something does not work
- The shortcut does nothing
- Another extension has probably taken Alt+Shift+P. Open
chrome://extensions/shortcutsand set your own, or just click the Verbatim icon instead. - Nothing happens on a Chrome page
- No extension can run on
chrome://pages, the Chrome Web Store, or the built-in PDF viewer. That is a browser rule rather than a limitation here. Try any ordinary web page. - Hovering an embedded frame says it cannot be picked
- A frame from another origin is sealed by the browser to every extension. Same-origin frames work normally.
- Some styles look missing
- A stylesheet that failed to load says so in the window rather than pretending. Reload and try again; it is almost always a network hiccup on the site's own CDN.
- It did not appear at all
- Reload the page once after installing. A tab that was already open before the extension existed has to be reloaded before anything can be injected into it.
What it sends
Nothing. There is no account, no sign in and no server of ours for anything to be uploaded to, and nothing is injected into any page until you press the shortcut or click the icon. Settings live in local storage on your own device. The one exception is the optional AI key, which is empty by default and is described in full in the privacy policy.