Inspect Mode

Inspect mode is the default when you activate Raval. Hover to see what is under the cursor, click to see everything about it — without opening DevTools.

How it works

1. Activate Raval (Option+Shift+C on Mac, Alt+Shift+C elsewhere).
2. Hover over the page. Elements are outlined and labelled with width × height; words of text are highlighted.
3. Click an element or a word to open its details.
4. Click it again, click empty space, or press Esc to close the details.

The details panel

The panel opens next to what you clicked, with the tag and size at the top and one section open at a time:

• Typography (when you click text) — font, size, weight, line height, and letter spacing, with a Copy CSS button.
• Colours — text, background, and border colours in HEX, RGB, or HSL. Press F to cycle the format.
• Box — margin, border, padding, and corner radius.

Click any value to copy it. A closed section previews its contents in its header.

Rulers

Enable Rulers in the options card, or press R, to show pixel rulers along the viewport edges.