Home
» MacOS
»
MacOS: Habilitar el Inspector Web en Safari
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.
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.
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.
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.
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.
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.
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.
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.
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á.
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.
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:
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.