Post Actualizado en julio 25, 2013


3 Complementos para editar código en tiempo real

Desde hace tiempo los que hacemos desarrollo para sitios web, nos alegramos por una herramienta que obtuvo gran popularidad rápidamente, hablo de firebug. El complemento llego haciendo mucho ruido de sus bondades, y con justa razón, ya que llego rápidamente a ser uno de los addons consentidos por la mayoría de los desarrolladores.   Este introdujo […]

Desde hace tiempo los que hacemos desarrollo para sitios web, nos alegramos por una herramienta que obtuvo gran popularidad rápidamente, hablo de firebug. El complemento llego haciendo mucho ruido de sus bondades, y con justa razón, ya que llego rápidamente a ser uno de los addons consentidos por la mayoría de los desarrolladores.

 

Este introdujo algo que todos queríamos pero pocos habían pensado en desarrollar, una aplicación que te permitiera modificar código en tiempo real dentro de los estilos, HTML, JavaScript, ver eventos DOM y encontrar errores de codificación de manera mucho más ágil.

 

Lo que sin duda fue la parte fundamental de su expansión es el tiempo real. Lo que hacíamos antes de que firebug apareciera, era editar código y en nuestro navegador pulsar la tecla F5 para ir checando los cambios, algo tedioso pero que con el tiempo se convertira en maña para hacerlo más rápido.

Firebug introdujo la selección de objetos para mostrar sus estilos en código, con esto permitía, sin necesidad de hacer algún tipo de reload, mostrar la todos los elementos que afectaban a la respectiva selección, y con esto tener la oportunidad de editar elementos y/o agregar  los mismos, depurar y monitorizarlos, todo esto con el objetivo de llegar a un punto en el que cada unidad tuviera el estilo exacto para llegar a un resultado deseado, y todo esto sin necesidad de hacer ninguna recarga de la página, todo absolutamente inline.

A partir de este maravilloso desarrollo, llegaron algunos otros que querían una tajada del pastel que este ya había ganado; algunos buenos y que aún persisten y otros que como era de esperarse, no duraron a las mejoras de sus contrincantes.

En mi opinión solo hay 3 complementos que vale la pena probar para resolver este tipo de “issues” y que aún con las características de que los mismos navegadores integren sus maneras de inspeccionar código, van a seguir siendo descargados y utilizados por lo cómodos, versátiles y funcionales.

Firebug – Sitio

El primero es por supuesto firebug, el primer addon elaborado para satisfacer estas necesidades; se libero la primera versión en el 2006 y su creador es Joe Hewitt

Live CSS Mod – Link

Live CSS Mod. Un complemento de Chrome, pero que es una maravilla. Tiene básicamente las mismas funciones que firebug, solo que con un poco más de estilo.

Opera Dragonfly – Sitio

 

El tercero solo esta disponible para opera pero es igual de poderoso que firebug y tiene adicionales que lo hacen muy interesante, como reglas, consola y descripción de errores.

 

Cualquiera de estos 3 complementos te va a dar una mejora significativa para tus proyectos en cuanto a tiempo, y se que seguramente esto se reflejara en dinero.