Capturas endistintos tamañosControles de
movimiento y avisosDesarrollado en Tauri
Un sitio.Varios tamaños.Una visión completa.
Una herramienta propia para revisar la responsividad de cada proyecto.
Una app de escritorio que abre un sitio en ocho tamaños de pantalla, en un Chrome de verdad, y devuelve la foto y el diagnóstico de cada uno.Abre un sitio en ocho pantallas y devuelve foto y diagnóstico.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
Capturas endistintos tamañosControles de
movimiento y avisosDesarrollado en Tauri
Un sitio.Varios tamaños.Una visión completa.
Una herramienta propia para revisar la responsividad de cada proyecto.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
Una app de escritorio que abre un sitio en ocho tamaños de pantalla, en un Chrome de verdad, y devuelve la foto y el diagnóstico de cada uno.Abre un sitio en ocho pantallas y devuelve foto y diagnóstico.
- Tauri 2.11
- Rust
- React 19.2
- TypeScript 5.9
- Vite 6.4
- Crate chromiumoxide 0.9
- Chrome DevTools Protocol
El banco
Ocho pantallas, del celular al monitor.
Antes de publicar un sitio, hay que saber cómo se ve en el celular, en la tablet y en la computadora. La app abre el mismo sitio en ocho tamaños de pantalla reales, del Android más común al monitor Full HD, y los muestra todos lado a lado. Toca o pasa el mouse por un dispositivo para ver su tamaño en el dibujo.
La medida es ancho × alto. El "@3x" dice cuántas veces la pantalla es más nítida que la de una computadora común: por eso un texto puede verse bien en el notebook y diminuto en el celular. Los cuatro que ya vienen marcados cubren un celular, una tablet y dos computadoras; los otros cuatro entran con un clic.
Cómo funciona
Un Chrome de verdad, en cada tamaño.
La app no dibuja una imitación del sitio: usa el propio Chrome de la computadora, abre el sitio en el tamaño de cada dispositivo y fotografía la página entera. Cada medición pasa por cuatro etapas, y la pantalla de la app muestra en cuál está cada dispositivo.
Antes de que el sitio cargue, la ventana ya tiene el ancho, el alto y la nitidez de pantalla del dispositivo elegido.
- En celulares y tablets la pantalla acepta toque, como en el dispositivo real
- El sitio cree que está en un celular (o en una computadora) y muestra la versión correcta
- Cada dispositivo se abre en su propia ventana
Lo que cambia la forma en que la página se comporta se acuerda antes de que empiece a cargar.
- Las animaciones de entrada saltan directo al final
- Lo que solo aparecería al bajar por la página ya aparece
- Los avisos de cookies y de edad se cierran, si lo pides
Muchas páginas solo cargan imágenes y textos cuando alguien baja hasta ellos. La app recorre la página entera, de a poco, para que todo llegue.
- Espera a que las letras y las imágenes terminen de cargar
- Hay un límite de tiempo: una página que nunca termina no traba la app
- Vuelve arriba antes de la foto
La página se fotografía una pantalla a la vez, de arriba abajo, y las partes se vuelven una sola foto.
- Hasta 40 partes por dispositivo
- Después de la foto, revisa si algo quedó fuera de la pantalla o invisible
La app no trae un navegador propio: usa el Chrome que ya está instalado. Eso la mantiene liviana, un navegador incorporado sumaría de 170 a 282 MB.
La foto entera
Una página larga, fotografiada por partes.
Una página web suele ser mucho más alta que la pantalla. Para fotografiarla entera, la app baja una pantalla a la vez, saca una foto de cada pedazo y junta todo. Así la foto muestra el sitio como lo ve quien lo visita al bajar, incluso lo que queda fijo en la pantalla.
Las partes fotografiadas
- Parte 1Posición 0 px
- Parte 2Posición 768 pxMenú de arriba quitado
- Parte 3Posición 1536 pxMenú de arriba quitado
- Parte 4Posición 2304 pxMenú de arriba quitado
Los límites
- 40Partes como máximo, por dispositivo
- 16.384 pxLa altura máxima de una foto que el propio navegador puede sacar
- 220 msDe espera en cada parte, para que la pantalla se quede quieta antes de la foto
- 2.ª parte en adelanteEl menú fijo de arriba sale de la foto, para no repetirse en todas las partes
La preparación
Sin preparación, la mitad de la página desaparece. Con ella, aparece todo.
Muchos sitios modernos hacen que cada parte surja con una animación cuando bajas hasta ella. Para quien visita, es lindo. Para una foto automática, es un problema: la foto se saca antes de que la animación ocurra, y la mitad de la página sale en blanco. Por eso la app prepara la página antes de fotografiarla. Compara: el frente de las láminas es la foto sin preparación; el dorso, la foto con preparación.
- 01Sin animacionesLa app le pide al sitio la versión sin movimiento, que muchos sitios ya tienen para quien se molesta con las animaciones. El contenido nace en su lugar.
- 02Todo aparece de una vezLas partes que solo surgirían al bajar por la página se liberan enseguida, y no vuelven a desaparecer.
- 03Avisos cerradosLas ventanas de cookies, de edad y de bienvenida que tapan el sitio se cierran solas, si lo pides.
- 04Todo cargadoLa app espera a que las letras y las imágenes terminen de cargar.
- 05Una vuelta por la páginaLa página se baja hasta el final y vuelve arriba, para cargar lo que solo llega cuando alguien baja.
- 06Animaciones al finalLo que todavía se esté moviendo salta directo a su posición final antes de la foto.
El diagnóstico
Cada pantalla vuelve con un diagnóstico.
Además de la foto, la app revisa cada pantalla y avisa lo que encontró. Son tres avisos, con los mismos nombres que aparecen en la app, en el ejemplo, la tienda BabyShoes en el Monitor Full HD volvió con un aviso.
- Sobrante hacia el costado
sin desbordamiento horizontalAvisa cuando la página queda más ancha que la pantalla y crea ese scroll hacia el costado que nadie quiere en el celular. - Elementos invisibles
elementos invisiblesAvisa cuando un texto o una imagen quedó transparente y no apareció, y lista los ocho primeros, para encontrar dónde está el problema. - Foto cortada
captura recortada en el limite del navegadorAvisa cuando la página es tan alta que la foto llegó al límite y se detuvo antes del final.
Dónde está Chrome
Lo busca solo, en cada sistema.
Para usar el Chrome de la computadora, la app primero tiene que encontrarlo, y Windows, Mac y Linux guardan el navegador en lugares distintos. La app busca sola, en un orden fijo, y se detiene en el primero que encuentra. Elige un sistema para ver el camino.
- Una dirección elegida por tiQuien guarda Chrome en otro lugar puede decirle a la app dónde está.
VISUALIZADOR_CHROME - El registro de programas de WindowsDonde el propio Windows anota dónde se instaló Chrome. Buscar de otra forma suele encontrar Edge en lugar de Chrome.
App Paths\chrome.exe - Las carpetas de programasProgram Files y Program Files (x86), donde Chrome suele estar.
- El registro de programas de WindowsDonde el propio Windows anota dónde se instaló Chrome. Buscar de otra forma suele encontrar Edge en lugar de Chrome.
- El último intentoLa app busca Chrome y Chromium por los cinco nombres que suelen tener, carpeta por carpeta.
- Lo encontró: la ruta aparece en el panel y se pueden medir las pantallas.No lo encontró: la app explica qué instalar y ofrece buscar de nuevo.
Cada versión de la app, Windows, Mac o Linux, lleva solo la búsqueda de su propio sistema.
Las tecnologías
De qué está hecho, pieza por pieza
Un programa de Windows que abre el Chrome de la propia computadora, finge ser cada aparato y fotografía el sitio en todos ellos. Elige una pieza para ver qué hace aquí y en qué archivo está.
11tecnologías, en 3 capas
Pantalla
Núcleo
Navegador
Las pantallas
La app, de la apertura al informe.
La pantalla de apertura, el banco antes de la primera medida y la tienda BabyShoes medida, en los temas claro y oscuro de la app. Haz clic en una pantalla para verla grande.
Herramientas de creación y desarrolloUIForge