Cómo inspeccionar elementos en Mac: Las mejores soluciones rápidas
Cuando aprendía a construir sitios web, experimentaba con su apariencia en el navegador. Así podía hacer cambios temporales en el HTML y CSS para descubrir lo que más me gustaba. Si quieres hacer lo mismo, necesitas saber cómo inspeccionar páginas en navegadores de Mac.
Si acabas de cambiarte a Mac, es posible que no sepas cómo abrir la herramienta de inspección de elementos de inmediato. En algunos navegadores, como Safari, ver los elementos de la página puede ser un poco complicado. Pero aquí estoy para ayudarte.
¿Qué significa inspeccionar elementos?
“Inspeccionar elementos” es una función útil en los navegadores web que te permite ver y editar el HTML, CSS y JavaScript de una página web directamente. Es utilizada principalmente por desarrolladores, diseñadores y cualquier persona curiosa sobre cómo está construida o cómo funciona una página web.
Aquí tienes una tabla práctica para entender algunos cambios fáciles que puedes hacer con la herramienta de inspección de elementos:
| Tarea | Pasos |
| Cambiar texto en la página web. | Presiona Opción + Comando + I para abrir el Inspector. Busca el texto, haz doble clic en él dentro del código HTML y realiza los cambios. |
| Reemplazar una imagen en la página web. | Haz clic derecho en la imagen y selecciona Inspeccionar Elemento. En el código HTML, busca el atributo img src y reemplaza la URL por la de la nueva imagen. |
| Cambiar color y fuente del texto. | Haz clic derecho en el texto y selecciona Inspeccionar Elemento. En la pestaña de estilos CSS, busca y modifica las propiedades color y font-size (en píxeles). |
Cambiar estados de un elemento (como :hover). | Haz clic derecho en el elemento y selecciona Inspeccionar Elemento. En el código HTML, haz clic derecho sobre el elemento, selecciona Forzar estado y elige el estado deseado (por ejemplo, :hover). |
¿Por qué usar la herramienta de inspección de elementos?
Los desarrolladores web están familiarizados con esta función, que les permite editar código y probar nuevos cambios en un entorno en vivo. Pero si te preguntas por qué podrías necesitar revisar el código de una página web, déjame compartirte algunos escenarios:
- Los diseñadores pueden cambiar el color de cualquier texto, espacio u objeto simplemente modificando el script HTML.
- Los especialistas en marketing utilizan la herramienta de inspección para analizar cómo los competidores diseñan sus sitios web y así planificar estrategias.
- Los escritores pueden cambiar fácilmente cualquier texto de un sitio web y tomar capturas de pantalla.
- Los equipos de soporte encuentran útil esta herramienta para comunicar cambios a los desarrolladores.
Aunque la herramienta es útil para cambiar cómo se ve una página web en tiempo real, recuerda que los cambios se revertirán a su forma original al recargar el navegador.
¿Cuál es el atajo para inspeccionar elementos en un Mac?
En Mac, puedes inspeccionar elementos presionando Opción + Comando + I en un navegador abierto. El mismo atajo funciona tanto en Safari como en Chrome y Firefox. Sin embargo, en Safari, necesitarás habilitar la herramienta de inspección antes de usarla. Aquí te explico cómo:
- Abre el navegador Safari.
- Haz clic en Safari en la barra de menú > Configuración > Avanzado.
- Selecciona Mostrar características para desarrolladores.
Luego verás la pestaña Desarrollar en la barra de menú superior. Allí encontrarás la opción Mostrar Inspector Web, que es la función para inspeccionar elementos web.
Consulta nuestra lista de los mejores atajos de MacBook para uso diario.
Cómo inspeccionar elementos
Depende del navegador que estés utilizando. Pero en general, todo lo que necesitas hacer es abrir la ventana de inspección de elementos.
Usar la herramienta de inspección en Chrome
Si quieres ver los elementos de una página web en Chrome, haz clic en Ver en la barra de menú superior > Luego, selecciona Desarrollador > Herramientas para Desarrolladores.
Verás el inspector de elementos en el lado derecho de la pantalla. En la parte superior, encontrarás el código HTML y, justo debajo, el script CSS. Desde ahí, puedes navegar por varios elementos web, como imágenes, encabezados, texto y servicios.
Tip
Por cierto, si estás interesado en crear aplicaciones independientes súper fluidas para tus sitios web favoritos, deberías probar Coherence X. Es ideal para ejecutar servicios como Spotify o herramientas exclusivas de Chrome en aplicaciones separadas, manteniéndolos fuera de tu navegador. También permite transferir configuraciones entre aplicaciones fácilmente.
✕
Usar la herramienta de inspección en Safari
En Safari, puedes inspeccionar elementos lanzando el Inspector Web. Para hacerlo, haz clic en Desarrollar en la barra de menú > Mostrar Inspector Web en el menú superior o presiona Comando + Opción + I.
Al abrirlo, la ventana de inspección en Safari muestra automáticamente las Fuentes con archivos JavaScript. Para ver los objetos web, haz clic en Elementos en la pestaña del inspector web. Allí encontrarás el script HTML y CSS de la página cargada en columnas lado a lado.
Si no puedes ver la pestaña Desarrollador en la barra de menú, podría ser porque tu aplicación está desactualizada. Para solucionarlo, consulta la guía sobre cómo actualizar Safari rápidamente.
Usar la herramienta de inspección en Firefox
¿Quieres hacer ediciones al script de una página web con Firefox? Haz clic en Herramientas en la barra de menú > Herramientas del Navegador > Herramientas para Desarrolladores. O usa el atajo de inspección en Firefox: Opción + Comando + I.
Al abrirlo, encontrarás un inspector de elementos similar al de Safari. La columna izquierda muestra el código HTML y la del medio el script CSS.
Tip
Si tienes dificultades para cargar una página web o no puedes ver contenido actualizado, borra la caché del navegador. La caché almacena información que ayuda a que las páginas carguen más rápido. Pero a veces, esto puede impedir que se muestren cambios actualizados o que las páginas carguen correctamente. Para solucionarlo, te sugiero borrar la caché con CleanMyMac. Ve a Limpieza, haz clic en Escanear y elimina los archivos de caché en el resultado.
✕
Cómo cambiar una página web con la herramienta de inspección
Ya te mostré cómo abrir la ventana de inspección de elementos, y es bastante sencillo. Pero la magia está en usarla para cambiar cómo se ve o se comporta la página web en tiempo real. Por supuesto, esto es un poco más complicado, pero totalmente posible, incluso si no eres un desarrollador.
Para explicar cómo cambiar elementos, usaré Chrome, que es el navegador con el que estoy más familiarizado. Dicho esto, editar los scripts HTML y CSS funciona de manera similar en todos los navegadores.
Cambiar texto en una página web
Sigue estos pasos para usar la herramienta de inspección y cambiar temporalmente texto en cualquier página web.
- Abre una página web y presiona Opción + Comando + I.
- En la ventana de inspección, haz clic en el botón de flecha diagonal en la parte superior izquierda.
- Luego, haz clic en el texto que deseas editar en la página en vivo. Al hacerlo, el párrafo correspondiente se resaltará en el inspector de elementos.
- Expande el código HTML si es necesario.
- Haz doble clic en el texto en el código HTML.
- Realiza las ediciones y presiona Enter.
Revisa el texto en la página en vivo. Debería reflejar los cambios que hiciste.
Nota
Los cambios que hagas usando la herramienta de inspección son solo temporales y solo visibles para ti. Si actualizas la página o vuelves a visitarla, todas las modificaciones se perderán.
Cambiar imágenes en la página web
Con la herramienta de inspección, también puedes reemplazar una imagen en una página web cambiando simplemente la URL de la imagen original en el código HTML. Aquí te explico cómo hacerlo:
- Copia el enlace de la nueva imagen.
- Abre la página web que deseas editar.
- Luego, haz clic derecho en la imagen que quieres cambiar y selecciona Inspeccionar. El inspector de elementos se abrirá y verás el código HTML de la imagen resaltado.
- Haz doble clic en la etiqueta HTML llamada img src.
- Reemplaza la URL de la imagen original con la que copiaste.
Inmediatamente, verás una nueva imagen reemplazando la existente en la página en vivo.
Cambiar color y fuente
Si quieres estilizar el texto en una página web de manera diferente sin hacer cambios permanentes, puedes usar la herramienta de inspección. Aquí tienes lo que necesitas hacer:
- Abre una página web.
- Haz clic derecho en un párrafo o subtítulo. Luego, selecciona Inspeccionar.
- Busca el color y tamaño de fuente en el panel CSS. En Chrome, está debajo del panel HTML.
- Cambia el código de color y el tamaño en píxeles.
Ahora, la tipografía del texto reflejará los nuevos valores que acabas de escribir.
Cambiar estados de elementos
A menudo, solo podemos ver botones, enlaces y otros elementos web en diferentes estados después de interactuar con ellos. Por ejemplo, algunos botones camb
