Comparación de navegadores para diseño responsivo
Hay varias de estas aplicaciones de escritorio cuyo objetivo es mostrar su sitio en diferentes dimensiones al mismo tiempo. Por lo tanto, puede, por ejemplo, escribir CSS y asegurarse de que funcione en todas las ventanas gráficas de un solo vistazo.
Todos son muy similares. Por ejemplo, hacen "replicación de eventos", lo que significa que si te desplazas en una ventana o dispositivo, todos los demás también lo hacen, junto con los clics, la escritura, etc. También puedes acercar y alejar para ver muchos dispositivos a la vez, simplemente escalados. abajo. Veamos si podemos eliminar algunas diferencias.
sizzy
- Windows, Mac y Linux
- El plan “Solo” comienza en $5/mes y tienen planes a partir de ahí
Hay un montón de pequeñas funciones interesantes centradas en los desarrolladores, como:
- Elimine un puerto simplemente escribiendo el número de puerto
- Hay un modo de inspección universal pero, si bien no puede aplicar un cambio en DevTools que afecte a todas las ventanas y dispositivos al mismo tiempo, al menos puede inspeccionarlos en todos y, cuando hace clic, se activa la sesión correcta de DevTools.
- Acelere o desconéctese con un clic
- Desactiva JavaScript con un clic
- Active el modo de diseño con un clic (por ejemplo, cada elemento tiene
contenteditable
). - Alterna para ocultar imágenes, desactivar todos los estilos, delinear todos los elementos, etc.
- Anular fuentes con opciones de fuentes de Google
Aplicación responsiva
- Windows, Mac y Linx
- Código abierto (gratis)
- Modo de inspección universal que selecciona el contexto correcto de DevTools
- La opción "Desactivar la validación SSL" es inteligente, en caso de que tenga problemas con el HTTPS local.
- Alternar el modo oscuro con un clic
felicidad
- Ventana y Mac
- Gratis, con actualizaciones premium ($10/mes). Algunas de las funciones, como la sincronización de desplazamiento y la actualización automática, figuran como funciones premium, lo que me hace pensar que la versión gratuita las limita de alguna manera.
- La actualización automática es una buena idea. Configura un "observador" para ciertos tipos de archivos en ciertas carpetas y, si cambian, actualiza la página. Me imagino que la mayoría de los entornos de desarrollo tienen algún tipo de inyección de estilo o recarga de módulo en caliente, pero tenerlo disponible de todos modos es útil para aquellos que no lo tienen.
- No existe un inspector universal de DevTools, pero puede abrir DevTools individualmente y tienen una herramienta de inspección universal personalizada para mostrar las dimensiones de los elementos del modelo de caja.
- Hay una pantalla de informe de errores personalizada.
- Puede habilitar el "Modo de navegación" para desactivar todas las funciones sofisticadas del dispositivo y simplemente usarlo como un navegador semi-normal.
Polipano
- Windows, Mac y Linux
- Gratis, con planes premium desde $10/mes. Registrarse le permitirá recibir un buen puñado de correos electrónicos de incorporación durante una semana (con la opción de cancelar su suscripción).
- Tiene extensiones de navegador para que otros navegadores muestren su pestaña actual en Polypane.
- El modo de inspección universal me parece el más fluido de todos, pero no llega tan lejos para propagar los cambios entre ventanas y dispositivos. ¡Alguien necesita hacer esto! Tiene un panel "CSS en vivo" que inyectará CSS adicional a todos los dispositivos abiertos, lo cual es genial.
- Puede abrir dispositivos basados en puntos de interrupción en su propio CSS, ¡y realmente funciona!
Dúo
- Está en la Mac App Store por $5, pero su sitio web está fuera de línea, lo que lo hace parecer un poco muerto.
- No tiene características sofisticadas. Como su nombre lo indica, simplemente muestra el mismo sitio uno al lado del otro en dos columnas cuyo tamaño se puede cambiar.
Revisar
- No es una aplicación de navegador independiente, sino una extensión del navegador. Me gusta esto porque puedo permanecer en un navegador canónico con el que ya me siento cómodo y que recibe actualizaciones periódicas.
- La visión de los “puntos de interrupción” es una idea inteligente. Creo que debería mostrar su sitio en los puntos de interrupción de su CSS, pero me parece roto . No estoy seguro de si este es un proyecto desarrollado activamente. (Mi conjetura es que no lo es).
¿Entonces?
¿Quieres que elija un ganador?
Si bien me desagradaron un poco los saltos y la incorporación de Polypane, creo que tiene el conjunto de características mejor considerado. Sizzy está cerca, pero la interfaz está más desordenada de una manera que no parece necesaria. Admito que me gusta cómo Blisk se centra realmente en “solo mira la vista móvil y luego llenaremos el resto del espacio con una vista más grande” porque así es como realmente trabajo. (Rara vez necesito ver un “muro de dispositivos” de pantallas móviles trivialmente diferentes).
El hecho de que Responsively sea gratuito y de código abierto es genial, pero ¿es eso sostenible? Creo que me siento más seguro investigando aplicaciones que se ejecutan como una empresa. El hecho de que permanezca en mi navegador normal con Re:View significa que en realidad tengo la mayor probabilidad de usarlo, pero en este momento parece un proyecto muerto, así que probablemente no lo haré. Entonces, por ahora, supongo que tendré que coronar a Polypane.
Deja un comentario