blog
BrowserSync Desarrollo Opinión

Pruebas de navegador con BrowserSync

Siempre intentamos encontrar fórmulas para economizar tiempo y ya hemos comentado más de una vez que algunas de estas fórmulas se pueden aplicar al desarrollo web.

BrowserSync (no confundir con Broweser Sync de Google) es una herramienta gratis, que está pensada para el desarrollo de sitios web responsivos, ¡y tiene que estar en tu caja de herramientas! BrowserSync promete ayudarte a ahorrar tiempo.

Desarrollar una página web adaptativos puede ser un trabajo complicado y pesado, sobre todo cuando hay que hacer pruebas, guardar, redimensionar pantalla, mirar el resultado, guardar otra vez... Con BrowserSync es posible agilizar este proceso, pues este permite sincronizar URLs, interacciones y cambios de código entre los diferentes dispositivos automáticamente. Es posible ver el resultado del cambio realizado en la pantalla actual en otras pantallas casi instantáneamente, cuando estamos editando el código.

Entre sus diferentes  opciones y características, se destaca el Action Sync que  permite poder hacer scroll o clicar en los dispositivos sincronizados al mismo tiempo. Mientras realizamos pruebas, scroll, clics o refrescamos, estas acciones se reflejan en otros navegadores. También posiblita sincronizar acciones en los formularios. Cualquier dato introducido en un formulario, en un dispositivo se copia a los demás.

BrowserSync permite que los navegadores se actualicen automáticamente cuando cambiamos imágenes, CSS o HTML. Otro elemento que considero importante de BrowserSync, es que este no se limita a navegadores de ordenadores de sobremesa, también permite sincronizar instantáneamente entre dispositivos móbiles. Siendo un módulo de Node.js, una plataforma Open Source que ayuda en el desarrollo de aplicaciones de alta escalabilidad,  funciona en Linux, MacOS y Windows. Además de poder ejecutarse en sitios webs desarrollados en PHP,ASP o Rails.

Para sitios webs estáticos, con su modo servidor, BrowserSync sirve el sitio web con un  mini-servidor, y sí ya existe un servidor para sitios webs dinámicos, se puede utilizar una URL de proxy que permite ver el sitio web. De esta forma no es necesario ningún plugin de navegador para funcionar.

BrowserSync tiene una API sencilla. La puedes utilizar para integrar BrowserSync con otras herramientas. En su sitio web oficial es posible encontrar la documentación.

Hay otras herramientas parecidas en la red, pero BrowserSync siendo Open Source me parece una herramienta interesante y potente  que vale la pena experimentar, ¡además de ser una buena idea! Es tan interesante que Google la ha incorporado y configurado en su Web Starter Kit. También está diseñada para ser usada conjuntamente con Sass y los CMS más populares de la red también se aprovechan de ella. Drupal, por ejemplo tiene un módulo en desarrollo que ayuda a hacer la integración entre los dos sistemas.
Fuentes:

Sass como preprocesador de CSS

Artículo anterior

Javascript para Robots y Node.js

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

Los mejores software para gestión de proyectos

3 Herramientas DevOps

Maquetar en Drupal 7: Funciones del Tema

CodyHouse