Imagen del logotipo del elemento para Spacing Trace

Spacing Trace

5,0(

2 valoraciones

)
Elemento multimedia 3 (captura de pantalla) de Spacing Trace
Elemento multimedia 1 (captura de pantalla) de Spacing Trace
Elemento multimedia 2 (captura de pantalla) de Spacing Trace
Elemento multimedia 3 (captura de pantalla) de Spacing Trace
Elemento multimedia 1 (captura de pantalla) de Spacing Trace
Elemento multimedia 1 (captura de pantalla) de Spacing Trace
Elemento multimedia 2 (captura de pantalla) de Spacing Trace
Elemento multimedia 3 (captura de pantalla) de Spacing Trace

Descripción general

Codifique por colores el margen / relleno / espacio por propiedad en las páginas web, con un menú flotante e insignias para una…

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, and hovering a row highlights the matching overlays. 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. 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.

Detalles

  • Versión
    1.1.1
  • Actualizado
    19 de enero de 2026
  • Ofrecido por
    Kaworu Inoue
  • Tamaño
    34.38KiB
  • Idiomas
    14 idiomas
  • Desarrollador
    Correo electrónico
    dev_kwr@icloud.com
  • No operador
    Este desarrollador no se ha identificado como operador. Los consumidores residentes en la Unión Europea deben tener en cuenta que los derechos de los consumidores no son aplicables a los contratos que suscriban con este desarrollador.

Privacidad

Gestiona las extensiones y descubre cómo se usan en tu organización
El desarrollador ha comunicado que no recogerá ni usará tus datos.

Este desarrollador declara que tus datos:

  • No se venden a terceros, excepto en los casos de uso aprobados
  • No se usan ni se transfieren para fines no relacionados con la función principal del elemento.
  • No se usan ni se transfieren para determinar la situación crediticia ni para ofrecer préstamos.

Ayuda

Relacionados

Mostrar todos los márgenes y rellenos

4,5

Resalta márgenes y rellenos para todos los elementos HTML en cualquier página web.

Layout Pest

5,0

A Chrome extension that helps you visualize and debug layouts by adding outlines to elements.

Page Ruler - bestdevtools.io

3,0

Herramienta profesional de medición para páginas web. Cuadrícula ajustable, reglas, áreas, redimensionamiento, historial y 10…

SpacingJS

4,3

Precision spacing measurement tool for web developers and designers. Hold Alt/Option key and hover over elements to measure.

Optimize Next

4,0

by PROJECT GROUP Inc.

Designer Tools

4,6

Designer Tools es una colección de herramientas que te ayudan a diseñar sitios web.

The Switcher[Change Domains]

4,2

Partially replace the URL of the currently open web page and open it in another tab. Please use it for switching domains. etc...

Spacing Inspector

0,0

Visualize CSS margins and padding on webpages

Regla virtual — Tamaño píxeles

4,5

Extensión de Chrome llamada 'Regla virtual - Tamaño píxeles': mide distancias en píxeles directamente en tu navegador.

Spacing Palette

4,5

Codifique por colores el margen / relleno / espacio por valor de px en las páginas web, con un menú flotante e insignias para una…

CSSViewer

4,2

CSSViewer

Screen Ruler - Mide e inspecciona la web

4,4

Inspector web para diseñadores y desarrolladores. Mide elementos, extrae CSS y colores, captura pantallas y más.

Mostrar todos los márgenes y rellenos

4,5

Resalta márgenes y rellenos para todos los elementos HTML en cualquier página web.

Layout Pest

5,0

A Chrome extension that helps you visualize and debug layouts by adding outlines to elements.

Page Ruler - bestdevtools.io

3,0

Herramienta profesional de medición para páginas web. Cuadrícula ajustable, reglas, áreas, redimensionamiento, historial y 10…

SpacingJS

4,3

Precision spacing measurement tool for web developers and designers. Hold Alt/Option key and hover over elements to measure.

Optimize Next

4,0

by PROJECT GROUP Inc.

Designer Tools

4,6

Designer Tools es una colección de herramientas que te ayudan a diseñar sitios web.

The Switcher[Change Domains]

4,2

Partially replace the URL of the currently open web page and open it in another tab. Please use it for switching domains. etc...

Spacing Inspector

0,0

Visualize CSS margins and padding on webpages

Aplicaciones de Google