Cómo hacerlo

Cómo usar Web Inspector para depurar Safari móvil (iPhone o iPad)

Cómo usar Web Inspector para depurar Safari móvil (iPhone o iPad)

Desarrollar páginas web para dispositivos móviles o depurar su aplicación híbrida a menudo es difícil. Pero afortunadamente para las personas que diseñan en iOS, comenzando con iOS 6, Apple ofrece una función de inspector web remoto en iOS.

Web Inspector permite a los desarrolladores de aplicaciones web y móviles usar MacOS y OS X Safari Developer Tools para depurar de forma remota contenido web o aplicaciones híbridas en Safari móvil en 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, habilite el menú Desarrollar en las preferencias avanzadas de Safari de su Mac.

Consejos rápidos

Siga estos consejos rápidos para que el inspector web funcione y pueda depurar su sitio o aplicación para Safari

  • Restablezca su configuración de ubicación y privacidad en su iPhone, iPad o iPod touch. Vaya a Configuración> General> Restablecer> Restablecer ubicación y privacidad
  • Asegúrese de iniciar sesión en la misma ID de Apple en la computadora que su iPhone, iPad o iPod touch
  • Active la sincronización de Safari iCloud tanto para la computadora como para cualquier iPhone, iPad o iPod touch
  • En el iPhone o iPad, vaya a Configuración> Safari> Avanzado y active el Inspector web
  • En la computadora, abra Safari y vaya al menú Safari> Preferencias> Avanzado y marque Mostrar menú Desarrollar en la barra de menú

Computadora Mac requerida

Lo siento amigos de Windows, pero el Inspector web de Safari solo es compatible con Mac.

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

Asegúrese de que tanto su iDevice como su Mac hayan iniciado sesión con la misma ID de Apple y que active ON Safari en iCloud.

Para su iDevice: Configuración> Perfil de ID de Apple> iCloud> Safari > activado

Para su Mac: Menú Apple> Preferencias del sistema> ID de Apple o iCloud> Safari> Marca de verificación

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

Asegúrese de que Safari en su Mac tenga la misma versión que Safari en su iDevice. Es posible que deba actualizar su versión de iOS o su versión de Safari que se ejecuta en su Mac.

Restablece tu ubicación y configuración de privacidad

  1. Vaya a Configuración> General
  2. Selecciona Restablecer
  3. Elija Restablecer ubicación y privacidad

Pro Keyboard ShortCut Tip en Mac para desarrolladores web

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

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

Utilice Web Inspector para depurar Safari móvil

1. En su iPad, iPhone o iPod touch, toque Configuración> Safari> Avanzado y active el Inspector web. Y habilite JavaScript si aún no está activado

2. En su Mac, inicie Safari y vaya al menú Safari> Preferencias> Avanzado y luego marque » Mostrar menú de Desarrollo en la barra de menú » si aún no lo ha hecho.

3. Conecte su dispositivo iOS a su Mac con el cable USB. Esto es crítico: debe conectar los dispositivos manualmente, utilizando un cable. ¡No funciona a través de WiFi!

4. Ahora en su iPad, abra el sitio web que desea depurar, luego, en su Mac, abra Safari y vaya al menú » Desarrollar «. Ahora verá su iDevice que conectó con su Mac. Si no tiene ninguna página abierta en su iDevice, verá un mensaje que dice «No hay aplicaciones inspeccionables».

5. Ahora depure la página que está abierta en Safari móvil como lo haría en Mac, inspeccione elementos DOM, modifique CSS, mida el rendimiento de la página y ejecute comandos Javascript.

Use la herramienta de depuración para ayudarlo a encontrar la causa de cualquier error de JavaScript en su página web. Puede agregar 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á los detalles de cada error en el depurador.

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

  • Borra tu caché y cookies de Safari
  • Actualice Safari en su Mac e iDevice si hay una actualización disponible
    • Si ejecuta una versión beta de iOS o macOS, es posible que deba ejecutar la última versión beta en todos los dispositivos
  • Pruebe con otro cable y / o puerto en su Mac. Asegúrese de que el cable sea un cable de iluminación Apple genuino o MFI Certified (Hecho para iPhone)
  • Verifique que Web Inspector esté activado. Las actualizaciones de iOS a veces cambian esto a la configuración de apagado predeterminada. Así que asegúrese de verificar Configuración> Safari> Avanzado> Inspector web
    • Intente desactivar Web Inspector, espere 10 segundos y vuelva a activar
  • Prueba el navegador Safari Technology Preview
  • Salga de Safari en su Mac y reinícielo. Comprueba si el Safari de tu Mac reconoce tu dispositivo y permite la depuración
  • Compruebe que no está utilizando el modo de navegación privada de Safari si su dispositivo solo aparece brevemente en el menú Desarrollar de Safari y luego desaparece
  • Abra el Monitor de actividad y compruebe lo que sucede con Safari.

Consejos para lectores

  • Si está utilizando un dispositivo antiguo con iOS 6 o anterior, ¡el navegador web Safari de su dispositivo tiene su propia consola de depuración incorporada! Simplemente acceda a la consola de depuración de Safari yendo a Configuración > Safari > Desarrollador > Consola de depuración

Deja un comentario