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.

    << [Comienza ya] Gestiona tu contenido de una manera fácil con el software  CMS gratuito de HubSpot>>   

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. 

cómo inspeccionar elementos en Chrome: Herramientas para desarrolladores

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.

cómo inspeccionar elementos en Chrome: explorar elementos HTML

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.

cómo inspeccionar elementos en Chrome: 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:

inspeccionar elementos en Chrome: editar texto

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.

cómo inspeccionar elementos para código en Chrome: eliminar código fuente

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:

cómo inspeccionar elementos en Chrome: Editar como HTML

cómo inspeccionar elementos en Chrome: añadir texto

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.

Cómo inspeccionar elementos en Chrome: estilo CSS

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:

cómo inspeccionar elementos en Chrome: vista móvil

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».

inspeccionar elementos con Chrome: vista previa resolución de pantalla

¿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.

cómo inspeccionar elementos en Safari: Mostrar inspector web

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):

cómo inspeccionar elementos en Safari: panel de inspección

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

inspeccionar elementos en Safari: selección de elementos

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:

cómo inspeccionar elementos en Safari: Editar elementos

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:

cómo inspeccionar elementos en Safari: agregar elementos

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:

cómo inspeccionar elementos en Safari: activar/desactivar propiedades CSS

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:

inspeccionar elementos en Safari: Ingresar al modo de diseño responsive

¿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.

cómo inspeccionar elementos en Firefox: panel de inspección

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:

cómo inspeccionar elementos en Firefox: seleccionar elementos de la página

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:

inspeccionar elementos en Firefox: modo de selección

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.

función de inspeccionar elementos en Firefox: modificar o eliminar un elemento de 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):

inspeccionar elementos con Firefox: Estilos de filtro

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:

cómo inspeccionar elementos en Firefox: vista previa móvil

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:

cómo inspeccionar elementos en Firefox: modo de diseño responsive

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.

New Call-to-action

 CMS Hub

Publicado originalmente el Aug 16, 2022 7:00:00 AM, actualizado el 17 de agosto de 2022

Topics:

Desarrollo web