A continuación, una publicación invitada de Andi Dysart y Matthias Christen de Ghostlab. Quedé bastante impresionado cuando escuché que el Ghostlab 2 recién lanzado podía hacer esto. Creo que muchos de nosotros, los desarrolladores, usamos Chrome porque las DevTools son muy buenas, y seguro que podría usarlas en otros navegadores, incluso en dispositivos móviles. ¿Y por qué no? Chrome DevTools es parte de Blink, que es de código abierto, ¿verdad? Solo necesitábamos una herramienta para que esto sucediera.
Los navegadores de escritorio modernos ofrecen potentes herramientas de desarrollo integradas que le permiten llegar al fondo de los problemas de CSS o JavaScript rápidamente. Ya sea Chrome, Firefox, Internet Explorer o Safari, podrá inspeccionar el DOM, aplicar modificaciones CSS en tiempo real, navegar a través de archivos de script cargados, establecer puntos de interrupción para controlar manualmente el flujo de ejecución y rastrear cualquier excepción o inesperada. comportamiento a su causa.
Ahora bien, si bien eso es cierto para los navegadores de escritorio, es un poco más difícil cuando intenta identificar un problema en un navegador en un dispositivo móvil.
Opciones para la depuración web móvil
Echemos un vistazo a sus opciones para las herramientas de depuración móviles. Primero, describiremos cómo puede inspeccionar y depurar sitios web en Android e iOS utilizando el conjunto de herramientas respectivo de Google y Apple (hemos optado por limitarnos a estas plataformas en aras de la brevedad). Luego, presentaremos el enfoque de Ghostlab para la inspección y depuración remotas con la ayuda de un ejemplo simple.
Depuración mediante conjuntos de herramientas de proveedores
Las herramientas de desarrollo de Goggle le permiten inspeccionar cualquier página web que se ejecute en Chrome en Android conectando el dispositivo Android (solo 4.0 y más reciente) a su computadora a través de USB. En su computadora, también necesitará Chrome. Para configurar esto, habilite la depuración USB en el dispositivo, y en el Chrome de su computadora, busque `chrome: // inspect` para descubrir el dispositivo. Una vez que haya permitido el acceso al escritorio en el dispositivo, puede inspeccionar y depurar cualquier página web que se visualice en Chrome en el dispositivo.
Esto también es posible para iOS, de Safari a Safari. También necesita conectar su dispositivo a la computadora con USB. En la configuración avanzada de Safari en el dispositivo, habilite la opción “Inspector web”. Luego, abra Safari en su computadora y, en el menú “Desarrollador”, verá una lista de los dispositivos iOS actualmente conectados a su computadora por cable. Para cada dispositivo, podrá inspeccionar y depurar cualquier página web que se muestre en Safari.
Entonces, digamos que para dos plataformas populares, hay formas de inspeccionar su sitio web en el dispositivo, aunque con limitaciones. En Android, no funcionará por debajo de la versión 4.0. Además, solo puede inspeccionar las páginas que se ejecutan en Chrome; si tiene problemas en otro navegador móvil, eso no será suficiente. Esto es similar en iOS, donde solo puede inspeccionar Safari móvil. Y, por supuesto, necesitará una Mac para hacerlo.
Además de estas limitaciones, básicamente necesita un conjunto de herramientas separado para cada plataforma de destino: una para Safari en iOS y otra para Chrome en Android. Incluso si puede encontrar un conjunto de herramientas para cada una de sus plataformas, deberá configurarlas todas, averiguar cómo trabajar con ellas, y eso aún sin tener en cuenta que tendrá que conectar cada dispositivo a su computadora con un cable.
Otras opciones
La incorporación de herramientas de desarrollo para dispositivos móviles a los navegadores ha sido bastante reciente. Antes de eso, podía (y aún puede) usar weinre (“WEb INspector REmote”), un proyecto que gozó de gran popularidad para la depuración móvil. Para usar weinre, debe agregar un script a la página que desea depurar e iniciar el servidor weinre en la línea de comando. Desafortunadamente, weinre no admite algunas funciones de CSS como pseudo elementos, consultas de medios o reglas de importación, y no admite la depuración de JavaScript.
Ghostlab
Ghostlab (que se ejecuta tanto en Mac como en Windows) utiliza el proxy del sitio que desea probar (ya sea desde su sistema de archivos local o desde una URL remota) y permite que cualquier número de clientes (navegadores o dispositivos) se conecten al sitio al mismo tiempo. Luego, los mantendrá todos sincronizados, lo que significa que si usa su navegador de escritorio para hacer una prueba, todo lo que haga (desplazarse, hacer clic en enlaces, completar formularios, etc.) se replicará en todos los clientes conectados.
Además de las pruebas sincronizadas, Ghostlab se envía con DevTools de Google Chrome. Pero en lugar de simplemente incluirlos tal como están, hemos agregado ajustes considerables: además de la inspección regular de CSS, puede inspeccionar múltiples clientes sincrónicamente: cuando modifica los estilos DOM o CSS de cualquier manera, su cambio se replicará en todos clientes conectados. E incluso puede depurar JavaScript de forma remota en cualquier cliente conectado.
Ghostlab: inspección DOM remota
Una vez que tenga Ghostlab en ejecución y haya iniciado el servidor haciendo clic en el botón de reproducción, puede conectar su navegador predeterminado haciendo clic en el botón de cohete y los dispositivos móviles ingresando la URL del servidor de Ghostlab o usando el conveniente código de barras QR emergente.
Ahora que tiene varios clientes conectados, inspeccionémoslos. En cualquier cliente de la lista, puede iniciar la inspección haciendo clic en el icono del inspector (</>).
Cuando se inicia el inspector, verá las conocidas Chrome DevTools. Sin embargo, hay dos opciones que son diferentes: puede habilitar o deshabilitar la inspección sincronizada y habilitar o deshabilitar la depuración de JavaScript.
Comencemos con la inspección DOM. En la sección de elementos, seleccione cualquier elemento DOM en el que le gustaría realizar cambios y hágalo; por ejemplo, editar sus estilos CSS o modificar los atributos o textos de los nodos. Si tiene habilitada la inspección sincronizada, las modificaciones que realice se transmitirán a todos los clientes conectados; si la inspección sincronizada está deshabilitada, solo se aplicará al cliente que está inspeccionando actualmente.
Aquí hay una película que muestra cómo funciona eso:
Ghostlab: depuración remota de JavaScript
Para depurar JavaScript en cualquier cliente conectado, marque la casilla de verificación “Depurar JavaScript”. Esto hará que los clientes vuelvan a cargar el JavaScript de la página que están viendo actualmente. Ghostlab transcodifica el código del script para permitir la depuración remota. Dado que esto induce una penalización del rendimiento, no lo habilitamos de forma predeterminada, sino solo cuando lo requiera explícitamente.
Una vez que se ha cargado el JavaScript transcodificado, la depuración funciona como lo esperaría, incluida la evaluación del código JavaScript en la consola, la inspección y observación de variables, etc. Vaya a la guiones pestaña, elija el archivo de secuencia de comandos de su elección y establezca un punto de interrupción en la ubicación que le interesa. (Ghostlab no transcodifica todos los archivos; por el motivo de la penalización del rendimiento, mantiene una lista negra de secuencias de comandos, que de forma predeterminada incluye las principales bibliotecas de JavaScript. Si Ghostlab no le permite establecer un punto de interrupción, es probable que el archivo esté en la lista negra y deberá incluir en la lista blanca el archivo que le interesa en las preferencias de Ghostlab).
En el ejemplo simple, tenemos dos botones, uno de los cuales activará el cambio de color de cuatro celdas de la tabla y otro provocará un error al intentar realizar la misma tarea.
Vea el Pen yymJWG de Vanamco (@vanamco) en CodePen.
Conclusión
Aunque parte del dolor de la depuración móvil ha desaparecido con las herramientas específicas del navegador, todavía existen limitaciones y requiere configuración. Con Ghostlab, no se requiere una configuración especial y es fácil comenzar.