Todo desarrollador de aplicaciones web necesita un debugger CSS y HTML. En la actualidad la mayoría de los navegadores incluyen un modo debug por defecto. Para acceder al modo debug basta con hacer click con el botón derecho del ratón sobre un elemento de la web  y elegimos la opción “Inspeccionar elemento”, también podemos acceder presionando F12.

Después de hacer lo anterior veremos que nos aparecen unas barras de herramientas con el código CSS y HTML para poder examinarlo y poder depurar y optimizarlo. Incluso podemos modificar el código directamente y ver el resultado en pantalla.

Debug en firefox

El modo debug que trae por defecto es bastante completo y sencillo. Para disponer de todas las opciones en pantalla, habrá que activar “Estilo” (ALT+S) y el “Panel de marcado” (ALT+M) y ya podemos ver tanto código CSS como HTML.

Cómo herramienta por defecto está muy bien y su uso te puede ahorrar horas de trabajo.

Firebug

Firebug es un complemento para Firefox que añade una serie de herramientas al navegador para la edición y depuración de código HTML, CSS y JavaScript en tiempo real, tambien muestra información sobre el rendimiento de la página web.

La consola de Firebug JavaScript se utiliza para depurar los scripts de la página. Firebug compila una lista de secuencias de comandos en la página, tanto internos como externos, ayuda a localizar y saltar entre secciones de código JavaScript.

Sepuede ejecutar el código línea por línea,  lo que permite ver la ruta tomada a través de la estructura del programa. También puede ver el contenido de las variables del código se está ejecutando para verificar como se comporta.

Debug en Chrome

Es similar al de FireFox pero su interfaz es algo diferente. Nos muestra directamente el código HTML y el CSS. Tiene una ventaja frente al de FireFox y es que muestra los colores a partir de valor hexadecimal.
En cuanto a funcionalidad es más complejo que el de FireFox y ofrece más opciones y posibilidades para el desarrollador, pero su avanzado es más complejo.