Back to Docs

Element Inspector

The Element Inspector gives you a read-optimised view of any element on the page. It's designed for quick lookups, not as a replacement for DevTools — you open it, get the information you need, and get back to work.

Opening the Inspector

  1. Click the InspectDev icon to open the side panel
  2. Select the Element Inspector tool (cursor icon) from the toolbar
  3. Click Pick Element to enter picker mode
  4. Hover any element on the page — it highlights as you move
  5. Click to select it and see its properties in the panel

What You See

Once an element is selected, the inspector displays:

Styles The matched CSS rules applied to the element, ordered by specificity. Each rule shows the selector and source file. Inherited properties are dimmed so you can spot what's explicitly set vs what comes from a parent.

Computed The final computed values for every CSS property. Use the filter input to search for a specific property (e.g. display, color, font-size).

Box Model A visual representation of the element's margin, border, padding, and content dimensions. Width and height values are shown inline.

ARIA Attributes If the element has ARIA roles, states, or properties, they're listed here with their current values — useful for a quick accessibility check without opening a separate audit tool.

Copying Values

Click any property value or dimension to copy it to your clipboard. The format is clean and pasteable: color: #333, width: 320px.

Pick Mode

While in picker mode, you can:

  • Hold Shift to lock the highlight on the current element
  • Press Escape to exit picker mode without deselecting
  • Use arrow keys to navigate to sibling or parent elements

Keyboard Shortcuts

Action Shortcut
Toggle picker mode Ctrl+P / Cmd+P
Exit picker mode Escape
Navigate to parent Ctrl+Up
Navigate to next sibling Ctrl+Right
Copy selected value Ctrl+C

Tips

  • The inspector updates live as the page changes — mutations, style changes, and class toggles are reflected immediately
  • Use the inspector alongside other InspectDev tools: pick a color, then inspect how it's applied