Cómo utilizar 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 móviles y web utilizar macOS y OS X Safari Developer Tools para depurar de forma remota el contenido web o las 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

• Restablece tu ubicación y configuración de privacidad en tu iPhone, iPad o iPod touch. Ir a Configuración> General> Restablecer> Restablecer ubicación y privacidad
• Asegúrese de iniciar sesión con el mismo ID de Apple en la computadora que su iPhone, iPad o iPod touch
• Active la sincronización de Safari iCloud tanto en la computadora como en cualquier iPhone, iPad o iPod touch
• En el iPhone o iPad, vaya a Configuración> Safari> Avanzado y activar Inspector web
• En la computadora, abra Safari y vaya a la Menú Safari> Preferencias> Avanzado y marca de verificación Mostrar el menú Desarrollar en la barra de menús

Artículos relacionados

• Ver el código fuente HTML de la página web en iPad o iPhone. ¡No se requiere aplicación!
• Cómo ver el código fuente HTML en Safari
• Cómo ver favicons en Safari para iPhone y Mac

Requiere computadora Mac

Lo sentimos, amigos de Windows, ¡pero el inspector web de Safari solo es compatible con Mac!

¡Utilice la misma ID de Apple y iCloud Sync!

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

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

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

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

Asegúrese de que Safari en su Mac sea 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. Ir a Configuración> General
2. Seleccione Reiniciar
3. Elegir Restablecer ubicación y privacidad

Sugerencia de método abreviado de teclado profesional 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.

Utilice Web Inspector para depurar Safari móvil

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

2. En tu Mac, inicia Safari y ve a Menú Safari> Preferencias> Avanzado Entonces revisa "Mostrar el menú Desarrollar en la barra de menús"Si aún no lo has hecho

3. Conecte su dispositivo iOS a su Mac con el cable USB. Esto es fundamental: debe conectar los dispositivos manualmente mediante 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 a "Desarrollar”Menú. 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, inspeccionar elementos DOM, modificar CSS, medir el rendimiento de la página y ejecutar comandos Javascript.

Utilice la herramienta de depuración para 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ú Desarrollar en Safari?

•  Borra las cookies y la caché 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úrate de eso El cable es un cable Lightning original de Apple o certificado por MFI (hecho para iPhone)
• Compruebe que Web Inspector esté activado. Las actualizaciones de iOS a veces cambian esto a la configuración predeterminada de APAGADO. Así que asegúrate de comprobar Configuración> Safari> Avanzado> Inspector web
  • Intente desactivar el Inspector web, espere 10 segundos y vuelva a activarlo
• Pruebe el navegador Safari Technology Preview en su lugar
• Salga de Safari en su Mac y reinícielo. Vea si Safari de su Mac reconoce su dispositivo y permite la depuración
• Compruebe que no está utilizando el modo de navegación privada de Safari iSi su iDevice solo aparece brevemente en el menú Desarrollar de Safari y luego desaparece
• Abre el Monitor de actividad y comprueba qué está pasando con Safari

Consejos para lectores 

• Si está utilizando un iDevice más 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 Ajustes > Safari > Desarrollador > Consola de depuración