Debugger CSS y HTML en el navegador

En Desarrollo, Webmasters por

Todo desarrollador de aplicaciones web necesita un debugger CSS y HTML para incrementar la productividad. En la actualidad la mayoría de los navegadores incluyen un debugger de este tipo pro defecto. Yo me centraré en los dos navegadores más usados por los usuarios del blog que es FireFox seguido muy de cerca por Chrome.

Par acceder al debugger basta con hacer click con el botón derecho del ratón sobre un elemento de la web que queremos hacer debug (por ejemplo un enlace o una imagen) y elegimos la opción “Inspeccionar elemento”.
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 depurarlo y optimizarlo. Incluso podemos podemos modificar el código directamente y ver el resultado en pantalla.

Debugger CSS y HTML de FireFox.

El debugger 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.
Una característica que me atrevería a decir única del debugger de FireFox es la “Vista 3D” que nos permite ver en relieve las diferentes capas de elementos HTML y así entender de una forma intuitiva y visual el código.
Cómo herramienta por defecto está muy bien y su uso te puede ahorrar horas de trabajo.

Debugger CSS y HTML de 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 un pequeño cuadrado. Al mismo tiempo si hacemos click en ese cuadrado podemos elegir otro cualquier color en un selector de colores.
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.

Si usas Chorme como navegador el debugger CSS y HTML por defecto es suficiente, yo no usaría ningun plugin o extensión a mayores.

FireBug el mejor Debugger CSS y HTML.

Debugger CSS y HTML

Este debugger fue originalmente diseñado para FireFox aunque hoy en día existe una versión Lite para Chrome. Hay que decir que este debugger saca todo su potencial usándolo sobre FireFox, que es lo que recomiendo ya que en Chrome podeis usar el debugger por efecto que trae el navegador.

Primero hay que instalar FireBug en FireFox desde su página oficial.

Una vez instalado su uso es muy sencillo, click con el botón derecho del ratón en un elemento y le damos a “Inspeccionar elemento con FireBug” y ya nos aparecen las dos pantallas con código CSS y el código HTML. También podemos activar/desactivar FireBug desde el nuevo icono que aparece en la barra de herramientas de FireFox arriba a la derecha.