Screen Ruler - Mide e inspecciona la web

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

Screen Ruler es el compañero perfecto para desarrolladores web y diseñadores que desean validar la implementación de sus sitios web. Una vez activado, te permite ver los tamaños, márgenes, rellenos, nombres de etiquetas, IDs y clases simplemente pasando el cursor sobre cualquier contenido web. También puedes seleccionar un elemento para medir las distancias a otros. Uso - Activa la extensión haciendo clic en el icono, seleccionándola en el menú contextual del clic derecho o usando el atajo `Alt/Option + Shift + R`. - Pasa el cursor sobre los elementos de las páginas web para ver sus tamaños, márgenes, rellenos, nombres de etiquetas, IDs y clases. - Selecciona un elemento haciendo clic directamente sobre él; el resaltado se volverá rojo. Para deseleccionar, haz clic de nuevo, presiona Escape o selecciona otro elemento. - Para seleccionar el elemento padre, usa `Alt/Option + Up`. Usa `Alt/Option + Down` para revertir la selección. - Visualiza el CSS calculado del elemento seleccionado actualmente en el panel lateral. Haz clic en el botón "Copiar CSS" para copiar el CSS calculado al portapapeles. Funciones - Mide el tamaño en píxeles de cualquier elemento. - Mide la distancia en píxeles entre dos elementos. - Nombres de etiquetas HTML, nombres de clases e IDs. - Atajos para selección de elementos padre/hijo. - Selecciones responsivas que se redimensionan con la ventana del navegador. - Acceso desde el menú contextual. - Inspección de CSS calculado. - Copiar CSS al portapapeles. - Reglas de página para mediciones precisas (guías horizontales y verticales con cruz). - Cuentagotas para muestrear y copiar colores desde cualquier punto de la página. - Capturas de pantalla de elementos: Captura screenshots recortados de los elementos seleccionados con `Ctrl/Cmd + Shift + S`. - Problemas de accesibilidad: Detecta y resalta automáticamente fallos de contraste WCAG en tu selección con recomendaciones accionables. - Problemas de SEO: Detecta problemas comunes de SEO como títulos faltantes, múltiples H1s, alt text ausente y meta tags faltantes. - Meta Tags: Inspecciona meta tags de SEO, Open Graph y Twitter card agrupados por categoría. - Vista previa social: Previsualiza cómo se renderiza tu página cuando se comparte en Facebook, X y LinkedIn usando los metadatos reales de la página. - Funciona en cualquier página web. - Personaliza los atajos de teclado visitando `chrome://extensions/shortcuts`. Screen Ruler PRO También está disponible un nivel PRO que desbloquea funciones adicionales. - Editor CSS en vivo: Edita el CSS de cualquier elemento directamente en el panel lateral con soporte completo para @media queries y forzado de pseudo-estados. Los cambios se aplican al instante y una pestaña de Cambios rastrea cada modificación por elemento para que puedas copiarla o revertirla. Las herramientas de edición HTML permiten cortar, copiar, pegar, duplicar y eliminar elementos. El modo de edición de texto te permite reescribir el contenido de la página directamente. - Inspector flotante: Visualiza propiedades detalladas al pasar el cursor, incluyendo posición, tamaño, fuente renderizada, colores y más. Presiona Espacio para fijar inspectores y comparar varios elementos lado a lado. - Modo responsivo: Prueba tus diseños en diferentes viewports de dispositivo con un emulador interactivo y dimensiones personalizadas. - Fuente: Explora las reglas de hojas de estilo originales que se aplican a un elemento, agrupadas por archivo de origen con envoltorios @media y conflictos de cascada visiblemente marcados. - Generador Tailwind CSS: Convierte instantáneamente los estilos calculados de cualquier elemento en clases de utilidad de Tailwind v4. - Visualización de Box Shadow: Desglose interactivo de sombras multicapa con vista expandida. - Análisis de animaciones: Visualiza las curvas de tiempo de las animaciones CSS y copia las propiedades de animación. - Inspector de transiciones: Visualiza transiciones CSS y curvas de funciones de tiempo junto con las animaciones. - Visualización de gradientes: Inspecciona y visualiza gradientes CSS con un desglose detallado de paradas de color y dirección. - Extracción de assets: Extrae y descarga imágenes, SVGs y assets vectoriales. - Extracción de colores: Extrae y copia paletas de colores desde el contenido seleccionado con valores hex, RGB y HSL. - Tipografía: Analiza y extrae todos los estilos tipográficos usados en tu selección. - Detección de tecnologías: Identifica los frameworks, bibliotecas y herramientas que impulsan cualquier sitio web con más de 180 tecnologías soportadas. - Superposición de cuadrícula de layout: Superpone una cuadrícula personalizable para una alineación perfecta del diseño. - Inspección de layout: Visualiza layouts Flexbox y Grid con un desglose claro de alineación, dirección y estructura. - Breakpoints: Detecta y visualiza los breakpoints de media queries CSS con líneas de borde coloreadas directamente sobre la página. - Búsqueda por selector CSS: Encuentra y resalta elementos usando selectores CSS. - Modo X-Ray: Revela la estructura subyacente de la página delineando todo el contenido. - Inspección de Canvas: Inspecciona elementos HTML5 Canvas. Visualiza dimensiones, tipos de contexto y extrae paletas de colores. - Peso de la página: Ve exactamente qué se carga en cualquier página, desglosado por scripts, hojas de estilo, imágenes, fuentes y más. PRO requiere un pago único para acceso de por vida. Hecho para - Desarrolladores: Detecta problemas de layout o identifica problemas de alineación. Ya sea que estés ajustando márgenes y rellenos, o simplemente asegurándote de que todo esté correctamente alineado, esta herramienta se convierte en una adición indispensable a tu kit de desarrollo. - Diseñadores: Asegúrate de que tus diseños se hayan implementado con precisión pixel-perfect. Actúa como un puente entre diseño y desarrollo, permitiéndote verificar si cada componente está alineado exactamente como lo intentaste. Instalación - Diseñado específicamente para estabilidad en Google Chrome 116+. - Instalable en cualquier navegador Chromium; sin embargo, para la mejor experiencia, asegúrate de que tu navegador soporte todas las APIs requeridas (como Side Panel y Offscreen). Si hay problemas con la instalación, actualiza tu navegador a la última versión e inténtalo de nuevo.