Hablando de Firebug, vamos a poder editar y depurar código además de monitorizar el sitio en el que trabajamos. Las principales funcionalidades son:
- Edición de HTML en caliente (en tiempo real)
- Edición de hojas de estilos (en tiempo real)
- Monitorización de la carga de las páginas
- Depuración del Javascript de nuestras páginas
- Gestión de errores Javascript, CSS y XML
- Explorador de DOM
La Consola
La consola es uno de sus puntos fuertes, muestra las peticiones AJAX (GET o POST) que realiza la página, headers, variables enviadas y la respuesta del servidor. También nos muestra los errores Javascript que se producen en la página junto a un enlace dónde podemos ver la línea de código errónea.
Por último disponemos de una API muy interesante, Firebug añade una vaiable global llamada “console” a todas las webs cargadas en Firefox, este objeto contiene muchos métodos que nos permiten mostrar información en la consola de un modo transparente y sin necesidad de recurrir a los molestos “alert()”.
HTML
Mediante esta funcionalidad Firebug nos editar el html en tiempo real y encima nos da muchas facilidades para ello, especialmente interesante es el “Inspector de HTML” que nos permite
detectar los elementos deseados únicamente pasando el ratón por encima, una vez tenemos localizado el elemento lo podremos editar en tiempo real.
- Ver código fuente generado
- Resaltar cambios
- Editar HTML en tiempo real
- Encontrar elementos con el ratón
- Inspeccionar un elemento y recargarlo sin perderlo
- Copiar el HTML
CSS
En esta pestaña podrás acceder fácilmente a la edición de estilos de la página, es muy intuitivo y tremendamente útil ya que todos los cambios se realizan en tiempo real.
A menudo los pequeños retoques de hojas de estilo se convierten en una tarea nada agradable para el desarrollador ya que su comportamiento en cada navegador es en numerosas ocasiones diferente, esta herramienta es ideal para principiantes que necesitan de muchas pruebas para encontrar los errores en su hoja de estilos, el famoso método de “Try & Error“.
- Previsualizar colores e imágenes
- Inspeccionar la hoja de estilos
- Editar estilos y ver los cambios en tiempo real
- Ayuda en línea y corrector de errores tipográficos
Script
Como anteriormente hemos resaltado posee un potente debugger de Javascript que nos permite manejar a nuestro antojo la ejecución de los códigos javascript, con un poquito de paciencia se puede llegar a conseguir un buen aumento del rendimiento de nuestro código.
- Encuentra cualquier Script fácilmente
- Ejecución paso a paso
- Detección de errores y puntos de ruptura
- Ver el valor de las variables en tiempo real
- Saltos fáciles a cualquier línea del código
- Modo “Profile” que muestra un completo análisis de los tiempo de carga y ejecución que ha provocado tu navegación por la página.
DOM
Como no Firebug también nos ayuda a encontrar los objetos DOM de una manera relativamente sencilla y editarlos al vuelo, para aquellos que anden un poco despistados con la traducción de DOM pordríamos decir que es algo así como el “Modelo en Objetos para la representación de Documentos” y por lo tanto se trata de la interfaz a través de la cual los programas y scripts pueden acceder y modificar dinámicamente el contenido, estructura y estilo de los documentos HTML.
- Resumen de objetos
- Muestra el árbol DOM de la página
- Edición en tiempo real
- Navegación por el código Javascript
Red
¿Tu web va algo lenta?, la solución la puedes encontrar con esta útil herramienta puedes comprobar dónde se pierde el tiempo de la carga de tu web gracias a su genial línea de tiempo, entre sus características más destacadas está la diferenciación entre la carga de caché del servidor y la que no se encuentra cacheada.
- Línea de tiempo
- Filtros por tipos de archivos
- Ver que datos se sirven en caché
- Examina las cabeceras
- Monitoriza el XMLHttpRequest
En próximos posts veremos complementos de Firebug que nos van a extender las funcionalidades originales...
No hay comentarios:
Publicar un comentario