Element Inspector
Inspect any UI element on screen — dimensions, colors, font, accessibility role, and file metadata for Finder items. Hover to highlight, click to pin the detail panel. Off by default; enable it in ProToys settings to activate.
Getting Started
Enable the tool
Element Inspector is off by default. Open the ProToys menu bar icon → Settings → Element Inspector, and toggle it on before using it.
Requirements
Element Inspector needs Accessibility permission to read UI element data from other apps. ProToys requests this during onboarding. To grant it manually: open System Settings → Privacy & Security → Accessibility and tick ProToys.
For Finder file info (size, dates, kind), the app will ask for Files and Folders access the first time you inspect a Finder item. Grant it once and the permission is remembered.
How to use
- Enable the tool in Settings (it is off by default).
- Press ⌘⌥I from anywhere to activate the inspection overlay.
- Hover over any window, app, or Finder item — a live highlight shows the element under your cursor.
- Click to inspect. The detail panel opens with all collected data.
- Click anywhere outside the detail panel, or press Esc during hover, to dismiss.
Blue highlights mean the app exposes accessibility data (dimensions, role, font, colors). Green highlights mean the app doesn't — you still get window-level info and a screenshot region.
Detail Panel
After clicking an element, a pinnable panel opens showing everything collected. It stays open until you click outside it or close it manually.
App Header
Shows the app icon, name, bundle ID, window title, and live process stats (CPU % and RAM) that arrive within ~200 ms.
File Info (Finder items only)
When you inspect a file or folder in Finder, an extra card appears with:
| Field | Description |
|---|---|
| Kind | Human-readable file type, e.g. "Shell Script", "PNG Image", "Folder" |
| Size | File size in bytes and allocated size on disk |
| Where | Full path as a breadcrumb: Macintosh HD ▸ Users ▸ … |
| Created / Modified | Creation and last-modified timestamps |
| Locked | Whether the file has the immutable flag set |
| Opens with | Default app icon and name |
| Preview | First ~1 200 characters of content for text and script files |
Text Content
When the element has a text value or selected text (text fields, labels, buttons with labels), a card shows the content with text selection enabled so you can copy it.
Dimensions
X, Y position and Width × Height in both points and pixels (Retina-adjusted). A proportional rectangle diagram gives a quick visual sense of the element's shape.
Typography
Font name, size, and weight when the element exposes font data via accessibility.
Colors
Background and foreground color swatches sampled from a screenshot of the element. Click a swatch to copy the value; right-click to choose the copy format (HEX, RGB, HSL, NSColor).
Hierarchy
Accessibility role, label, parent role, child count, window layer, and opacity.
Non-Accessibility Apps
Some apps — games, GPU-rendered UIs, some Electron apps — don't expose an accessibility tree. For these, Element Inspector falls back to window-level inspection (green highlight): you get the app name, window title, and a screenshot of the region around your cursor for color sampling and OCR-based text detection.
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Activate Element Inspector | ⌘⌥I |
| Cancel (during hover) | Esc |
| Dismiss detail panel | Click anywhere outside it |
Settings
| Setting | Description |
|---|---|
| Color format | Default format when clicking a color value to copy it: HEX, RGB, HSL, or NSColor. |