CSS Inspector 让您只需将鼠标悬停在元素上,即可立即查看任何元素的样式,并直接在浏览器中实时编辑 CSS 属性。
Whether you're debugging a layout issue, reverse-engineering a design you admire, or quickly checking spacing and typography values, CSS Inspector gives you everything you need in a clean, floating panel. Unlike browser DevTools, it stays out of your way — no docked panels, no resized viewport. Just hover, click, and inspect. The tool shows computed styles (what the browser actually renders), not just authored CSS. This means you see the real values after inheritance, specificity, and cascading are resolved — the same values that affect what users see on screen.
Hover over any element to instantly see its full computed CSS — including font family, font size, line height, color, background, padding, margin, border, border-radius, display type, position, z-index, and more. Properties update in real-time as you move between elements.
Click any element to lock the floating panel in place. This lets you scroll the page, interact with other tools, or carefully read through long property lists without the panel disappearing when your mouse moves away.
Double-click any CSS value in the panel to edit it directly. Change colors, adjust spacing, modify fonts — your changes are applied to the page instantly. Perfect for quick visual experiments before writing actual code.
Copy a single property (e.g., "color: #333") or the entire style block to your clipboard with one click. The copied output is clean, formatted CSS ready to paste into your stylesheet or component.
See the element's complete box model — content area, padding, border, and margin — displayed visually with pixel values for every side. Instantly spot asymmetric spacing or unexpected margins.
View the element's width, height, and position on the page (top, left coordinates). The bounding box is highlighted with a semi-transparent overlay so you can see exactly what space the element occupies.
CSS Inspector shows computed values for 40+ CSS properties, organized by category:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorHover over misaligned elements to instantly see their padding, margin, and position values. Spot the exact property causing the issue without digging through browser DevTools panels.
Visit any website you admire and inspect its typography, spacing, and color choices. Copy the exact CSS values to use as a reference or starting point for your own projects.
Use live editing to test visual changes directly on the page before writing code. Try different font sizes, colors, or spacing values and see the result immediately.
During design reviews, quickly verify that the implemented design matches the mockup. Check exact pixel values, font sizes, and colors without switching to a separate tool.
Building a new component that should match an existing design? Inspect the reference element, copy all its CSS properties, and paste them as your component's base styles.
Open the DevSuite Pro floating dock (visible on every webpage) and click the CSS Inspector icon. The tool activates immediately — you'll see a subtle cursor change indicating inspection mode is active.
Move your mouse over any element on the page. A floating panel appears next to your cursor showing the element's tag name, classes, dimensions, and computed CSS properties. The element is highlighted with a colored overlay showing its boundaries.
Found the element you want to inspect in detail? Click it. The panel locks in place and won't disappear when you move your mouse. You can now scroll through all properties, copy values, or start editing.
Double-click any CSS value in the locked panel to enter edit mode. Type a new value (e.g., change "16px" to "20px") and press Enter. The page updates instantly, letting you preview changes before committing them to code.
Click the copy icon next to any property to copy it, or use the "Copy All CSS" button at the bottom of the panel to grab every property at once. Paste directly into your CSS file or component stylesheet.