Skip to content

Debugger HTML y CSS en el navegador

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.

One Comment

  1. Mariano Mariano

    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 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR