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í.
Echa un vistazo a nuestro videotutorial sobre cómo editar un sitio web con inspeccionar elemento
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).
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:
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:
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.
Recorrido por el panel de elementos de inspección
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:
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.
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:
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.
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»:
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:
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:
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:
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:
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:
Al hacer clic en este icono se mostrará tu sitio tal y como se ve en el dispositivo que ha seleccionado:
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:
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:
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:
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.
1. 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:
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:
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:
Si seleccionas el botón con el puntero, puedes ver su CSS relacionado en el panel de Styles de la derecha:
Al igual que con los elementos HTML, puedes cambiar los valores y añadir tu CSS también:
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:
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:
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:
Al localizar el elemento y cambiar la URL de origen de la imagen, podrás probar otras imágenes en su lugar:
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.
2. 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:
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:
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:
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:
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:
En general, no debería ser difícil encontrar lo que necesitas con dos herramientas de filtro y búsqueda dedicadas.
3. 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».
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:
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:
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.
4. 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:
Sin embargo, Safari es diferente. En su lugar, hay un interruptor para Enter/Exit Responsive Design Mode en el menú Develop:
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:
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:
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:
Firefox es el que mejor lo hace, con una selección decente de opciones de red entre las que elegir:
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:
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.
5. 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 diez | 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.
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.
Deja una respuesta