Arsenal del Dev: Firebug I: Navegacion HTML

Publicadas por Jee Ba

Y para coronar mi regreso aqui un pequeño tutorial sobre esta gran herramienta. Este Plugin de Firefox es vital para cualquier chango que quiera desarrollar Paginas Web, incluyendo por supuesto Juegos Web. ¿Y que es lo que hace esta magica herramienta?, Que es lo que no hace deberian de preguntarse. Empezare por lo mas basico:

1) Modificacion de tu HTML
A veces te pasa lo siguiente: Tienes tu HTML generado de forma dinamica y para ver el resultado tienes que ver el codigo tal como te bota en blanco y negro y posiblemente muchos TAG aglomerados en una sola linea, simplemente brutal.


Agradezcan que Fierfox te colorea el codigo siquiera. ¿Han tratado de ver el codigo en IE6?

Con Firebug no solo puedo pasearme por el codigo HTML como si fuera un dia de campo y verlo todo coloreado resaltando los datos de los atributos, tambien puedo modificarlo, cambiandole el texto, añadir nuevos atributos, es mas puedo eliminar Tags completos solo por el gusto de ver que pasaria si elimino esa molestosa ventana flotante o ese quisquilloso DIV que me esta tapando la informacion.


En la parte de Abajo podemos apreciar el navegador de HTML. Rojo y azul excelente!

2) Selector de HTML
Ok ya tenemos nuestro navegador de HTML, ahora digamos que tenemos un tag que esta que molesta la vista, y tambien digamos que tu HTML es de 15k, asi que buscar nodo por nodo va a ser toda una travesia. Pues esos problemas se acabaron, haciendo un click en la pantalla puedes navegar hasta la parte del codigo donde aparezca ese elemento DOM que buscas.


Solo seleccionas la herramienta Inspeccion para anvegar a travez de tu pagina web


3) Cambia tu CSS al vuelo
Ok ya tienes seleccionado tu etiqueta, haz probado eliminarla y se ve bien. ¿Que sigue despues?. Manipula tu CSS on the Fly!!!. ASi es con firebug puedes cambiar tu CSS y ver los cambios al instante, sin necesidad de estar entrando una que otra vez a tu archivo CSS y presionando F5. Tan solo seleccionas tu propiedad y empeizas a manipularlo. Y si eres de gustos exigentes puedes crear nuevas propiedades a cualquier elemento.


Cambiandole el estilo a mi editor de Blogger. ¿Ven como aumente los bordes?

Destilado de Awesomeness en este debugeador web. La siguiente entrada hablaremos un poco sobre javascript y ajax asi que stay tune .


PD: Obviamente este plugin solo funciona para Firefox, aunque hay varios debugers que tratan de funcionar asi de bien en otros navegadores.

¿Te gusta la pagina?, socializame haciendole click a tu color preferido:

Add to Technorati Favorites Digg! del.icio.us.me

1 comentarios:

  1. Acsi.D dijo...

    Firebug es una muy bueno, a mi también me gusta Codetch, es como Dreamweaver pero no puedes hacer cambios a tu Css. Un saludo.

Publicar un comentario