Cómo inspeccionar elementos en Chrome, Safari y Firefox

En cierto modo, el trabajo de los desarrolladores y diseñadores web es trabajar con una serie de elementos HTML configurados para verse bien. No obstante, con las herramientas adecuadas, incluso quienes no son especialistas o técnicos pueden abrir el telón de cualquier sitio web para ver lo que realmente sucede detrás de escena.

Es posible que estés familiarizado con el truco clásico «ver el código fuente de la página», que muestra el HTML sin procesar de una página en la ventana del navegador. Pero hay una mejor manera de hacer tu trabajo de detective: la función de inspección de elementos permite ver e incluso modificar el front-end de cualquier sitio web, lo que puede ser muy útil al crear un sitio web o aprender cómo funcionan los sitios web.

En esta publicación discutiremos qué significa «inspeccionar» los elementos de la página y cómo hacerlo en tres navegadores web comunes.

Inspeccionar es el arma secreta de un profesional web. Los desarrolladores, diseñadores y especialistas en marketing lo usan con frecuencia para echar un vistazo dentro de cualquier sitio web para obtener una vista previa de los cambios de contenido y estilo, corregir errores o aprender cómo se construye un sitio web en particular. Por ejemplo, si encuentras una interfaz intrigante en un sitio web de la competencia, el elemento de inspección te permite ver el HTML y el CSS.

Inspeccionar puede ser una «herramienta de desarrollo», pero no necesitas escribir ningún código ni instalar un software adicional para usarlo. 

Además la función de inspección de tu navegador te permite jugar con una página web todo lo que quieras cambiando el contenido, los colores, las fuentes, los diseños, etc. Cuando termines, simplemente actualiza la página para revertir todo a la normalidad. Ten en cuenta que inspeccionar no cambia el sitio web en sí, solo cómo aparece en tu navegador, ¡así que siéntete libre de experimentar!

Inspeccionar también es una herramienta increíblemente valiosa para aquellos que están aprendiendo desarrollo web. En lugar de ver el código fuente simple, usa «inspeccionar elementos» para interactuar con la página y ver cómo cada línea de código se asigna a un elemento o estilo. Al comprender mejor lo que constituye una página web típica, puedes comunicarte de manera efectiva con los desarrolladores en caso de error o si deseas realizar un cambio.

Cada navegador web moderno tiene una herramienta nativa para inspeccionar elementos. Se puede acceder a cualquier navegador, pero algunos navegadores como Chrome y Safari tienen ligeras diferencias. Analicemos cómo usar la herramienta de inspección en tres navegadores web de escritorio: Google Chrome, Safari de Apple y Mozilla Firefox.

¿Cómo inspeccionar elementos en Chrome?

Para usar el inspector en Google Chrome, primero navega a cualquier página web. Una vez allí, tienes varias formas de abrir la herramienta:

• Haz clic derecho en cualquier parte de la página y elige Inspeccionar. Al hacer clic con el botón derecho en un elemento específico de la página, se abrirá ese elemento en la vista del inspector.
• En la barra de menú superior, selecciona Ver > Desarrollador > Herramientas para desarrolladores.
• Abre Personalizar y controlar Google Chrome haciendo clic en el icono de tres puntos en la esquina superior derecha de la ventana del navegador. Desde allí, selecciona Más herramientas > Herramientas para desarrolladores.
• Usa el atajo control-shift-C en Windows o comando-opción-C en macOS.

El panel Herramientas para desarrolladores de Chrome se abrirá en la parte inferior de la ventana del navegador. Si deseas cambiar la ubicación del panel, haz clic en el icono de tres puntos en la esquina superior derecha del panel (junto al icono X ), luego elige tu posición de acoplamiento preferida. 

A lo largo de la parte superior del panel de inspección, verás pestañas para Elementos (Elements), Consola (Console), Fuentes (Fonts), etc. Todas estas son herramientas que puedes usar para evaluar el contenido y el rendimiento de una página. Sin embargo, todo lo que necesitamos para inspeccionar está en la pestaña Elementos.

La siguiente área hacia abajo es el HTML fuente de la página actual. Tómate un tiempo para explorar esta región y observa cómo al pasar el cursor sobre el fragmento de código se resalta el elemento correspondiente en la página. El azul indica el contenido de un elemento, el verde corresponde al relleno y las áreas en naranja son los márgenes.

También puedes hacer lo contrario: localizar un fragmento de código del elemento de la página. Para ello, haz clic en el icono de selección de elementos en la esquina superior izquierda del panel. A continuación, haz clic en un elemento de la página. Verás el código fuente revelado en el panel de inspección.

Además de ver, puedes usar inspeccionar para modificar el contenido de la página. Comencemos intercambiando algo de texto. Primero, encuentra algún contenido de texto en el código fuente. Luego, haz clic con el botón derecho en el elemento y elige Editar texto; esto abre una entrada de texto en línea en la que puedes escribir lo que quieras. Cuando anulas la selección de la entrada de texto, verás que los cambios surten efecto:

Si buscas quitar un texto en particular, simplemente selecciona el elemento en el código fuente y elimínalo. Verás que desaparecerá de la página.

Sin embargo, no te preocupes, volverá a aparecer cuando actualices la página. También puedes ocultar cualquier elemento, sin eliminarlo, haciendo clic con el botón derecho en el elemento en el código fuente y seleccionando Ocultar elemento.

Incluso puedes agregar nuevos elementos de página: haz clic con el botón derecho en un elemento en el código fuente y elige Editar como HTML. Verás un campo de texto donde puedes pegar HTML. Por ejemplo:

Si navegas más abajo en el panel de inspección de Chrome, verás la pestaña Estilos. Aquí se muestra qué estilo CSS se ha aplicado al elemento seleccionado. Haz clic en las líneas de código para reescribirlas, o activa/desactiva ciertas propiedades marcando o desmarcando las casillas junto a estas.

Finalmente, observamos una característica más de la función de inspección de Chrome: la vista móvil. Al crear un sitio, los diseñadores deben considerar cómo aparecen sus páginas en las pantallas de computadoras de escritorio, dispositivos móviles y tabletas. Afortunadamente, Chrome te permite obtener una vista previa de la misma página web en varias resoluciones de pantalla. Comienza haciendo clic en el icono de alternar dispositivo en la esquina superior izquierda del panel:

Desde aquí, configura la resolución de la pantalla manualmente o selecciona un ajuste preestablecido del dispositivo en el menú, luego ve cómo responde el diseño de la página. También puedes rotar la pantalla e incluso obtener una vista previa del rendimiento a velocidades de «móvil de nivel medio» y «móvil de bajo nivel».

¿Cómo inspeccionar elementos en Safari?

Para usar la herramienta de inspección de Safari, «Web Inspector», primero habilita las herramientas de desarrollo de Safari. Selecciona Safari > Preferencias. En la ventana de preferencias, debajo de Avanzado, marca la casilla junto a Mostrar menú/ Desarrollar en la barra de menú. Verás la opción de Desarrollar agregada al menú de arriba.

A continuación, ve a la página web que inspeccionarás. Hay tres formas de abrir Web Inspector:

• Haz clic derecho en cualquier parte de la página y selecciona Inspeccionar elemento. Al hacer clic con el botón derecho en un elemento de página específico, se abrirá ese elemento en la vista del inspector.
• Elige Desarrollar > Mostrar inspector web en la barra de menú superior.
• Usa el atajo comando-opción-I.

El inspector de Safari se abre en la parte inferior de la ventana de forma predeterminada. Para cambiar esta configuración, puedes hacer clic en el icono para acoplar la pantalla en el lado derecho o en una ventana emergente; ambos se encuentran junto al icono X en la esquina superior izquierda de la pantalla.

El panel de inspección de Safari consta de dos columnas. La primera muestra el HTML fuente y la segunda expone el CSS de la página. Utiliza el cursor para explorar el HTML fuente y ver qué líneas de código corresponden a cada región de la página (el azul resalta el contenido; el verde, el relleno; y el naranja, los márgenes):

También puedes inspeccionar la página directamente. Haz clic en el icono de selección de elementos en la parte superior del panel:

Cuando hagas clic en un elemento de la página, Web Inspector revela el código fuente correspondiente. 

Safari también te permite modificar, agregar y eliminar elementos de la página. Para editar la página, haz clic derecho en un elemento HTML en el panel de inspección, luego selecciona una opción del menú Editar. Web Inspector te pedirá una nueva entrada de texto y luego mostrará tus cambios en tiempo real:

O bien, agrega un nuevo elemento a la página haciendo clic con el botón derecho en una línea de código y elige una opción del menú Agregar. En este ejemplo, añadimos un nuevo elemento secundario <h1> a un <div> existente:

Si deseas eliminar un elemento de la página, simplemente selecciona algún código y suprímelo. O bien, haz clic con el botón derecho y elige Alternar visibilidad para ocultar un elemento sin eliminarlo.

A la derecha puedes ver la columna Estilos, donde podrás cambiar o activar/desactivar propiedades CSS para cualquier elemento:

Al probar los cambios de contenido y estilo, querrás ver el efecto en las pantallas de los dispositivos móviles y en las computadoras de escritorio. El modo de diseño responsive de Safari permite obtener una vista previa de un sitio web en dispositivos comunes.

Para usarlo, selecciona Desarrollar > Ingresar al modo de diseño responsive. En este modo, puedes usar las mismas herramientas de inspección en páginas configuradas para los dispositivos Apple o puedes establecer las dimensiones tú mismo:

¿Cómo inspeccionar elementos en Firefox?

Para abrir Firefox Inspector:

• Haz clic derecho en cualquier parte de la página y selecciona Inspeccionar elemento. Al hacer clic con el botón derecho en un elemento de página específico, se abrirá ese elemento en la vista del inspector.
• Selecciona Herramientas > Desarrollador web > Inspector en la barra de menú superior.
• Usa el atajo control-shift-C en Windows o comando-opción-C en macOS.

El inspector de Firefox aparece en la parte inferior de la ventana de forma predeterminada. Para cambiar su posición, selecciona el icono de tres puntos en la esquina superior derecha del inspector, luego elige una opción de visualización alternativa.

El panel de inspección de Firefox es comparable en características a Chrome y Safari. El código fuente HTML indica el elemento de página correspondiente con códigos de color: el contenido es azul, el relleno es púrpura y los márgenes son amarillos:

Además, puedes encontrar el código seleccionando elementos en la página. Para ingresar al modo de selección, haz clic en el icono del cursor en la esquina superior izquierda:

Haz clic en cualquier elemento de la página para revelar su origen en el panel de inspección.

Para modificar o eliminar un elemento de la página, selecciona el código en el inspector. Luego, haz doble clic para cambiar el texto o haz clic con el botón derecho y selecciona Editar como HTML o Crear nuevo nodo para agregar código. O simplemente elimina el código y mira los cambios resultantes en la página.

Para alternar el estilo de un elemento, usa Estilos de filtro en la parte inferior del panel de inspección. Desmarca la casilla junto a una propiedad CSS para desactivarla (o escribe el código nuevo de forma directa):

Finalmente, las herramientas de Firefox también vienen con una opción de vista previa móvil. Para usarlo debes hacer clic en el icono del modo de diseño responsive en la esquina superior derecha del panel:

El modo de diseño responsive permite elegir entre varias resoluciones de pantalla preestablecidas o determinar una propia, y también puedes alternar la velocidad de conexión y la proporción de píxeles del dispositivo:

Obtén una mirada más cercana con Inspeccionar

Una vez que aprendas los conceptos básicos de la herramienta de inspección de tu navegador, podrás observar cuánta información de un sitio web está disponible públicamente. Con unos pocos clics, puedes explorar cómo se construyen las páginas web, qué estilos usan, cómo se optimizan para los motores de búsqueda, cómo se formatean en las pantallas móviles y mucho más.