Cómo usar el inspector web para depurar el Safari móvil (iPhone o iPad)

El desarrollo de páginas web para dispositivos móviles o la depuración de su aplicación híbrida es a menudo difícil. Pero por suerte para la gente que diseña en el iOS, desde hace mucho tiempo con el iOS 6, Apple ofrece una función de inspección web remota en el iOS.

El Inspector Web permite a los desarrolladores de aplicaciones web y móviles utilizar las herramientas de desarrollo de MacOS y OS XSafari para depurar remotamente el contenido web o las aplicaciones híbridas en Safari móvil en el iPad o iPhone.

Es una forma fácil y práctica de depurar, optimizar y modificar sus páginas web o aplicaciones híbridas en iOS.

Para acceder a estas herramientas de desarrollo, habilita el menú Desarrollo en las preferencias avanzadas de Safaris para tu Mac.

Consejos rápidos

Sigue estos consejos rápidos para que el inspector web funcione y así puedas depurar tu sitio o aplicación para Safari

  • Restablece la ubicación y la configuración de privacidad de tu iPhone, iPad o iPod touch. Ir a Settings gt; General gt; Reset gt; Reset Location amp; Privacy
  • Asegúrate de firmar en el mismo ID de Apple en el ordenador que tu iPhone, iPad o iPod touch
  • Activar la sincronización de Safari iCloud tanto para el ordenador como para cualquier iPhone, iPad o iPod touch
  • En el iPhone o el iPad, vaya a Ajustes; Safari; Avanzado y active Inspector de la Web
  • En la computadora, abre Safari y ve al menú de Safari; Preferencias; Avanzado y marca de verificación Mostrar el menú Desarrollo en la barra de menú

Artículos relacionados

Se requiere una computadora Mac

Lo siento amigos de Windows, pero el Inspector Web de Safaris sólo es compatible con Macs!

/* Añade tus propias anulaciones de estilo de formulario de Mailchimp en la hoja de estilo de tu sitio o en este bloque de estilo. Recomendamos que mueva este bloque y el enlace CSS anterior al encabezado de su archivo HTML. */

¡Utiliza el mismo ID de Apple y la sincronización de iCloud!

Asegúrate de que tanto tu iDevice como tu Mac estén firmados con el mismo ID de Apple y que actives Safari en iCloud.

Para su dispositivo de identificación: Settings gt; Apple ID Profile gt; iCloud gt; Safari gt; toggled ON

Para tu Mac: Menú Apple; Preferencias del sistema; ID de Apple o iCloud; Safari; Marcado

Y comprueba que Safari es la misma versión también

Asegúrate de que Safari en tu Mac es la misma versión que Safari en tu iDevice. Es posible que tengas que actualizar tu versión de iOS o la versión de Safari que se ejecuta en tu Mac.

Restablecer la ubicación y la configuración de privacidad

  1. Ir a Ajustes; General
  2. Seleccionar Resetear
  3. Elija Reajustar ubicación y lámpara; Privacidad

Consejo sobre el atajo de teclado profesional en Mac para dispositivos web

Si presionas CTRL+Comando+R en Safari, puedes ver cómo se vería un sitio web en un dispositivo en particular seleccionando el dispositivo.

Conmuta el atajo de teclado para salir de la vista de desarrollo web.

Usar el Web Inspector para depurar el Safari móvil

1. En tu iPad, iPhone o iPod touch, toca Ajustes gt; Safari gt; Avanzado y activa Inspector Web. y habilita JavaScript si no está ya en

2. En tu Mac, inicia Safari y ve al menú de Safari ; Preferencias; Avanzado y luego marca ” Mostrar menú de Desarrollo en la barra de menú – si no lo has hecho ya

3. Conecta tu dispositivo iOS a tu Mac con el cable USB. Esto es fundamental: debes conectar los dispositivos manualmente, utilizando un cable. No funciona vía WiFi!

4. Ahora, en tu iPad, abre el sitio web que quieres depurar, luego, en tu Mac, abre Safari y ve al menú ” Develop “. Ahora verás el iDevice que conectaste con tu Mac. Si no tienes ninguna página abierta en tu iDevice, aparece un mensaje que dice “No hay aplicaciones inspeccionables”

5. Ahora depura la página que está abierta en el Safari móvil como lo harías en Mac, inspecciona los elementos DOM, modifica el CSS, mide el rendimiento de la página y ejecuta los comandos de Javascript.

Utiliza la herramienta de depuración para ayudarte a encontrar la causa de cualquier error de JavaScript en tu página web. Puedes añadir puntos de interrupción, depurar el javascript e inspeccionar el valor de las variables en tiempo de ejecución.

Safari también debería detectar cualquier error de CSS, HTML y JavaScript. Y verás los detalles de cada error en el depurador.

¿No aparece iDevice en el menú de desarrollo de Safari?

  • Limpia tu caché de Safari y las cookies
  • Actualiza Safari en tu Mac e iDevice si hay una actualización disponible
    • Si ejecuta una versión beta de iOS o macOS, es posible que necesite ejecutar la última versión beta en todos los dispositivos
  • Intenta con otro cable y/o puerto en tu Mac. Asegúrate de que el cable es genuino de Apple o con certificación MFI (Made for iPhone)
  • Comprueba que el Inspector Web está activado. Las actualizaciones de iOS a veces lo vuelven a desactivar por defecto. Así que asegúrate de comprobar los ajustes de ; Safari; Advanced; Web Inspector
    • Intenta apagar el Inspector Web, espera 10 segundos y vuelve a encenderlo
  • En su lugar, el navegador TrySafari Technology Preview
  • Deja Safari en tu Mac y reinícialo. Mira si el Safari de tu Mac reconoce tu dispositivo y permite la depuración
  • Comprueba que no estás usando el modo de navegación privada de Safaris si tu iDevice sólo aparece brevemente en el menú Desarrollo de Safaris y luego desaparece
  • Abre el Monitor de Actividad y comprueba qué pasa con Safari

Consejos para el lector

  • Si estás usando un iDevice antiguo con iOS 6 o anterior, el navegador web Safari de tu dispositivo tiene su propia Consola de Depuración incorporada! Sólo tienes que acceder a la Consola de Depuración de Safaris yendo a Settings
Cómo usar el inspector web para depurar el Safari móvil (iPhone o iPad)
Scroll hacia arriba