MacOS: Habilitar el Inspector Web en Safari

Si desea ver el código fuente de una página web en Apple Safari para macOS Sierra, deberá habilitar la herramienta Safari Web Inspector utilizando los siguientes métodos.

Los desarrolladores de navegadores web como Apple y Google, entre otros, proporcionan una herramienta lista para usar para ver los códigos subyacentes. Los desarrolladores la utilizan principalmente para depurar y visualizar cambios realizados en un sitio web en vivo sin alterar el código real en el servidor. Sin embargo, esta herramienta se ha vuelto popular entre creadores de contenido y usuarios de internet conocedores de la tecnología que desean editar un sitio web en vivo para fines personales o profesionales. Si usted es uno de esos, lea el artículo hasta el final para conocer todo sobre el Safari Web Inspector y cómo inspeccionar elementos.

Contenidos

¿Qué es Safari Web Inspector?

MacOS: Habilitar el Inspector Web en Safari
Aprenda qué es Safari Web Inspector (Foto: Cortesía de Apple)

El Inspector Web es parte del conjunto de herramientas de desarrollo que Apple ofrece a los desarrolladores de sitios web y aplicaciones en todo el mundo. La herramienta está disponible tanto para dispositivos macOS como iOS. Los desarrolladores pueden modificar, optimizar y depurar sitios web sin esfuerzo para obtener un rendimiento óptimo de sus propiedades en línea.

La herramienta Web Inspector en Safari reúne la mayor parte de los recursos del sitio web bajo una interfaz unificada. La herramienta también separa los recursos y sus parámetros en pestañas dedicadas para que no se sienta abrumado con tantos códigos y opciones. Web Inspector también le ofrece una vista de Línea de tiempo de la memoria del sitio web para que pueda depurar la memoria fácilmente. Además, siendo un desarrollador, puede ajustar y optimizar más de 150 propiedades CSS populares que necesita para desarrollar un sitio web funcional.

En la herramienta Web Inspector, obtiene las siguientes pestañas para los recursos del sitio web:

  • Elementos
  • Consola
  • Fuentes
  • Red
  • Líneas de tiempo
  • Almacenamiento
  • Gráficos
  • Capas
  • Auditoría

Cómo activar el Safari Web Inspector en Safari 10 y superior

Por defecto, Apple Mac desactiva el Inspector Web en Safari. Esto es para evitar el desorden innecesario en la interfaz de usuario (UI) del navegador web. Sin embargo, si es un desarrollador, creador de contenido y usuario experto de Mac, puede querer activar la función siguiendo estos pasos:

  • Abre la aplicación Safari en tu MacBook o iMac.
  • Asegúrate de que hayas hecho clic en el navegador para obtener el icono de Safari en la barra de herramientas de Mac.
MacOS: Habilitar el Inspector Web en Safari
Cómo encontrar la opción de Preferencias de Safari
  • Haz clic en Safari en la esquina superior izquierda y selecciona Preferencias.
  • Alternativamente, puedes usar la tecla de acceso rápido Command + , para mostrar el menú de Preferencias.
  • Mientras estés en el menú de Preferencias, debes estar en la pestaña General.
MacOS: Habilitar el Inspector Web en Safari
Menú de Preferencias de Safari, pestaña Avanzado para habilitar el Inspector Web en Safari
  • Navega a la pestaña Avanzado.
  • Justo debajo de la opción Proxies, deberías ver la casilla para Mostrar menú de Desarrollar en la barra de menú. Marca la casilla.
MacOS: Habilitar el Inspector Web en Safari
El menú Desarrollar en la barra de herramientas de Mac
  • Ahora, el menú Desarrollar de Safari aparecerá en la barra de herramientas de Mac.

Así es como puedes activar la función del Inspector Web en tu navegador Safari de Mac. Los pasos son similares para la versión de macOS más reciente, Ventura, y versiones anteriores como Monterey, Big Sur, Catalina, etc., hasta Jaguar.

También lee: Html 4.01

Hasta ahora, aprendiste cómo obtener la función del Inspector Web en la aplicación Safari de Mac. Aprende a continuación cómo utilizarlo en Safari para sitios web en vivo:

Cómo utilizar el Safari Web Inspector en macOS

Encuentra a continuación los pasos para llamar a la herramienta Web Inspector para desarrollo web, creación de contenido o cualquier otro propósito. En este artículo, muestro los pasos usando el sistema operativo macOS Monterey. Sin embargo, los pasos son bastante similares desde macOS Jaguar hasta Ventura.

  • Abre Safari y visita cualquier sitio web que desees inspeccionar.
  • Hay dos formas de inspeccionar los códigos HTML/CSS subyacentes de un sitio web o hacer cambios utilizando la herramienta de desarrollador de Apple, Web Inspector. Estas son:
    • Desarrollar > Mostrar Inspector Web.
    • Clic derecho > Inspeccionar elemento.
  • Para usar la primera, dirígete a la barra de herramientas de Mac para el navegador Safari y haz clic en el menú Desarrollar.
MacOS: Habilitar el Inspector Web en Safari
Cómo usar Safari Web Inspector en macOS Monterey
  • En el menú contextual que aparece, haz clic en Mostrar Inspector Web. La tecla de acceso rápido para esta acción es Opción + Command + I.
MacOS: Habilitar el Inspector Web en Safari
La vista del Inspector Web
  • Esto abrirá la herramienta Inspector Web en la mitad inferior del navegador web. Los códigos que ves son para la URL o la página web completa a la que accediste.
  • Si deseas visualizar el código subyacente para un elemento específico en la página web sin abrir el código para toda la página web, selecciona el elemento que deseas inspeccionar.
MacOS: Habilitar el Inspector Web en Safari
Inspeccionar elemento en Safari para Mac
  • Clic derecho y selecciona Inspeccionar elemento en el menú contextual que se abre.
  • El Inspector Web de Safari se abrirá.
MacOS: Habilitar el Inspector Web en Safari
Inspeccionando elementos específicos en Safari
  • Pero esta vez, Safari te llevará directamente al código HTML o CSS subyacente del elemento que estás auditando.
  • En esta herramienta, obtienes los códigos HTML y CSS del elemento de la página web que estás inspeccionando.

También lee: Technipages explica CSS

Cómo abrir el Safari Web Inspector en versiones antiguas de macOS

Supongamos que estás en un Mac anterior a Jaguar y necesitas usar la herramienta Web Inspector. Si no encuentras los pasos anteriores en ese Mac, puedes ejecutar un código simple para activar el Inspector Web. Aquí te explico cómo hacerlo:

  • Abre Aplicaciones y ve a la carpeta Utilidades.
  • Dentro de Utilidad, deberías encontrar Terminal. Es el símbolo del sistema de las computadoras macOS.
  • Ahora, lanza la interfaz de línea de comandos Terminal y escribe el siguiente comando simple:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

MacOS: Habilitar el Inspector Web en Safari
Ejecutar el código Inspeccionar Elemento para habilitar el Inspector Web en Safari
  • Pulsa Return para ejecutar el comando.
  • Ahora puedes abrir una página web en Safari y hacer clic derecho o mantener presionado el botón del mouse en cualquier lugar de la página hasta que aparezca el menú contextual.
  • Ahí, haz clic en la opción Inspeccionar elemento para ver los códigos CSS y HTML subyacentes del sitio web.

Safari Web Inspector: Las palabras finales

Así que estos son los métodos para habilitar el Inspector Web en Safari sin esfuerzo. Puedes seguir los pasos por tu cuenta y comenzar con el desarrollo o la creación de contenido en unos minutos. Aprendiste los métodos para activar el Inspector Elemento en Safari tanto para nuevas ediciones de macOS como para versiones heredadas. Si me he perdido algún método para obtener y usar el Inspector Web, no dudes en hacérmelo saber dejando un comentario a continuación.

A continuación, los mejores aplicaciones de codificación para iPad.

Dejar un comentario

Pasos para Ejecutar macOS en una PC con Windows

Pasos para Ejecutar macOS en una PC con Windows

Descubre cómo obtener macOS en una PC con Windows con una guía paso a paso que muestra exactamente cómo obtener el sistema operativo de Apple en un dispositivo Microsoft.

Windows 11 vs. MacOS – Cinco Diferencias Clave

Windows 11 vs. MacOS – Cinco Diferencias Clave

Windows 11 vs. MacOS – Descubre algunas de las diferencias clave entre estos sistemas operativos para ayudarte a elegir tu dispositivo.

MacOS: Habilitar el Inspector Web en Safari

MacOS: Habilitar el Inspector Web en Safari

Aprenda aquí cómo ver el código fuente de una página web en Apple Safari utilizando la herramienta Safari Web Inspector.

Revisión de Parallels Toolbox: Optimice rápidamente su Mac

Revisión de Parallels Toolbox: Optimice rápidamente su Mac

Aquí hay una revisión detallada de Parallels Toolbox para Mac, que optimiza magníficamente su Mac para mejorar la productividad y el rendimiento.

Cómo convertir PDF a JPG en una Mac

Cómo convertir PDF a JPG en una Mac

Convertir archivos PDF a JPG ya no es una tarea complicada. ¿Se pregunta cómo convertir PDF a JPG en Mac? Analicemos algunas maneras sencillas y efectivas para hacerlo.

MacOS: habilitar el inspector web en Safari

MacOS: habilitar el inspector web en Safari

Cómo ver el código fuente en una página web en Apple Safari utilizando la herramienta Web Inspector. Habilita el Inspector Web en Safari y mejora tu experiencia de desarrollo.

Outlook no se abre en modo seguro: 5 correcciones principales

Outlook no se abre en modo seguro: 5 correcciones principales

¿Quiere abrir Outlook en modo seguro pero no puede? Descubra cómo solucionar el problema "Outlook no se abre en modo seguro".

MacOS Sonoma vs macOS Ventura: ¿Cuál es la diferencia?

MacOS Sonoma vs macOS Ventura: ¿Cuál es la diferencia?

En caso de que planee actualizar a macOS Sonoma, aquí le explicamos en qué se diferencia de macOS Ventura en términos de funciones.

MacOS: Cómo configurar la variable de entorno

MacOS: Cómo configurar la variable de entorno

En Mac, las variables ambientales almacenan información, como quién es el usuario actual, rutas predeterminadas a los comandos y el nombre de la computadora host. Si usted

Outlook 365 Falta el menú Inicio: 6 mejores soluciones

Outlook 365 Falta el menú Inicio: 6 mejores soluciones

Si falta el botón Inicio en Outlook, deshabilite y habilite Home Mail en la cinta. Esta rápida solución ayudó a muchos usuarios.