Depuración de iOS Safari

¿Cómo depuro Safari en iOS?

Estos son mis pasos generales, comenzando por ni siquiera usar iOS Safari.

1. ¿Es esto sólo un problema de pantalla pequeña?

Déjame usar el modo de dispositivo en Chrome rápidamente.

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? Déjame comprobar Desktop Safari primero, ya que está a solo unos clics de distancia.

Ahora estás usando Safari, que estás mucho más cerca de iOS Safari que Chrome de escritorio.

3. ¿El problema no se muestra aquí? Entonces el problema es exclusivo de iOS Safari. Prueba la emulación.

Resulta que tengo una Mac, así que puedo tener XCode instalado y así tener un simulador de iOS que es bastante fácil de abrir. Y si puedes ejecutar el simulador de iOS, eso significa que también puedes ejecutar Safari de escritorio y, por lo tanto, incluso tener acceso a DevTools que pueden acceder al simulador.

4. He visto errores que afectan únicamente a dispositivos reales. A veces necesitas un dispositivo real.

Si tienes una Mac, hacer esto es bastante similar a lo que acabamos de hacer. Debes tener el teléfono conectado mediante USB (sin conexión de carga inalámbrica o lo que sea) y luego verás el dispositivo en el mismo menú Desarrollar. Seleccione el dispositivo real (que debe tener Safari abierto en algún sitio web) y obtenga una instancia de DevTools de ese sitio web.

5. ¿Sin Mac? Utilice un emulador en línea.

He oído hablar de personas que van corriendo a Best Buy o Apple Store para depurar rápidamente algo en una máquina con pantalla. Pero eso, uhhhh, no es muy práctico. Puedes usar algo como CrossBrowserTesting para hacer esto directamente en la web.

Incluso incorporan Chrome DevTools allí de alguna manera. Acabo de hacer algunas pruebas y descubrí que Chrome DevTools es un poco complicado de usar (se muestra un panel izquierdo gigante, la función de hacer clic para seleccionar un elemento no funcionó y siguió perdiendo la conexión WebSocket). Pero bueno, es genial que sea posible.

6. ¿No tienes Mac y aún necesitas realizar la prueba en un dispositivo real?

No pensé que esto fuera realmente posible, pero luego vi Inspeccionar. (Esto no es un anuncio, solo lo digo 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.

Estoy ejecutando Inspect en mi Mac allí. Supongo que la única razón real por la que haría eso es usar Chrome DevTools en lugar de Safari DevTools (lo cual, en juego limpio, podría hacerlo). Y parece que pronto habrá más razones. Por ejemplo, incluye React, Vue y Angular DevTools para que incluso los tengas que probar en el dispositivo, además de pruebas de Wi-Fi, lo que significa que no tienes que conectarte en absoluto.

Pero siento que la verdadera característica clave aquí es que se ejecuta en Windows . Ahora hay una respuesta realmente clara para los desarrolladores web en Windows que necesitan realizar pruebas en un dispositivo iOS real.