¿Cómo depuro Safari en iOS?
Estos son mis pasos generales, comenzando ni siquiera con iOS Safari.
1. ¿Es solo un problema de pantalla pequeña?
Déjame usar el modo de dispositivo en Chrome rápido.
Tenga en cuenta que esto hace algo más que mostrar su sitio en un área más pequeña: envía la Cadena de Agente de Usuario y las Sugerencias de Cliente correctas para ese dispositivo.
2. ¿Parece realmente específico de Safari? Primero, déjame comprobar Desktop Safari, ya que está a solo unos clics de distancia.
Ahora estás usando Safari, que está mucho más cerca de iOS Safari que de Chrome de escritorio.
3. ¿Problema no se muestra aquí? Entonces, el problema es exclusivo de iOS Safari. Prueba la emulación.
Resulta que tengo una Mac, por lo que puedo tener XCode instalado y, por lo tanto, tener un simulador de iOS que es bastante fácil de abrir. Y si puede ejecutar el simulador de iOS, eso significa que también puede ejecutar Safari en el escritorio y, por lo tanto, incluso tener acceso a DevTools que puede acceder al simulador.
4. He visto errores reales solo en dispositivos. A veces necesitas un dispositivo real.
Si tiene una Mac, hacer esto es bastante similar a lo que acabamos de hacer. Debe tener el teléfono enchufado a través de USB (sin conexión de carga inalámbrica o lo que sea) y luego verá el dispositivo en ese mismo menú Desarrollar. Seleccione el dispositivo real (que debe tener Safari abierto en algún sitio web) y obtendrá una instancia de DevTools de ese sitio web.
5. ¿No tienes Mac? Utilice un emulador en línea.
He oído hablar de personas que han acudido a Best Buy o una Apple Store para depurar rápidamente algo en una máquina de visualización. Pero eso, uhhhh, no es muy práctico. Puede usar algo como CrossBrowserTesting para hacer esto directamente en la web.
Incluso conectan Chrome DevTools allí de alguna manera. Acabo de hacer algunas pruebas y encontré que Chrome DevTools era un poco complicado de usar (un panel izquierdo gigante se representa, la función de elemento de clic para seleccionar no funcionaba y seguía perdiendo la conexión WebSocket). Pero bueno, es genial que sea posible.
6. ¿No tienes Mac y aún necesitas probar en un dispositivo real?
No pensé que esto fuera realmente posible, pero luego vi Inspeccionar. (Esto no es un anuncio, solo lo estoy gritando como una herramienta genial). Con Inspect, puedo conectar mi dispositivo iOS real a través de USB y obtener una instancia de Chrome DevTools para él.
Recuerde cambiar esta configuración de iOS Safari (avanzada) para que funcione con Inspeccionar (y probablemente la depuración “normal” de Safari descrita anteriormente).
Estoy ejecutando Inspect en mi Mac allí. Supongo que la única razón real por la que haría eso es para usar Chrome DevTools en lugar de Safari DevTools (que, juego limpio, podría). Y parece que pronto habrá más razones. Por ejemplo, incluirá React, Vue y Angular DevTools para que incluso las tenga para pruebas en el dispositivo, además de pruebas de Wi-Fi, lo que significa que no tiene que conectarse en absoluto.
Pero siento que la verdadera característica del embrague aquí es que se ejecuta en Windows. Entonces, ahora hay una respuesta realmente clara para los desarrolladores web en Windows que necesitan probar en un dispositivo iOS real.