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.



Leave a Comment

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.

Safari: habilitar / deshabilitar el bloqueador de elementos emergentes

Safari: habilitar / deshabilitar el bloqueador de elementos emergentes

Cómo habilitar o deshabilitar el bloqueador de ventanas emergentes en Apple Safari para Windows, OS X e iOS.

El icono de Safari no aparece en el iPhone o iPad

El icono de Safari no aparece en el iPhone o iPad

Resuelva un problema en el que faltaba el icono de Apple Safari en su dispositivo iOS.

Safari para iPhone y iPad: No se pudo abrir la página, demasiados redireccionamientos Solución

Safari para iPhone y iPad: No se pudo abrir la página, demasiados redireccionamientos Solución

Soluciona un error donde no se pudo abrir la página, demasiados redireccionamientos. aparece cuando navega por la web en su iPhone o iPad de Apple.

iPadOS: consejos y trucos que todo usuario de Safari debe conocer

iPadOS: consejos y trucos que todo usuario de Safari debe conocer

Al conocer los consejos y trucos que Safari tiene para ofrecer, sabrá cómo aprovechar al máximo el navegador. También tiene algunos consejos y trucos bajo la manga.

Cómo ver la versión de escritorio de Facebook en iPhone y iPad

Cómo ver la versión de escritorio de Facebook en iPhone y iPad

Cómo ver la versión completa de Facebook desde su iPhone u otro dispositivo Apple iOS.

Forzar la versión de escritorio de YouTube en Safari para iPhone y iPad

Forzar la versión de escritorio de YouTube en Safari para iPhone y iPad

Le mostramos cómo mostrar la versión de escritorio completa del sitio web de YouTube en Safari para iOS.

Cómo configurar la página de inicio en Chrome, Safari, Firefox, IE, Edge

Cómo configurar la página de inicio en Chrome, Safari, Firefox, IE, Edge

Su página de inicio es la página que se abre cuando hace clic en el botón de inicio en su navegador, generalmente parte de la barra de menú en la parte superior y en forma de un

Safari: elimina cookies, historial, contraseñas, etc.

Safari: elimina cookies, historial, contraseñas, etc.

Cómo eliminar cookies, historial o datos de contraseña del navegador web Apple Safari.

Atajo para aumentar / disminuir el tamaño de fuente en cualquier navegador

Atajo para aumentar / disminuir el tamaño de fuente en cualquier navegador

Cómo aumentar o disminuir rápidamente la fuente en cualquier navegador que se ejecute en Microsoft Windows, Linux o MacOS.

Cómo ver las contraseñas guardadas en Chrome, Opera, Edge y Firefox

Cómo ver las contraseñas guardadas en Chrome, Opera, Edge y Firefox

Guardar sus contraseñas en su navegador no es lo más seguro que puede hacer. Pero, algunos pueden hacerlo de todos modos, ya que las contraseñas que guardan son para cuentas basura o ¿Necesitas averiguar qué contraseña estás usando en esa vista? Le mostramos que tiene que ver las contraseñas que ha guardado su navegador.

Apple Safari: deshabilitar completamente la caché

Apple Safari: deshabilitar completamente la caché

Le mostramos cómo deshabilitar el almacenamiento en caché en el navegador web Apple Safari.

Cómo cambiar el agente de usuario en Safari

Cómo cambiar el agente de usuario en Safari

Instrucciones detalladas sobre cómo cambiar la cadena de agente de usuario en el navegador Apple Safari para MacOS.

Cómo aumentar el tamaño del texto en cualquier sitio web en iPad

Cómo aumentar el tamaño del texto en cualquier sitio web en iPad

Facilite la lectura en Safari y aumente el tamaño; así es cómo.

iPhone y iPad: configurar la página de inicio de Safari

iPhone y iPad: configurar la página de inicio de Safari

Cómo configurar la página de inicio de Safari en su iPhone o iPad de Apple.

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.