SuperchargeInspect se abre en cualquier página y te permite elegir cualquier elemento y llevártelo contigo. Pasa el cursor y haz clic, o muévete con las flechas del teclado y fíjalo con Enter. La superposición dibuja el modelo de caja directamente sobre la página, y el panel muestra la fuente, los colores y el espaciado. Con una sola copia, el texto y una captura limpia van a tu portapapeles, junto con una nota si quieres añadirla.
Elige con el ratón, o muévete con las flechas del teclado y fíjalo con Enter
La superposición dibuja el padding, el margin y la caja de contenido directamente sobre la página
Fuente, tamaño, grosor, espaciado entre letras, colores y modelo de caja de cada elemento
Cualquier valor se copia con un clic
Copia una referencia completa: texto y una captura PNG limpia en un solo elemento
Las notas de hasta 1200 caracteres se incluyen en la referencia y en el pie de la imagen
Se pueden seleccionar shadow roots, slots, SVG e iframes del mismo origen
Abre cualquier página y pulsa Alt+Shift+E, o haz clic en el icono de la barra de herramientas. Muévete con las flechas, fija un elemento con Enter y copia una referencia completa con un clic.
Seleccionar elementos
Dos formas de empezar: pasa el cursor y haz clic, o usa solo el teclado. Izquierda, arriba, derecha y abajo te mueven entre elementos, Ctrl+Arriba (Option+Arriba en Mac) va al elemento padre y Ctrl+Abajo (Option+Abajo) a un hijo. Enter fija el elemento, Esc retrocede y ? muestra la lista de atajos. El selector también funciona dentro de shadow roots, slots, SVG e iframes del mismo origen.
Visualiza el modelo de caja en la página
Cuando eliges un elemento, se dibuja directamente sobre la página. El padding y el margin se sombrean, el contorno de la caja de contenido se resalta y un anillo con tiradores ámbar marca el elemento fijado. El contorno sigue el border-radius del propio elemento, así que un elemento redondeado conserva sus esquinas redondeadas.
Consúltalo en el panel
El panel desglosa el elemento al completo: familia tipográfica, tamaño, peso y espaciado entre letras, con una muestra en vivo en la propia fuente del elemento. Los colores de texto, fondo y borde aparecen como muestras de color, y el diagrama del modelo de caja abarca márgenes, bordes, padding, radio, display y gap. Cualquier valor se copia con un clic. Encima hay una ruta de navegación con los elementos padre, y puedes acoplar el panel a la izquierda o a la derecha.
Notas
Añade una nota de texto libre de hasta 1200 caracteres. Se incluye en la referencia copiada y en el pie de la imagen de la instantánea, para que tus observaciones viajen con ella.
Copiar una referencia
Copiar guarda en el portapapeles una referencia completa como un único elemento: texto y una instantánea PNG limpia juntos. El texto incluye la nota, la URL de origen, el título de la página, la marca de tiempo, la etiqueta y el localizador del elemento, su texto visible, el viewport y los límites, los estilos observados y un fragmento depurado del código del elemento. Omite los valores de formularios y las partes ocultas de la página, y cualquier parámetro de credenciales en la URL se oculta. También puedes copiar solo el texto, solo la imagen o guardar el PNG como archivo.