HTML con estilos
Un solo bloque con el marcado y su hoja de estilos dentro. Es el formato para pegar en cualquier sitio.
AutoKuak Inspector
Señala cualquier trozo de una web y llévate su HTML y su CSS ya limpios y listos para pegar.
Aún no está publicada
Ver precios
La extensión está terminada; lo que falta es su ficha en la tienda de Chrome. Escríbenos si la quieres antes.
AutoKuak Inspector
1.1.0
Qué hace y para quién es
Copiar un elemento de una web con las herramientas del navegador es fácil de empezar y difícil de terminar: te llevas el HTML, pero el CSS está repartido en cinco hojas, la mitad de las clases vienen de un framework y las imágenes apuntan a rutas relativas que fuera de ese dominio no existen.
AutoKuak Inspector resuelve esa última parte. Compara los estilos calculados del elemento con los que el navegador aplicaría por defecto, se queda solo con la diferencia, agrupa las reglas repetidas, recoge los estados de ratón y foco, y te entrega un fichero que se abre solo y se ve igual.
Y como una vez capturado suele hacer falta retocarlo, el panel trae un editor: cambias texto, color, tipografía, tamaños, bordes, sombras y filtros, y lo ves cambiar en la página real mientras el código se actualiza solo. Es gratis, no pide cuenta y no envía nada a ningún sitio.
Cómo se usa
-
1
Abre el panel en cualquier web
Funciona en páginas normales (http, https y ficheros locales). En la propia tienda de Chrome, en los visores de PDF y en las pantallas internas del navegador no se puede inspeccionar, y el panel lo explica.
-
2
Pulsa «Iniciar captura» y señala
Pasa el ratón por la página. La rueda o las flechas suben y bajan por el árbol para coger el padre o el hijo; C congela el hover para menús que desaparecen; clic selecciona y Escape sale.
-
3
Mira el código
Tres formatos: HTML con su bloque de estilos, HTML y CSS separados, o estilos incrustados en las etiquetas para correo. El visor lleva números de línea y se puede editar a mano.
-
4
Edítalo en vivo
Cuatro apartados —Texto, Fondo, Caja y Efectos— con todo lo que se puede tocar. Cada cambio se aplica al elemento real y se refleja en el código. Deshacer, rehacer y «Restaurar original».
-
5
Cópialo, descárgalo o guárdalo
Copiar al portapapeles, descargar un .html que funciona solo, o guardarlo con nombre en «Mis capturas», la biblioteca local del panel.
Todo lo que puede hacer
Capturar
- Selección visual Resalta lo que hay bajo el ratón y lo selecciona con un clic.
- Subir y bajar por el árbol Con la rueda o las flechas, para coger la tarjeta entera en vez del texto de dentro. También hay botones Padre e Hijo y una ruta clicable.
- Congelar el hover La tecla C fija el estado para capturar menús desplegables y elementos que desaparecen al mover el ratón.
- Multi-selección Con Mayús y clic se van sumando elementos en la misma sesión de captura.
- Detecta si el elemento se pierde Si la web se vuelve a dibujar, navega o cierras la pestaña, el panel lo dice y ofrece capturar de nuevo.
El código que te llevas
- HTML limpio Sin manejadores de eventos, sin atributos de frameworks y sin identificadores generados; las clases se renombran y los SVG se conservan tal cual.
- CSS solo con lo que cambia Se compara con lo que el navegador aplicaría por defecto y se descarta lo demás; lo heredado no se repite en los descendientes.
- Estados y pseudoelementos Se recogen los estados de ratón, foco y pulsado, los ::before y ::after y las fuentes declaradas.
- Tres formatos HTML con bloque de estilos, HTML y CSS separados, o estilos incrustados para correo.
- Avisos honestos Si el elemento es enorme se recorta y se dice; si alguna hoja de estilo es de otro dominio y no se puede leer, también.
- Editable a mano El visor de código se puede tocar; «Copiar» copia siempre lo que ves.
Editar en vivo
- Texto Contenido, color, tipografía, tamaño, peso, interlineado, espaciado entre letras, alineación y transformación.
- Fondo Color, degradado con dos paradas y ángulo, o imagen de fondo.
- Caja Ancho, alto, relleno, márgenes, display, borde con grosor, estilo y color, radio y sombra con todos sus valores.
- Efectos Opacidad, desenfoque, brillo, contraste, saturación, escala, rotación y transición.
- Deshacer y restaurar Deshacer y rehacer paso a paso, y un botón que devuelve el elemento a como estaba.
Exportar y guardar
- Copiar al portapapeles El formato que tengas elegido, con los cambios que hayas hecho.
- Descargar .html Un fichero que se abre solo en el navegador y se ve igual.
- Mis capturas Biblioteca local con nombre por captura: abrir, copiar o borrar.
- Vista previa aislada Se dibuja desde el código exportado, en un marco aislado de la web original, para comprobar que se sostiene solo.
Los tres formatos de código
Se cambia con un toque y el código se vuelve a componer al instante.
HTML y CSS separados
Dos pestañas, para meter cada parte donde le toque en un proyecto.
Estilos incrustados
Cada estilo dentro de su etiqueta, que es lo que aceptan los clientes de correo.
Qué necesita y qué datos salen de tu equipo
- Chrome 116 o posterior (también sirve cualquier navegador basado en Chromium).
- Funciona en cualquier página web, pero solo mira la pestaña en la que tú pulsas «Iniciar captura».
- Todo ocurre en tu navegador. La extensión no tiene servidor: no puede enviar nada aunque quisiera.
- Las capturas guardadas viven en el almacenamiento local de Chrome, en tu equipo.
- No hay cuenta, no hay registro y no hay cuotas.
- Los scripts se inyectan solo cuando empiezas a capturar; fuera de eso no toca ninguna página.
Qué ha cambiado
1.1.0 Actual
- La piel del panel es la de Kuak Studio, con modo claro y oscuro.
- Multi-selección con Mayús y clic, y contador de elementos capturados en la sesión.
- Aviso cuando el elemento desaparece porque la web se ha vuelto a dibujar, con botón para capturarlo de nuevo.
1.0.0
- Captura, extracción de HTML y CSS autosuficientes, editor en vivo, biblioteca local y exportación a .html.
Preguntas frecuentes
¿Es gratis de verdad?
Sí. No hay cuenta, no hay plan y no hay cupo. La extensión no habla con ningún servidor.
¿En qué se diferencia de las herramientas del navegador?
Las herramientas del navegador te enseñan el código; esta te lo entrega listo para pegar: solo los estilos que cambian, las clases renombradas, las direcciones absolutas y los estados de ratón y foco incluidos.
¿Puedo capturar una sección entera?
Sí. Con la rueda del ratón o las flechas subes por el árbol hasta abarcar la tarjeta, la fila o la sección completa antes de hacer clic.
¿Y si la página bloquea las extensiones?
En la tienda de Chrome, en los visores de PDF y en las pantallas internas del navegador no se puede inspeccionar: son restricciones del propio Chrome, y el panel lo dice con claridad.
¿Qué pasa con las hojas de estilo de otros dominios?
Algunas no se pueden leer por seguridad del navegador. La extensión avisa y se apoya en los estilos calculados, así que los estados de ratón pueden quedar incompletos.
¿Está ya en la tienda de Chrome?
Todavía no. La extensión está terminada; lo que falta es su ficha publicada. Escríbenos si la quieres antes.
Empieza con el plan gratuito
Entra con Google y empieza en el plan gratuito. Sin tarjeta.