Responsive Tester - Vista móvil, comprobador de breakpoints y editor CSS

Cualquier página en varias pantallas a la vez. Prueba la vista móvil, cada tamaño y breakpoint, y edita CSS en vivo.

Responsive Tester es la forma más rápida de ver cómo se comporta una página en todos los tamaños de pantalla a la vez. Abre cualquier sitio web en una fila de viewports sincronizados, teléfonos, tabletas y equipos de escritorio uno al lado del otro, luego haz clic, desplázate y escribe en una pantalla y observa cómo todas las demás la siguen. Elige un elemento, edita su CSS en vivo, y tus cambios se aplican en todos los breakpoints al instante. Uso - Activa la extensión haciendo clic en el icono, seleccionándola desde el menú contextual del clic derecho, o usando el atajo Alt/Option + Shift + V. - Añade viewports desde los ajustes predefinidos de dispositivos, o introduce dimensiones personalizadas. - Detecta los breakpoints propios del sitio y crea viewports coincidentes con un solo clic. - Desplaza, rota, redimensiona o amplía cualquier viewport, y captura una imagen limpia de cualquier marco. - Activa la sincronización de interacción para reflejar clics, hovers, escritura y navegación en todas las pantallas (Pro). - Abre el editor, elige un elemento y edita su CSS en vivo en todos los breakpoints (Pro). Características - Previsualiza cualquier página en varios viewports sincronizados, en una fila desplazable o distribuidos en una cuadrícula. - La sincronización de desplazamiento mantiene alineados todos los viewports, incluidas las áreas de desplazamiento dentro de la página. - Ajustes predefinidos para teléfonos, tabletas y equipos de escritorio populares. - Dimensiones de viewport personalizadas. - La detección de breakpoints del sitio lee las reglas media propias de la página y crea viewports coincidentes. - Rota cualquier viewport entre orientación vertical y horizontal. - Arrastra para redimensionar los viewports y probar los anchos intermedios. - Zoom continuo para ajustar más contenido en pantalla. - Capturas de pantalla de cualquier viewport con un solo clic. - Temas claro y oscuro que siguen a tu sistema o se fijan en uno de los dos. - Funciona en cualquier página web, incluidos sitios que normalmente se niegan a cargarse en marcos. - Accede desde el icono de la barra de herramientas, el menú contextual del clic derecho o el atajo de teclado. - Personaliza los atajos de teclado visitando chrome://extensions/shortcuts. Responsive Tester PRO El nivel PRO desbloquea las dos funciones que convierten la previsualización en construcción. - Sincronización de Interacción: Los clics, los hovers, la entrada de formularios, las pulsaciones de teclas y la navegación de páginas se reflejan en todos los viewports en tiempo real, así que controlas una pantalla y observas cómo responde toda la matriz. La coincidencia de elementos se verifica en cada interacción, de modo que una acción sincronizada nunca recae sobre el elemento equivocado. - Editor de CSS en Vivo: Elige cualquier elemento y edita sus reglas en un editor lateral con soporte completo de consultas @media, así cada cambio se aplica automáticamente en el breakpoint correcto. Fuerza pseudoestados como :hover y :focus, deshaz y rehaz cada cambio, y ve cómo las ediciones se aplican al instante en todos los viewports a la vez. PRO requiere un pago único para acceso de por vida, válido para 3 activaciones. Cada instalación incluye una prueba gratuita de 7-day sin necesidad de tarjeta, además de una garantía de devolución de dinero de 30-day. Ideal Para - Desarrolladores: Detecta desplazamientos de diseño y errores de breakpoints antes de publicar. Alinea un teléfono, una tableta y un equipo de escritorio, y luego contrólalos todos a la vez en lugar de redimensionar una ventana una y otra vez. - Diseñadores: Confirma que un desarrollo se mantiene en todos los tamaños y que el comportamiento responsive coincide con la intención, desde el teléfono más pequeño hasta el escritorio más ancho. Instalación - Diseñada específicamente para ofrecer estabilidad en Google Chrome 116+. - Instalable en cualquier navegador Chromium; no obstante, para la mejor experiencia, asegúrate de que tu navegador sea compatible con todas las APIs requeridas (como Offscreen). Si hay algún problema con la instalación, actualiza tu navegador a la última versión e inténtalo de nuevo.