Cómo utilizar la herramienta Inspeccionar elemento en Chrome

La herramienta Inspeccionar elemento de Google Chrome es una potente función que permite a los usuarios ver y modificar el código HTML, CSS y JavaScript de un sitio web directamente desde el navegador. Los desarrolladores y diseñadores web suelen utilizarla para depurar, editar estilos, probar código e incluso para ver más de cerca cómo se construyen determinados elementos del sitio web. Esta guía le mostrará cómo acceder y utilizar eficazmente la herramienta Inspeccionar elemento en Chrome.

¿Qué es la herramienta Inspeccionar elemento?

La herramienta Inspeccionar elemento forma parte del conjunto de herramientas para desarrolladores (DevTools) de Chrome. Te permite:

• Inspeccionar y editar HTML y CSS en tiempo real.
• Depurar código JavaScript.
• Simular diferentes tamaños de pantalla para probar el diseño adaptable.
• Inspeccionar las solicitudes de red y ver cómo un sitio web carga los recursos.
• Probar modificaciones sin afectar al sitio en vivo.

Cómo abrir la herramienta de inspección de elementos en Chrome

Existen varias formas de acceder a la herramienta Inspeccionar elemento en Chrome:

Método 1: Haga clic con el botón derecho del ratón en una página web

1. Navegue hasta la página web que desea inspeccionar.
2. Haga clic con el botón derecho del ratón en cualquier elemento de la página (por ejemplo, una imagen, un texto o un botón).
3. Seleccione Inspeccionar en el menú contextual que aparece.

Esto abrirá la pestaña Elementos de DevTools, resaltando el HTML del elemento seleccionado.

Método 2: Usar atajos de teclado

Puede abrir rápidamente la herramienta Inspeccionar Elemento usando atajos de teclado:

• Windows/Linux: Ctrl Mayús I
• Mac: Comando Opción I

Método 3: Desde el menú de Chrome

1. Haz clic en el menú de tres puntos (⋮) en la esquina superior derecha de Chrome.
2. Ve a Más herramientas > Herramientas para desarrolladores.

Se abrirá el panel DevTools en la parte inferior o lateral de la ventana del navegador.

Visión general de la interfaz de DevTools

Una vez que abra la herramienta Inspeccionar elemento, verá varias pestañas en la parte superior del panel DevTools:

1. Elementos: Muestra la estructura HTML y los estilos CSS de la página.
2. Consola: Útil para ejecutar comandos JavaScript y ver mensajes de error.
3. Fuentes: Permite ver y depurar archivos JavaScript.
4. Red: Muestra todas las solicitudes de red, lo que resulta útil para analizar los tiempos de carga de las páginas y los recursos.
5. Rendimiento: Ayuda a analizar el rendimiento de una página web.
6. Aplicación: Muestra detalles como cookies, almacenamiento local y caché.
7. Lighthouse: Proporciona informes de auditoría y rendimiento del sitio web.

La pestaña más utilizada: Elementos

La pestaña Elementos es el núcleo de la herramienta Inspeccionar Elemento, permitiéndole ver y modificar el HTML y CSS de una página web.

Cómo utilizar la herramienta Inspeccionar elementos para HTML y CSS

1. Inspección de elementos HTML

1. Abra la pestaña Elementos (haciendo clic con el botón derecho y seleccionando Inspeccionar o utilizando los atajos de teclado).
2. Pase el ratón por encima de los distintos elementos del árbol HTML para verlos resaltados en la página web.
3. Haga clic en cualquier elemento HTML del panel Elementos para ver sus correspondientes estilos CSS en el panel Estilos de la derecha.

2. Edición de HTML en tiempo real

1. Haz doble clic en una etiqueta, atributo o texto HTML dentro de la pestaña Elementos para editarlo.
2. Pulse Intro para aplicar los cambios.
3. Los cambios se reflejarán inmediatamente en la página, pero son temporales y se restablecerán cuando actualice la página.

Ejemplo: Cambie el texto de un encabezado de <h1>Welcome to My Site</h1> to <h1>Hello World!</h1> haciendo doble clic en el texto y editándolo.

3. Editar CSS en tiempo real

1. Seleccione un elemento al que desee aplicar estilo en la pestaña Elementos.
2. En el panel Estilos de la derecha, puede editar las propiedades CSS existentes o añadir otras nuevas.
3. Para añadir un nuevo estilo, haga clic en un espacio vacío del panel Estilos y escriba la propiedad CSS y el valor.

Ejemplo: Cambiar el color de fondo de un elemento:

Los cambios se aplicarán inmediatamente, pero no se guardarán de forma permanente en el sitio web.

4. Activar y desactivar estilos CSS

1. Cada propiedad CSS del panel Estilos tiene una casilla de verificación junto a ella.
2. Desmarque una propiedad para desactivarla temporalmente, o márquela de nuevo para volver a activarla.

Esto es útil para probar cómo los cambios en CSS pueden afectar al diseño sin editar permanentemente el código.

5. Copiar y editar HTML

1. Haga clic con el botón derecho en un elemento HTML de la pestaña Elementos.
2. Seleccione Copiar > Copiar elemento para copiar el código HTML seleccionado.
3. A continuación, puede pegarlo en su editor de texto o utilizarlo para el desarrollo.

Uso de la pestaña Consola

La pestaña Consola es otra potente herramienta de DevTools, que le permite ejecutar comandos JavaScript directamente en la página:

1. Vaya a la pestaña Consola.
2. Escriba comandos o expresiones JavaScript y pulse Intro para ejecutarlos.

Ejemplo: Cambiar el color de fondo de la página:

Esto cambiará el color de fondo de la página a verde.

Simulación de dispositivos móviles

La herramienta Inspeccionar elemento también le permite probar cómo se ve un sitio web en diferentes tamaños de pantalla y dispositivos:

1. Haga clic en el icono de la barra de herramientas Alternar dispositivo (un pequeño icono de teléfono y tableta) en la esquina superior izquierda del panel DevTools.
2. Seleccione un dispositivo en el menú desplegable (por ejemplo, iPhone, iPad, Galaxy).
3. Ajuste la resolución y la orientación de la pantalla para ver cómo responde el sitio web a distintos tamaños de pantalla.

Esta función es muy útil para probar el diseño adaptable.

Depuración de JavaScript

La pestaña Fuentes se utiliza para depurar JavaScript:

1. Abra la pestaña Fuentes en DevTools.
2. Puede establecer puntos de interrupción haciendo clic en los números de línea del código JavaScript.
3. Esto le permite pausar la ejecución del código e inspeccionar variables, funciones y la pila de llamadas.

Análisis de red con la pestaña Red

La pestaña Red muestra todas las peticiones de red que se producen cuando se carga una página, incluyendo imágenes, scripts y hojas de estilo:

1. Abra la pestaña Red antes de actualizar la página.
2. Actualice la página para ver todas las solicitudes de red.
3. Puede filtrar las solicitudes por tipo (por ejemplo, XHR, JS, CSS) y ver cuánto tarda en cargarse cada recurso.

Esto es útil para optimizar la velocidad de carga de la página.

Resumen

La herramienta Inspeccionar elemento de Google Chrome es una función versátil y esencial para desarrolladores web, diseñadores e incluso usuarios curiosos que deseen comprender cómo se crean los sitios web. Si aprendes a inspeccionar y modificar HTML, CSS y JavaScript, podrás depurar problemas, probar nuevos estilos y asegurarte de que tu sitio web tenga un aspecto excelente en distintos dispositivos. Con las distintas herramientas y pestañas disponibles en Chrome DevTools, podrás comprender mejor el funcionamiento de los sitios web y optimizarlos para mejorar su rendimiento.