Claude Code Probe

About

Inspect any element on a webpage — see its structure, styles, and copy element info or screenshots to your clipboard in one click.

Full description:

Claude Code Probe lets you inspect, highlight, and copy any element on any webpage — built for developers who want to quickly grab element details without open DevTools.

How it works:
- Click the extension icon to activate Probe Mode
- Hover over any element to see a wireframe overlay showing its boundaries, with a live info card displaying the tag name, classes, dimensions, computed styles, and DOM breadcrumb path
- Click to select an element, then choose from three copy actions:
  - Copy Element — copies a structured summary including CSS selector path, skeleton HTML, computed styles, and dimensions
  - Copy Screenshot — captures a pixel-perfect screenshot of the element to your clipboard
  - Copy Both — copies the structured summary and screenshot together
  - Press Escape to deselect, or press again to exit Probe Mode

Features:
- Wireframe-style highlight that doesn't block the content underneath
- Smooth transitions as you move between elements
- Live info card with tag, id, classes, dimensions, layout properties, accessibility attributes, and breadcrumb path
- Skeleton HTML capture that preserves structure without copying massive text content
- Screenshot capture with proper background color resolution
- Works on Chrome and Firefox
- Zero impact on page performance when Probe Mode is off

Perfect for:
- Quickly grabbing element details to paste into Claude Code or any AI coding assistant
- Sharing visual + structural context about a UI element with your team
- Inspecting unfamiliar layouts without diving into DevTools