Inspeccionar elementos en el navegador para encontrar errores CSS yHTML

Veamos cómo inspeccionar elementos en el navegador para encontrar errores de código CSS y HTML de forma visual y sencilla.

El proceso de desarrollo web a menudo involucra varios archivos de código que trabajan juntos para crear la experiencia que vemos en nuestros navegadores. En este proceso, los errores son inevitables, ya sean simples errores tipográficos o problemas de diseño más complejos que suelen ser difíciles de detectar. Aquí es donde las herramientas de inspección de elementos de los navegadores modernos como Google Chrome, Mozilla Firefox, y Safari se vuelven esenciales.

Estas herramientas, comúnmente conocidas como DevTools, nos permiten seleccionar el código de los sitios web y editar el HTML y el CSS en tiempo real para solucionar problemas y optimizar las páginas web de forma muy visual.

Inspección de elementos

La inspección de elementos es un proceso mediante el cual los desarrolladores pueden examinar y modificar el HTML y CSS de una página web directamente en el navegador. Esta habilidad es esencial para el diagnóstico rápido de problemas en el sitio web, permitiendo ver cómo los cambios en el código afectan instantáneamente a la presentación en el navegador.

El uso de las herramientas de inspección puede significar la diferencia entre horas de frustración buscando errores y una solución rápida usando el «inspeccionador». En este artículo, veremos brevemente las funcionalidades básicas de las DevTools de Google Chrome para diagnosticar y resolver problemas de CSS y HTML. Las DevTools del resto de navegadores web funcionan de forma similar.

Abrir el inspeccionador (DevTools) en Google Chrome

Inspeccionar elementos en un navegador como Google Chrome es una técnica fundamental para cualquier desarrollador web para encontrar y solucionar errores de CSS y HTML. Veamos paso a paso para hacerlo:

1. Abre Google Chrome.
2. Navega a la página web donde quieres encontrar errores.
3. Abre las DevTools:
   • Haz clic derecho en el elemento que quieres inspeccionar y selecciona «Inspeccionar».
   • O usa las teclas Ctrl+Shift+I en Windows/Linux o Cmd+Opt+I en macOS.

Inspeccionar y Editar HTML y CSS

1. Explora el DOM: En la pestaña «Elements», verás el DOM de la página. Al pasar el cursor sobre los elementos del DOM, verás cómo se resaltan en la página. Eso viene genial para ver cuánto ocupan los contenedores, si tienen padding o margin, etc.
2. Modifica el HTML: Haz clic derecho en un elemento para editar su HTML directamente. Podrás añadir, eliminar o cambiar elementos y atributos. Estos cambios son solo en el cliente y no persisten si recargas la página.
3. Explora los estilos CSS: Todavía en la pestaña «Elements», a la derecha, verás los estilos CSS aplicados al elemento seleccionado.
4. Modificar CSS: Haz clic en cualquier propiedad CSS para editarla. Puedes desactivar y activar cualquier propiedad y ver cómo se comporta automáticamente.
5. Añadir nuevas propiedades: Haz clic en el espacio en blanco de cualquier bloque de estilo y comienza a escribir para añadir una nueva propiedad.

Ejemplo: En el siguiente ejemplo inspeccionamos un encabezado que contiene un enlace con una imagen de fondo. Gracias al inspeccionador podemos ver los tamaños de los contenedores, hacer cambios directamente en el código y ver los resultados de forma rápida.

Ten en cuenta que cualquier cambio que hagas a través de las DevTools es temporal y solo afecta a la instancia actual de la página en tu navegador. Debes aplicar los cambios en el código fuente de tu proyecto para que sean permanentes.