Cómo depurar una página web en el iPhone sin un Mac

Empieza por el diagnóstico: el análisis automático

Antes de hurgar en el DOM, deja que el análisis automático te cuente lo evidente: el diagnóstico de OpenHTML enumera los archivos que faltan y que la página referencia, los recursos remotos bloqueados por el ajuste de privacidad predeterminado, los errores de JavaScript en tiempo de ejecución y los problemas de codificación, cada uno con una solución de un toque cuando la hay (permitir red, activar JS, cambiar al servidor local).

En la práctica, esto resuelve en segundos la mayoría de los casos de «por qué está en blanco / sin estilos / a medias», sobre todo con páginas generadas por IA que referencian archivos que nunca llegaron a crearse.

Consola: lo que dice la página

La consola captura en directo la salida de log, warn y error del JavaScript de la página. Las excepciones no capturadas aparecen aquí con su mensaje: suele ser la pista más rápida cuando la interactividad deja de funcionar.

Inspector de elementos: el DOM, en el dispositivo (Pro)

• Toca cualquier elemento para ver su etiqueta, sus atributos y sus estilos calculados.
• Edita los atributos sobre la marcha para comprobar una hipótesis: ¿se arregla el diseño si quitas esa clase?
• Salta de un elemento inspeccionado directamente a su línea en la vista de código fuente.

Panel de red: cada solicitud, con sus tiempos (Pro)

Observa el tráfico fetch, XHR y WebSocket con sus URL, códigos de estado, tamaños y tiempos: el equivalente en el dispositivo de la pestaña de red. Exporta la sesión entera como archivo HAR para analizarla después en las DevTools de escritorio, en Charles o en Proxyman.

Recuerda el ajuste de privacidad predeterminado: una página no puede acceder a la red hasta que lo permitas documento a documento, así que un panel de red vacío puede significar simplemente que la página se mantiene sin conexión; el diagnóstico te lo dirá.

Reproduce las condiciones reales

• El modo servidor local (Pro) sirve los proyectos en 127.0.0.1 para que fetch(), los módulos ES y la carga de JSON se comporten como en producción: imprescindible para los proyectos web en ZIP.
• Los preajustes de viewport (Pro) muestran la página con anchos de teléfono, tablet y escritorio para destapar fallos del diseño adaptable.
• Solicitar sitio para ordenador (Pro) carga el diseño de escritorio cuando una página se adapta con demasiada agresividad al móvil.

Una sesión real

1. Importas la página o el proyecto; el diagnóstico señala una hoja de estilos de CDN bloqueada y un error en la consola.
2. Permites la red para ese documento → llegan los estilos, pero el error sigue ahí.
3. La consola muestra una variable indefinida en app.js y la vista de código fuente salta a esa línea.
4. Confirmas la solución editando el atributo del DOM en el inspector; luego corriges el archivo como es debido en tu escritorio y lo vuelves a importar para comprobarlo.