Spacing Trace

Spacing Trace is a professional visualization tool that lets developers and designers inspect every margin, padding, and gap on a web page at a glance. It eliminates the need to constantly open DevTools and dig through the Styles panel. Once enabled, the entire page is color-coded by property, and px numbers are shown at the center of each overlay. margin is orange, padding is green, and gap is purple. Hovering fades overlays with different px values so the target spacing stands out. You can turn the px badges on or off as needed. The floating menu lists each px value with its M / P / G counts. Hovering items in the list highlights the matching overlays, and clicking it scrolls the viewport to the target. If the targets are already visible, the badges animate to highlight the location. You can also highlight spacing by property directly from the panel. You can drag or collapse the menu so it never gets in the way. Need to inspect a single component? Open Display area, choose Select element, and click the component to show only its own spacing and the spacing inside it. Choose Whole page to return to the full-page view. The selection guide appears only while picking an element. Spacing updates automatically when elements are added, resized, or changed, including delayed content and image loading. Overlays stay aligned as you scroll, including inside scrollable containers. Flex and Grid gaps are measured across reversed and wrapping layouts, including empty grid tracks. Open Shadow DOM and accessible same-origin iframe contents are included. Hover menus and overlapping content remain usable. Overlays are cut out behind foreground content and let normal page clicks and hover interactions pass through. The panel uses isolated styles so its controls remain readable even on pages with custom CSS. Use the context menu to toggle the extension, overlay visibility, or the px badges from anywhere on the page. For front-end engineers, UI designers, and QA teams who need precision in layout implementation.