Cuando se está trabajando con HTML y CSS es necesario poder realizar un debug del código. Esto permitirá detectar posibles errores, corregirlos y poder realizar mejoras o cambios sobre los ficheros que visualizan una web.
Uno de los métodos más apropiados, o que aumentan la productividad del desarrollador, consiste en usar el propio debugger que trae el navegador en el que estamos visualizando la web.
Este debugger nos permite visualizar la regla CSS definida para cada elemento. Incluso nos permite modificar sobre la marcha y visualizar en tiempo real como se vería dicho cambio.
A continuación os muestro las diferentes formas en las que podemos realizar esto dependiendo del navegador.
Debugger HTML y CSS con Firefox
Firebug se integra con el navegador Firefox para poner una gran cantidad de herramientas de desarrollo a su alcance mientras navega.
Nos permite editar, depurar y monitorear CSS, HTML y JavaScript en cualquier página web.
Una vez instalado, puedes hacer uso de él haciendo clic en el icono con forma de insecto en tu barra de herramientas.
También puedes hacer clic derecho encima del elemento que quieres visualizar y hacer clic en “Inspeccionar elemento con Firedebug”.
Se abrirá una ventana anclada a la parte inferior donde por defecto se muestra el código html de la web, y a la derecha el estilo CSS asociado.
Dependiendo del elemento que se seleccione, quedará resaltado el HTML y CSS asociado a dicho elemento.
Todos los cambios que se realicen no serán guardados, al actualizar la página se perderán. Es importante que modifiques tu fichero HTML y CSS real antes de que actualizar la página y perder los cambios realizados.
Debugger HTML y CSS con Chrome
Podemos acceder al debugger proporcionado por Chrome pulsando la tecla F12.
Funciona de la misma forma que Firedebug.
Debugger HTML y CSS con Safari
El funcionamiento es similar a lo visto en Firedebug. En el siguiente enlace encontrarás toda la información específica para trabajar con este navegador.
Me parece una herramienta que nos da el navegador bastante útil al emplear css cuando estamos trabajando con html, pero no deja de ser una herramienta. Como ayuda esta muy bien 🙂