lunes, 1 de septiembre de 2014

Recarga automática de página HTML en Firefox

Dos métodos para que Firefox nos ayude en el desarrollo

Supongamos que necesitamos editar HTML o CSS de forma remota, o quizás de forma local pero sin utilizar ningún editor tipo Dreamweaver o similar.

Es decir, que queremos realizar la edición como se hacía tiempo atrás: a puro golpe de teclado.

Hoy en día, podríamos hacerlo de forma cómoda con la consola web del propio Firefox del código HTML, JavaScript y CSS, con lo que vemos el resultado de forma inmediata.

Otra forma es como se hacía hace años: crear el código, ir al navegador y solicitar la recarga de la página para ver los cambios.

Pero esta forma de trabajar consume tiempo: el que pasa desde que dejamos el editor y solicitamos al navegador que recargue la página. Pueden ser unas décimas de segundo mientras pulsamos la combinación de teclas de cambio de aplicación, pero al cabo del día, suman muchos segundos.

Lo ideal es que no tuviéramos que dejar el editor, y que el navegador hiciera la recarga por sí solo.

Aquí comentaré dos soluciones.

ReloadEvery

Este complemento agrega un menú secundario al ratón, con el que podemos mandar recargar la página cada cierto tiempo, de forma automática.


Y con es ya tenemos resuelto el problema: le ponemos un tiempo de refresco de 5 segundos o menos, y ya podemos trabajar con el código HTML/CSS. En cuanto grabemos el código, pasará un breve espacio de tiempo, y ya veremos los cambios en el navegador.

Esta solución es la más sencilla, pero tiene un problema: si ponemos un tiempo de refresco, digamos de 5 s, entonces tendremos que esperar un tiempo entre 1 s y 5 s para ver el resultado. Y al cabo de unos minutos de trabajo, nos cansará esa imprecisión.

Podríamos configurar el complemento para que haga un tiempo de refresco más corto, pero entonces veremos que el navegador no responderá bien, ya que las peticiones de recarga podrían solaparse, y hacer que la página no salga bien, o incluso que el navegador se quede bloqueado. Y naturalmente, la carga se traslada al resto del sistema (sistema operativo y CPU).

MozRepl

Este complemento incorpora la facilidad de dialogar con Firefox, desde dentro del propio Firefox.

Después de instalarlo, vamos al menú Herramientas, MozRepl, y lo iniciamos.

El complemento crea un servidor en el puerto 4242, y permanece a la escucha. Podemos enviarle comandos para controlar a Firefox.

A continuación preparamos el siguiente programa:

#!/bin/bash

while inotifywait -e modify /home/user/Documentos/Proyecto/
do
    sleep 1
    echo "BrowserReload();" | nc -w 3 localhost 4242  > /dev/null
done

Este guión hace uso de dos programas: inotifywait (incluido en la distribución inotify-tools) y de nc (netcat).

El primero esperará a que se produzca un evento de modificación en el directorio que indiquemos, que será en donde estamos trabajando con el código de la página.

Una vez que ocurra el evento, programamos una espera de 1 s. Esto es necesario por que los comandos que siguen pueden ejecutarse tan rápido que el navegador puede leer la versión anterior a la que acabamos de modificar (se puede hacer la prueba de comentar esa línea, y comprobar si la recarga se realiza con los últimos cambios o no).

Finalmente, enviamos el comando de recarga al navegador, usando netcat (nc), por el puerto 4242 de la máquina local. Programamos un tiempo de 3 s de timeout por si MozRepl no cierra correctamente la comunicación.

Arrancamos el programa en una terminal aparte, y ya podemos empezar a editar el código de la página HTML/CSS. En cuanto mandemos grabar los cambios, al segundo siguiente, el navegador los presentará.

Sacado y modificado desde aquí.