Tincr: CSS and JAVASCRIPT browser extension

A aquellos de vosotros que, como desarrolladores, os guste tener multitud de plugins en los navegadores que faciliten vuestra labor, aquí os traigo un plugin que ha caido en mis manos y que he encontrado muy interesante.

Se trata de un plugin para editar las características CSS y JAVASCRIPT, directamente desde la consola del navegador Lamentablemente está solo disponible para Chrome, pero espero que algún día lo preparen para el resto de navegadores.

¿Y qué diferencia puede tener respecto a otros plugins similares, como Firebug, EditCSS, Web Developer Toolbar, etc? Pues, en principio, una bastante importante... Es capaz de guardar cada uno de nuestros cambios.

En la mayoria de las ocasiones, tenemos la necesidad de ir modificando multitud de elementos CSS en nuestras páginas, para ir viendo cómo va quedando el resultado final. El problema que nos encontramos entonces, es "pasar" todas las modificaciones realizadas a la página de estilo final.

Es entonces, cuando podemos perder alguna modificación porque no encontremos TODAS las actualizaciones que hemos realizado.

¿Y como viene Tin.cs a solucionar todos estos problemas?
Muy sencillo. Él solito se encarga de almacenar cada cambio que vamos haciendo, directamente en el archivo original del proyecto.

Por fin podemos realizar todos nuestros cambios y, al mismo tiempo que se ven reflejados en la página, se van almacenando en su página .css correspondiente. Ya no tenemos que buscar, copiar y pegar cada modificación que hemos efectuado.

PONIENDO EN MARCHA Tincr:
· INSTALACIÓN: Para poder empezar a utilizar Tincr, debemos descargarnos el plugin para Chrome (disponible aqui).
· CONFIGURACIÓN: Para configurar el plugin, debemos abrir la consola de desarrollador (Ctrl+Shift+i) y pulsar el botón de configuración de Tincr. En la ventana que se nos abre, seleccionamos el tipo de proyecto "Configuration File" y luego, indicamos la ruta a nuestro proyecto.
Sólo nos queda incluir en nuestro proyecto el archivo de configuración en donde le indicamos al plugin qué archivos debe controlar.
· INCLUSIÓN DEL ARCHIVO tincr.json: Dentro de la carpeta del proyecto, debemos incluir el archivo tincr.json (que utiliza el plugin), con el código fuente que indica dónde están nuestros archivos css y js, para que la gestión de los mismos se efectúe correctamente.

Aquí os pongo un ejemplo de cómo sería este archivo:

CÓDIGO JSON DE CONFIGURACIÓN:

{
       "toFile" : [
             {"from": "/js/(.+\\.js)",
              "to": "/js/$1"},
             {"from": "/css/(.+\\.css)",
              "to": "/css/$1"}
       ],
       "fromFile" : [
             {"from": "(\\\\|/)app\\1assets\\1(?:javascripts|stylesheets)\\1(.+(\\.js|\\.css))(\\.[a-zA-Z]+)?$",
              "to": "/assets/$2?body=1"}
       ]
}

Y YA ESTÁ:
Ya podemos empezar a utilizar la consola de desarrollador, y hacer cuantos cambios sean necesarios. Todos y cada uno de ellos, se almacenarán automáticamente en los archivos correspondientes.

Si tenéis abierto el programa con el que normalmente desarrolláis vuestras aplicaciones (Visual Studio en mi caso), podréis rechazar los cambios que el plugin haya realizado, simplemente con regresar a vuestro editor y cancelar el aviso que os indica que el archivo '...ha sido modificado fuera del editor...'.

Espero que os ayude en vuestros desarrollos, y os permita ganar tiempo a la hora de actualizar los diseños de vuestras aplicaciones.

Un saludo a todos!

REFERENCIAS:
Tincr site
Reference Docs