AIMRAN Inspector

Inspecciona medidas, colores, contraste, tipografía y variables CSS de cualquier elemento, mide distancias y edita su CSS en vivo.

AIMRAN Inspector convierte cualquier página web en tu laboratorio de frontend. Pulsa el icono de la extensión (o Alt+Mayús+I), pasa el ratón por la página y haz clic en un elemento para ver cómo está construido y probar cambios de CSS sobre la web real. Qué te muestra • Modelo de caja visual (margin, border, padding y contenido) con medidas exactas y una etiqueta tag#id.clase. • Selector CSS único listo para copiar y migas de pan para moverte por los ancestros. • Colores de texto, fondo, bordes y SVG en HEX, RGB o HSL, con el fondo efectivo calculado aunque haya capas semitransparentes. • Contraste WCAG con indicación AA y AAA para texto normal y grande. • Tipografía completa: familia declarada, fuente realmente renderizada, tamaño en px y rem, peso e interlineado. • Estilos calculados sin ruido, agrupados por categorías, y las variables CSS que usa el elemento con su valor resuelto. • Código HTML del elemento, formateado y copiable. Herramientas • Medición de distancias: mantén Alt y señala otro elemento para ver los huecos en píxeles, con guías como en las apps de diseño. • Rejilla de 8 px, columnas configurables y línea base para revisar alineaciones. • Cuentagotas de la pantalla con historial de colores recientes. • Ir a un selector CSS o buscar elementos por su texto. • Copiar o descargar una captura PNG del elemento. Editor CSS en vivo • Validación línea a línea, autocompletado, controles rápidos e historial por elemento. • Fragmentos guardados para reutilizar estilos en otros elementos. • Exportación como CSS, variables CSS, SCSS, objeto JS/React o clases de Tailwind aproximadas. A tu manera • Tema claro, oscuro o automático, siete colores de acento, densidad compacta o cómoda, tamaño de letra, ancho redimensionable y opacidad del panel. • Lado y posición recordados, pestaña inicial, pestañas visibles y su orden, y colores del overlay de caja. • Exporta e importa tus ajustes en JSON. • Interfaz en español, inglés, alemán y francés. Cómo se usa 1. Abre cualquier web y pulsa el icono de AIMRAN Inspector o Alt+Mayús+I. 2. Pasa el ratón por la página y haz clic en el elemento que quieras estudiar. Mientras seleccionas, la web no recibe clics: ningún enlace ni botón se activa por error. 3. Recorre las pestañas Resumen, Colores, Tipo, Estilos, Editar y Código. Flechas para moverte por el árbol, Espacio para fijar la selección, Alt para medir, G para las guías. 4. Pulsa Esc, el icono o la × para salir. La página vuelve a su estado original. Por qué instalarla • Un solo panel, más directo que las DevTools para consultas rápidas de diseño y maquetación. • Panel aislado que no se rompe con el CSS de la web y no ralentiza la página: probado en páginas de 20.000 nodos. Privacidad La extensión solo actúa en la pestaña activa y solo cuando tú la activas. Lee el elemento que eliges, lo procesa en tu navegador y no envía nada a ningún servidor. Guarda en el almacenamiento de Chrome tus preferencias, tus fragmentos CSS y los colores del cuentagotas. Sin cuentas, sin analítica, sin publicidad y sin rastreo. Creado por Aimran Oukham · aimran.es