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
- Abre cualquier web y pulsa el icono de AIMRAN Inspector o Alt+Mayús+I.
- 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.
- 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.
- 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.