Inspect
Inspector
Use the Pickode inspector: box model and tooltip, live CSS editing with arrow keys, measurements with Alt, grid presets, saved CSS per site, colors and fonts.
Updated October 20, 2026
The inspector is where most work in Pickode starts. Use it to see how any element is built, change it live, measure it, and then keep the changes for that site or export the element.
How to use it
-
Press Alt+I on any website. Hover an element to see its box model and a tooltip with dimensions, font, colors and WCAG contrast.
-
Click to select it. Move to its parent or children until you have the block you want.
-
Edit property values live: put the cursor on a value and press ↑ or ↓. You can also edit the text, or hide or delete the element.
-
Keep the result: copy the selector or the HTML, take a screenshot of the element, export it, or save your edits as CSS for the site.
-
Press Esc to close one level at a time.
What the inspector includes
| Tool | Details |
|---|---|
| Tooltip | Dimensions, font, colors and WCAG contrast of the hovered element |
| Live editing | Property values with ↑/↓, text editing, hide or delete |
| Navigation and copy | Parent/child navigation, copy selector, copy HTML, element screenshot |
| Shadow DOM | Works inside closed shadow roots too |
| Measurements | Hold Alt over another element to see distances in px |
| Grid | Columns, gutter, max width, margins and baseline; Bootstrap, Tailwind and Bricks presets |
Measurements and grid
With an element selected, hold Alt and move the pointer over another one: Pickode shows the distances between them in pixels. To check alignment, lay a grid over the page and set columns, gutter, max width, margins and baseline, or start from the Bootstrap, Tailwind or Bricks preset.
Save changes to site
Edits in the inspector are live but temporary. Use “Save changes to site” to store your CSS for that domain: Pickode applies it again on every visit. It’s handy for trying a fix on a client site before you touch the theme.
Colors and fonts
From the same toolbar you open two more inspection tools:
- Colors: the page’s palette grouped by text, backgrounds and borders, in HEX, RGB or HSL, with an eyedropper to pick any color and palettes you can save. In Firefox the eyedropper works on a screenshot of the page with a magnifier.
- Fonts: every family, weight and size used on the page and the
@font-facefonts it actually loads. The font of any element is also shown in the inspector tooltip.
Free vs Pro
| Free | Pro | |
|---|---|---|
| Inspector, box model, live edit, measurements, grid | ✓ | ✓ |
| Colors, eyedropper, fonts | ✓ | ✓ |
| CSS per site | 1 site | Unlimited |
| Export from the inspector | HTML + CSS 5 per week; other formats as a partial preview | All formats |
Related
Still stuck?Contact us