螢幕截圖

詳細介紹

Pixel-perfect checks in one hover. See sizes, spacing and styles of any element on any page, right where you look. Built for designers, QA and front-end developers. HOW IT WORKS Click the Hover Inspector button in the toolbar on any page. Hover over elements to see their size, padding, margin and styles. Click an element to select it, then hover another one to see the distances between the two. Open more tools from the floating panel. Press Esc to turn the extension off. TOOLS IN ONE PANEL • Element Inspector: size, padding, margin, font, colors and other styles of the hovered element, plus its distances to the selected one. • Page Ruler: the current viewport size compared with common device widths and CSS framework breakpoints. • Color Picker: pick solid colors and gradients from the page and copy them as HEX or rgba(). • Unit Converter: convert between px, rem, em, %, vw and vh. • Color Palette & Typography: the page's colors, type scale, spacing, radii and shadows, compared with your design theme. • Automation Scenarios: record, edit and replay step-by-step scenarios on a page. • CSS Snapshot Inspector: capture the CSS of a page or an element and compare two snapshots side by side. • Live Watching: a floating log of your actions across pages that turns repeated steps into reusable scenarios. DOES NOT GET IN THE WAY The whole interface runs in an isolated shadow root, so it does not change the page's own styles, and turning it off removes everything it added. FOR AI AGENTS (OPTIONAL) An optional local MCP server lets AI coding agents such as Claude Code, Cursor or Codex read a page's palette and type scale, take CSS snapshots and screenshots, and run scenarios through the extension. It is off until you turn it on and only talks to 127.0.0.1. PRIVACY Your settings, scenarios, snapshots and watch log stay in the browser's extension storage on your computer. No analytics, no tracking. Data leaves the browser only where you send it: the MCP bridge to your own machine, or a scenario sync server whose address you enter yourself. OPEN SOURCE Hover Inspector is free and open source under the MIT license. Source code, bug reports and release notes: https://github.com/liubomyr-kozak/HoverInspector-extension