Existen numerosos y valiosos recursos de desarrollo web, ya sean libros, vídeos, cursos en línea, etc. Aprender a utilizar la herramienta Inspeccionar Elemento (Inspect Element) del navegador es una de esas poderosas habilidades. Es una herramienta de aprendizaje inestimable, que está al alcance de tu mano y siempre accesible.

Con la función de Inspección de Elementos, puedes ver el funcionamiento interno del sitio web. Aunque solo se puede ver el marcado del front-end, como HTML, CSS y, a veces, JavaScript, te da una manera de ver precisamente cómo los desarrolladores construyeron un sitio web.

En este post, vamos a mostrarte cómo utilizar la herramienta Inspeccionar Elemento y algunas de las tecnologías, características y funcionalidades relacionadas que puedes encontrar. En primer lugar, vamos a hacer una introducción formal a la herramienta Inspeccionar elemento en sí.

Presentación de la herramienta de Inspección de Elementos

En los primeros tiempos de la web, solo había una forma de ver el código de un sitio web: la función de ver el código fuente (View Source).

Página de Kinsta.com "Ver fuente".
Página de Kinsta.com «View source».

Esta situación era frecuente en la época anterior a la abundancia de hojas de estilo en cascada (CSS) y JavaScript. Los desarrolladores web utilizaban HTML para todos los elementos del sitio, incluyendo el contenido, el diseño y… bueno, todo.

Cuando la web empezó a evolucionar y las tecnologías subyacentes aumentaron su potencia, fue necesario desarrollar mejores herramientas. Firebug, de Firefox, fue una de las primeras soluciones para averiguar cómo funcionaba un sitio web:

Los logotipos de Firefox y Firebug.
Los logotipos de Firefox y Firebug.

Al cabo de un tiempo, esa funcionalidad llegó a casi todos los navegadores. Hoy en día, conocemos esa función como la herramienta Inspeccionar elemento:

La herramienta de inspección de elementos en el sitio web de Kinsta.
La herramienta de inspección de elementos en el sitio web de Kinsta.

Es una forma poderosa de ver la tecnología y el código subyacentes de un sitio web. Como tal, puedes encontrarla en varios lugares: a menudo a través de un menú de la barra de herramientas, haciendo clic con el botón derecho en una página y seleccionando la opción, o con un atajo de teclado.

Aunque la herramienta de inspección de elementos se centra principalmente en el HTML y el CSS de una página, hay más cosas para las que puedes utilizarlas.

Con la herramienta Inspeccionar elemento de tu navegador, puedes ver el funcionamiento interno de cualquier sitio web, desde el HTML hasta el CSS 👀 Aprende a usarla aquí ⬇️Clic para Tuitear

Recorrido por el panel de elementos de inspección

DevTools de Brave.
DevTools de Brave.

La herramienta de inspección de elementos es mucho más que una forma de mostrar el código. A menudo hay varios paneles a los que acceder:

  • Inspector – Se llama Elementos (Elements) en algunos navegadores. Es la pantalla principal de la herramienta Inspeccionar Elemento y te muestra el código de la página, junto con el CSS específico del elemento. También encontrarás más detalles sobre el «sistema de cuadrícula» de un sitio y otros aspectos.
  • Consola (Console) – Es el registro de avisos del frontend de un sitio, y es un lugar donde también se pueden introducir fragmentos de código para realizar una prueba rápida de una idea.
  • Red (Network) – Aquí verás las peticiones realizadas hacia y desde un servidor, como todas las peticiones POST y GET.
  • Rendimiento (Performance) – Por supuesto, un sitio tiene que tener rendimiento. Por ello, hay una herramienta dedicada a ayudarte a medir algunas métricas esenciales del sitio. Algunos navegadores lo hacen mejor que otros.
  • Memoria (Memory) – Este panel te permite ver cómo un sitio utiliza la memoria, y de nuevo, algunos navegadores ofrecen amplias métricas.
  • Aplicación (Application) – Dentro de este panel, puedes ver toda una serie de información sobre la caché del sitio, los servicios de fondo, y mucho más.

Además de esto, hay más paneles que puedes añadir:

Una lista de otros paneles dentro de DevTools de Brave.
Una lista de otros paneles dentro de DevTools de Brave.

Existen paneles simples, como el de Medios, y otros más complejos como el Perfilador de JavaScript y el Monitor de Rendimiento. En pocas palabras, el nombre de la herramienta Inspect Element hace un flaco favor a toda la funcionalidad que hay bajo el capó. Tiene un poder inmenso y debería ser central en el flujo de trabajo de cualquier desarrollador web.

Por qué querrás utilizar el elemento de inspección

La herramienta Inspect Element es casi la única solución «clavada» que necesitarás tener a tu lado durante el desarrollo. Entraremos en los detalles técnicos del por qué a lo largo del resto del artículo. Sin embargo, primero vale la pena hablar de tu motivación para usar Inspect Element.

Hay algunas razones por las que querrías utilizar la herramienta:

  • Puedes consultar otros sitios web para inspirarse en cómo trabajar en el tuyo.
  • Aprenderás cómo otros sitios o desarrolladores logran técnicas específicas.
  • Te da una licencia para experimentar en tu sitio sin consecuencias.
  • En la mayoría de las herramientas de Inspect Element.
  • Es bueno averiguar más sobre el sitio web en cuestión.

En resumen, aprender sobre el desarrollo web implica ver buenos ejemplos de sitios web y descubrir lo que los hace funcionar.

La herramienta Inspect Element te permite comprobar el HTML y el CSS exactos que se utilizan en un sitio, lo que te da una gran oportunidad de implementar esos aspectos y técnicas en tu trabajo.

Cómo encontrar tu herramienta de inspección de elementos de tu navegador

La buena noticia es que la herramienta de inspección de elementos es sencillo. En la mayoría de los casos, se hace clic con el botón derecho del ratón en una página y se selecciona Inspeccionar o Inspeccionar elemento:

Eligiendo la herramienta de Inspección de Elementos.
Eligiendo la herramienta de Inspección de Elementos.

Por defecto, abrirá la herramienta en una ventana dividida. A menudo se sitúa por defecto en el lado derecho. Pero puedes personalizar esto a tu gusto e incluso hacer salir la herramienta en tu ventana:

La herramienta Inspeccionar elemento en su ventana.
La herramienta Inspeccionar elemento en su ventana.

Por supuesto, también puedes acceder a Inspeccionar elemento desde la barra de herramientas del navegador o a través de un atajo de teclado. La ubicación exacta variará dependiendo del navegador. Por ejemplo, en Firefox, encontrarás las herramientas de desarrollo web en el menú Herramientas > Herramientas del navegador. En cambio, Brave (y otros navegadores basados en Chromium) tienen la opción de Herramientas de desarrollo en el menú Ver > Desarrollador:

El menú de la barra de herramientas de Brave, mostrando sus herramientas para desarrolladores.
El menú de la barra de herramientas de Brave, mostrando sus herramientas para desarrolladores.

Los atajos de teclado suelen ser similares en todos los navegadores: Comando + Mayúscula + C (Control + Mayúscula + C para Windows). Este atajo hace que aparezcan rápidamente las herramientas con las que necesitas trabajar.

Si nunca has abierto la herramienta de Inspección de Elementos, a menudo se muestra en la parte derecha de su menú, como hemos mencionado anteriormente. Para cambiar esto, haz clic en el menú del semáforo en la barra de herramientas del elemento de inspección. Aquí puedes cambiar el lado en el que se muestra el «dock»:

Las opciones del "lado del muelle" en la herramienta Inspeccionar elemento.
Las opciones del «Dock» en la herramienta Inspeccionar elemento.

Ten en cuenta que Firefox también utiliza una vista de «triple panel» por defecto, que te ayuda a obtener la mayor cantidad de información posible en la herramienta Inspeccionar elemento:

La vista de "triple panel" de Firefox.
La vista de «triple panel» de Firefox.

Ahora que tienes la herramienta abierta, es una buena idea averiguar qué puedes hacer con ella. Hablaremos de esto a continuación.

3 situaciones para utilizar la herramienta de inspección de elementos

Hemos mencionado algunas formas de utilizar la herramienta Inspeccionar elemento, pero podemos ir más allá y ofrecer algunos casos de uso. Vamos a discutirlos brevemente.

1. Búsqueda de elementos específicos en una página web

El objetivo principal de la herramienta Inspect Element está en su nombre: inspeccionar los elementos de la página web. Para ello, te dirigirás a la página web deseada y luego elegirás tu método para abrir las herramientas de desarrollo.

Una vez abierto el panel, harás clic en la flecha que actúa como selector del elemento deseado:

El icono de la flecha del inspector.
El icono de la flecha del inspector.

Desde aquí, puedes pasar el ratón por encima de cualquier elemento de la página, y lo verás resaltado en la ventana del Inspector/Elementos:

Resaltar un elemento en el panel de herramientas de desarrollo.
Resaltar un elemento en el panel de herramientas de desarrollo.

Es un proceso sencillo, una de las razones por las que la herramienta Inspect Element es tan valiosa y popular entre los desarrolladores web.

2. Emular un dispositivo, una pantalla y un navegador de destino

El elemento de inspección también funciona como una especie de emulador de dispositivos. En otras palabras, puedes ver cómo se ve un sitio web en un dispositivo específico. Las opciones son numerosas:

Una lista de dispositivos emulados mostrados en Brave.
Una lista de dispositivos emulados mostrados en Brave.

Este emulador será estupendo para juzgar si tu estrategia mobile-first o tu diseño responsivo son precisos y funcionan. Es inestimable y también más rentable que tener 200 dispositivos flotando por tu escritorio.

A menudo se accede a la emulación de dispositivos desde un pequeño icono en algún lugar del panel de Elementos de Inspección:

Emulando un dispositivo con la herramienta de inspección de elementos.
Emulando un dispositivo con la herramienta de inspección de elementos.

Al hacer clic en este icono se mostrará tu sitio tal y como se ve en el dispositivo que ha seleccionado:

Elección de un dispositivo para emular desde la herramienta Inspeccionar elemento.
Elección de un dispositivo para emular desde la herramienta Inspeccionar elemento.

Más adelante profundizaremos en esto, pero es una forma sólida de hacer que tus diseños sean consistentes en todos los dispositivos.

3. Determinación del rendimiento de la página web

La herramienta Inspeccionar elemento también puede ayudarte a juzgar la velocidad y el rendimiento de un sitio web a través del panel Performance:

El panel de Inspección del Rendimiento de los Elementos.
El panel de Inspección del Performance de los Elementos.

Esta característica funciona «registrando» los tiempos de carga de elementos y scripts específicos. Los navegadores basados en Chromium ofrecen esta información de forma brillante. Grabarás la página mientras se carga y luego verás los resultados en un formato de línea de tiempo.

Es una forma excelente de determinar si una página tiene un buen rendimiento a nivel general. A partir de ahí, querrás utilizar una herramienta como Google PageSpeed Insights o Lighthouse para trabajar más en el rendimiento de tu sitio. Los navegadores basados en Chromium tienen un generador de informes Lighthouse incorporado:

Un informe incorporado de Google Lighthouse.
Un informe incorporado de Google Lighthouse.

También puedes ver un resumen de las pruebas de rendimiento en otras pestañas. Por ejemplo, puede ver un Call Tree, un resumen general y un Event Log:

El registro de eventos del elemento de inspección.
El Event Log del elemento de inspección.

Es posible que no necesites ninguna otra herramienta para juzgar el rendimiento o el funcionamiento de tu sitio web. Aprender cómo funciona en la práctica es algo que discutiremos a continuación.

Trucos y consejos para utilizar la herramienta de inspección de elementos

Ya hemos hablado de que la herramienta Inspect Element es más potente de lo que parece a primera vista. Echemos un vistazo a algunos trucos y consejos para sacar el máximo partido a su conjunto de características, empezando por lo más básico.

Modificación de las propiedades, valores y estados de los elementos

Hasta ahora, solo hemos tocado el concepto de usar la herramienta Inspeccionar Elemento para hacer cambios temporales en un sitio. Vamos a discutir cómo hacer esto con más detalle.

Los pasos son sencillos. En primer lugar, utiliza el icono de la flecha para seleccionar el elemento elegido. Verás una superposición que resalta los distintos componentes cuando pasas el ratón por encima de ellos:

Selección de elementos en la herramienta de inspección de elementos.
Selección de elementos en la herramienta de inspección de elementos.

Una vez que llegues al elemento deseado, puede hacer doble clic en casi cualquier lugar donde vea una etiqueta dentro del panel de Elements y escribir un cambio. Por ejemplo, queremos cambiar el texto original del héroe en la página de inicio de Kinsta a algo diferente:

Cambio de texto en la página de inicio de Kinsta.
Cambio de texto en la página de inicio de Kinsta.

También puedes trabajar con CSS de la misma manera que con HTML. Por ejemplo, los botones de llamada a la acción (CTA) de la página de inicio de Kinsta:

Seleccionar un botón en la página de inicio de Kinsta.
Seleccionar un botón en la página de inicio de Kinsta.

Si seleccionas el botón con el puntero, puedes ver su CSS relacionado en el panel de Styles de la derecha:

El panel Estilo dentro de la herramienta Inspeccionar elemento.
El panel Styles dentro de la herramienta Inspeccionar elemento.

Al igual que con los elementos HTML, puedes cambiar los valores y añadir tu CSS también:

Cambiar el color del botón en el panel de Estilos.
Cambiar el color del botón en el panel de Estilos.

Por supuesto, para elementos como los botones, es posible que quieras trabajar con sus distintos estados. En este caso, también vale la pena cambiar el estado :hover. Para ello, haz clic en el enlace :hov del panel Style. Al elegirlo, aparecerá una lista de estados de los elementos, y podrás seleccionar aquellos para los que quieras ver el CSS del estado hover:

Trayendo las opciones de "Estados" en el panel de Estilos.
Trayendo las opciones de «Styles» en el panel de Estilos.

La página web mostrará cómo es el estado sin que tengas que actuar. Aquí, hemos cambiado los colores del hover para diferenciarlo del estado del botón por defecto:

Cambiar los colores del estado hover en el panel de Estilos.
Cambiar los colores del estado hover en el panel de Styles.

Incluso puedes coger las URL de las imágenes y cambiarlas por otras. En la página de inicio de Kinsta, mostramos una captura de pantalla del panel de control de MyKinsta:

El tablero de MyKinsta en la página de inicio de Kinsta.
El panel de control de MyKinsta en la página de inicio de Kinsta.

Al localizar el elemento y cambiar la URL de origen de la imagen, podrás probar otras imágenes en su lugar:

Changing an image on the Kinsta home page.
En este caso, el cambio se produjo en cuestión de minutos (Fuente de la imagen: Pixabay).

Como es de esperar, estos cambios no son permanentes, y con una rápida actualización de la página, puedes volver a la normalidad. Como alternativa, también puedes copiar el HTML y el CSS en tu editor e incluirlos en tu código para que los cambios sean permanentes.

Búsqueda de elementos

Puede ser que antes de poder modificar un elemento, necesites encontrarlo. La herramienta Inspeccionar elemento tiene una función de búsqueda directa que puede ayudarte a encontrar cualquier aspecto de una página web.

Eso sí, es difícil de encontrar si no se sabe dónde buscar. La forma «oficial» en los navegadores basados en Chromium es dirigirse al menú «semáforo» en la parte derecha de la página y seleccionar la opción Search:

¿Necesitas un alojamiento excepcional, rápido y seguro para tu nuevo sitio web? Kinsta ofrece servidores rápidos como un rayo y un soporte de primera clase 24/7 por parte de expertos web. Consulta nuestros planes

La opción "Buscar" en las DevTools de Brave.
La opción «Search» en las DevTools de Brave.

Al usar esto se abrirá el panel de la Console, junto con una pestaña de Search. Desde aquí, escribe la etiqueta deseada en el cuadro de texto, y verás una lista de elementos asociados en la página:

Búsqueda de elementos en las DevTools de Brave.
Búsqueda de elementos en las DevTools de Brave.

Ten en cuenta que en otros navegadores, puedes encontrar la funcionalidad en otro lugar. Por ejemplo, Firefox incluye un cuadro de búsqueda en la parte superior de su panel del Inspector:

Búsqueda de elementos en el panel del Inspector de Firefox.
Búsqueda de elementos en el panel del Inspector de Firefox.

Otro consejo rápido: puedes realizar una expansión recursiva de los distintos nodos y elementos haciendo clic con el botón derecho del ratón en el panel Elements y seleccionando Expand recursively:

La opción Expandir recursivamente en el panel Elementos.
La opción Expand recursively en el panel Elements.

Si echas un vistazo al panel de Styles, también verás un cuadro de texto de Filter. Este campo te permite filtrar por propiedades CSS, lo que lo convierte en un gran compañero de la función de búsqueda global:

Filtrado por propiedades en el panel de Estilos.
Filtrado por propiedades en el panel de Estilos.

En general, no debería ser difícil encontrar lo que necesitas con dos herramientas de filtro y búsqueda dedicadas.

Un rápido repaso al Box model

Una de las mejores maneras en que la herramienta Inspeccionar elemento puede ayudarte a aprender más sobre cómo las propiedades CSS actúan sobre los elementos es el panel visual «box model».

El modelo de caja.
El box model.

Esta visión generalte ofrece una representación de cómo una caja específica (como «elemento» o «div») aparece en la pantalla. En otras palabras, es una visión general de cómo los márgenes, el relleno, el borde y el contenido se combinan para convertirse en la sección que se ve en la pantalla.

Explicar el modelo de caja CSS completo y cómo interactúa con el HTML de una página web va más allá del alcance de este artículo, aunque Mozilla tiene una fantástica guía sobre los entresijos del concepto.

A menudo encontrarás el panel Box model dentro de las secciones Layout o Computed del panel derecho de la herramienta Inspeccionar elemento:

El panel "Modelo de caja" dentro de la herramienta Inspeccionar elemento.
El panel «Box model» dentro de la herramienta Inspeccionar elemento.

Al igual que con cualquier elemento y propiedades, también puedes cambiar los valores y la configuración de una caja en particular. También habrá una lista de otras propiedades que te ayudarán a posicionar la caja, establecer un índice z, aplicar ajustes de flotación y visualización, y mucho más.

Mientras trabajas con el box model, también puedes beneficiarte de ver el sistema de cuadrícula en juego en la página. Para ello, eche un vistazo al panel Layout – las opciones que necesita estarán bajo el menú Grid:

El menú de configuración de la parrilla.
El menú de configuración del Grid.

Al hacer clic en la configuración de visualización deseada y, a continuación, elegir una superposición relevante, se mostrará en pantalla, lo que te permitirá tomar decisiones más precisas utilizando el modelo de caja para manipular los elementos del sitio.

Emulación de dispositivos mediante el elemento de inspección

Han dejado de ser palabras de moda para convertirse en términos léxicos integrados, pero «responsive» y «mobile-friendly» son factores clave del desarrollo web. Por ello, la herramienta Inspect Element aborda esta faceta mediante un par de funciones.

En la mayoría de los navegadores, la herramienta Inspeccionar elemento tendrá un icono de dispositivo móvil en la barra de herramientas superior:

Alternar la visualización responsiva móvil dentro de Brave.
Alternar la visualización responsiva móvil dentro de Brave.

Sin embargo, Safari es diferente. En su lugar, hay un interruptor para Enter/Exit Responsive Design Mode en el menú Develop:

La opción "Salir del modo de diseño adaptable" en Safari.
La opción «Exit Responsive Design Mode» en Safari.

Independientemente de cómo llegues, una vez que elijas la opción, la página web se mostrará como si la estuvieras viendo en un dispositivo más pequeño:

Una vista del diseño de un dispositivo móvil en Firefox.
Una vista del diseño de un dispositivo móvil en Firefox.

Mientras que Safari solo te da la posibilidad de elegir entre los distintos dispositivos de Apple, los demás navegadores profundizan para ofrecerte las herramientas necesarias para diseñar con los principios de mobile-first. Por ejemplo, puedes elegir la orientación de la ventana gráfica y el dispositivo que quieres emular:

La lista de "Emulación de dispositivos" en Brave.
La lista de «Emulación de dispositivos» en Brave.

Hay otras dos características interesantes aquí. En primer lugar, puedes elegir una velocidad de red emulada. Safari no incluye ninguna opción para esto, y los navegadores basados en Chromium ofrecen una pequeña opción general de throttling de la red:

Las opciones de aceleración en Brave.
Las opciones de throttling en Brave.

Firefox es el que mejor lo hace, con una selección decente de opciones de red entre las que elegir:

Las opciones de estrangulamiento de Firefox.
Las opciones de throttling de Firefox.

Para redondear las cosas, también puedes simular la retroalimentación háptica y el reconocimiento del sensor. En los navegadores basados en Chromium viene por defecto, y en Firefox hay que activarlo:

La opción de retroalimentación háptica en Firefox.
La opción de retroalimentación háptica en Firefox.

Firefox se queda atrás en este aspecto, ya que Chrome, Brave y otros muestran el cursor como una pequeña superposición «similar a la de los dedos». La funcionalidad no es perfecta para ningún navegador, aunque es una forma fiable de determinar cómo podría actuar tu sitio en otros dispositivos.

Este tipo de pruebas suele quedar en el olvido para muchos desarrolladores web. Sin embargo, ya no hay excusa cuando los navegadores ofrecen soluciones completas como esta.

Atajos de teclado al utilizar la herramienta de inspección de elementos

La mayoría de los atajos de teclado de los navegadores suelen ser los mismos en todos ellos. Eso es una buena noticia si vas cambiando de herramienta para probar tus sitios.

He aquí una lista rápida de algunos de los atajos más populares (y valiosos):

Abrir la herramienta de inspección de elementos Comando + Mayúsculas + C para Mac, Control + Mayúsculas + C para Windows
Moverse entre nodos Flechas arriba y abajo
Expandir el nodo seleccionado Flecha derecha
Contraer el nodo seleccionado Flecha izquierda
Expandir y colapsar nodos de forma recursiva Opción + clic para Mac, Alt + clic para Windows
Moverse dentro de un nodo para trabajar con los atributos Entrar o regresar
Avanzar a través de los atributos de un nodo Tab
Retroceder en los atributos de un nodo Shift + Tab
Ocultar o mostrar el nodo seleccionado H
Editar y dejar de editar un nodo como HTML F2
Cuando se selecciona una propiedad CSS, se incrementa el valor por uno Flecha arriba
Cuando se selecciona una propiedad CSS, disminuye el valor por uno Flecha abajo
Cuando se selecciona una propiedad CSS, se incrementa el valor por diez Mayúsculas + Flecha arriba
Cuando se selecciona una propiedad CSS, disminuye el valor por uno Mayúsculas + Flecha abajo
Cuando se selecciona una propiedad CSS, se incrementa el valor por 0,1 Opción + flecha arriba para Mac, Alt + flecha arriba para Windows
Cuando se selecciona una propiedad CSS, disminuye el valor por 0,1 Opción + flecha abajo para Mac, Alt + flecha abajo para Windows

Por supuesto, hay muchos más atajos disponibles. Mozilla tiene una documentación excepcional para Firefox, mientras que Chrome, Brave, Edge y otros comparten atajos. Apple es menos útil con los atajos para desarrolladores de Safari, ya que no hay una lista definida en sus páginas de ayuda. En su lugar, sugerimos leer la documentación oficial de las herramientas para desarrolladores de Safari.

Sumérgete en la función Inspect Element del navegador (y en todas las herramientas que tiene reservadas) con esta extensa guía 🔎Clic para Tuitear

Resumen

El desarrollo web ya no es solo HTML. Hay muchas tecnologías implicadas. Incluso si te ciñes a la santísima trinidad de HTML, CSS y JavaScript, tendrás que ver cómo un sitio web reúne todos estos componentes.

La herramienta de inspección de elementos del navegador es una de las mejores maneras de mirar bajo el capó de un sitio web y descubrir con detalle explícito cómo funciona. Aunque es fantástica como ayuda para el aprendizaje, también puede ayudarte a probar los cambios en tu sitio y descubrir cómo funciona en diferentes dispositivos y redes móviles.

¿Utilizas a menudo el elemento de inspección? Si es así, ¿cuáles son tus características favoritas? Comparte tus opiniones en la sección de comentarios.


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 35 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.