Keyboard Shortcuts & DOM Traversal

Vibe Inspect is built for keyboard-first developers who want to avoid the friction of manual DevTools clicking.

Global Activation Shortcuts

Shortcut	Scope	Action
Ctrl + Shift + X (⌘ on macOS)	Global Tab	Toggle Continuous Inspection Mode
Alt + Shift + X	Global Tab	Activate Single-shot Pick Mode

Customizing Hotkeys

You can change the global trigger keys at any time by visiting chrome://extensions/shortcuts in your browser.

Continuous vs Single-Shot Modes

Continuous Pick Mode (Ctrl+Shift+X)

• Use Case: Batch inspecting components, redesigning entire pages, or collecting multiple UI targets for an agent workflow.
• Behavior: Hover over elements to inspect box models. Clicking an element copies its prompt to the clipboard and shows a confirmation toast, but keeps the HUD active so you can immediately inspect the next element.
• Exit: Press Esc or press Ctrl+Shift+X again.

Single-Shot Pick Mode (Alt+Shift+X)

• Use Case: Fast inline question while writing code in your IDE.
• Behavior: Pick one target element. The moment you click, the prompt is copied to your clipboard and Vibe Inspect immediately shuts down, restoring normal pointer interaction.

In-HUD DOM Navigation (Direction Keys)

When inspecting deeply nested web components, clicking tiny buttons or overlapping SVG icons can be difficult. Use keyboard arrows instead:

Key	Navigation Target	Details
↑ (Up)	Parent Element	Ascend to the enclosing container (e.g. from <span> to <button> or <form>).
↓ (Down)	Child Element	Descend into child nodes. Equipped with WeakMap Smart Memory to return to the last focused child.
← / →	Sibling Elements	Cycle horizontally across adjacent DOM siblings.
Esc	Cancel / Exit	Dismiss the overlay without altering clipboard contents.

Understanding the Box-Model HUD

The HUD overlay mimics Chrome DevTools color coding with dynamic coordinate correction for CSS transforms and page zoom:

• Margin Layer (Amber #F59E0B): Shows outer spacing between sibling components.
• Border Layer (Yellow #EAB308): Visualizes boundary stroke thickness.
• Padding Layer (Green #22C55E): Shows inner content breathing room.
• Content Layer (Blue #3B82F6): Displays actual text, images, or child node dimensions.