1 – Introducción
JavaScript es un lenguaje interpretado por los navegadores. Muchas veces, nuestro código requiere que los elementos de la página se rendericen, por lo que es muy importante tener herramientas con las que depurarlo. Estas herramientas se han ido incluyendo en los diferentes navegadores con el paso del tiempo. Cada vez nos ofrecen más funcionalidades con las que comprobar el buen desempeño de nuestras aplicaciones.
Sin embargo, el uso de estas herramientas puede resultar poco intuitivo o incluso imposible para gente que trabaja con lectores de pantalla. Por suerte, las empresas prestan cada vez más atención al ámbito de la accesibilidad. En este tutorial, vamos a ver cómo trabajar con el depurador del nuevo Edge basado en Chromium. No cabe duda de que la adhesión de Microsoft a este proyecto open source ha traído un montón de alegrías para los usuarios que encontramos barreras en diferentes ámbitos. Las herramientas de desarrollador son sólo uno más.
2 – Entorno de trabajo
- Windows 10 versión 1909
- SlimBook Pro X (Intel I7, 32GB RAM)
- Microsoft Edge 81.0
3 – Contenido para depurar
Puesto que los sitios web en producción suelen utilizar código minimizado y ofuscado, recomiendo utilizar alguna aplicación propia que contenga JavaScript. Si no tenéis ninguna a mano, podéis usar ChessBoard, un ejemplo de tablero de ajedrez accesible que hice para otro tutorial. Esta aplicación está escrita en TypeScript con el framework Stencil JS. Está basada en web components. Una vez arranquemos el servidor, todo el código se transpila a JavaScript. Por supuesto, es necesario tener NodeJS y npm instalados. Ejecutaremos los siguientes comandos:
Npm install
Npm start
4 – Depurar el código
Para empezar, pulsamos F12 para abrir las herramientas de desarrollo en Edge. Podemos alternar entre este panel y la página mediante la navegación por partes con F6 y Shift+F6. Este panel tiene cinco pestañas:
- Elementos
- Consola
- Orígenes
- Red
- Rendimiento
A nosotros nos interesa la pestaña orígenes (sources si lo tienes configurado en inglés). Esta se divide en cuatro áreas que encontraremos con el lector de pantalla en el siguiente orden:
- Selector de recursos: Muestra los recursos de la aplicación.
- Ventana de depuración: Muestra el código de los recursos, y permite modificarlo y establecer puntos de interrupción
- Barra de herramientas: Contiene controles para establecer puntos de interrupción y manejar el flujo de la ejecución.
- Panel de detalles: Muestra la pila de llamadas y los puntos de interrupción actuales.
- Panel de observación: Muestra el estado de las variables.
4.1 – Explorar el código
El selector de recursos muestra los archivos de código que ha cargado nuestra aplicación. Para abrir uno, pulsamos enter sobre él. El código se mostrará en la ventana de depuración, y podremos explorarlo y editarlo.
Una opción interesante en el selector es marcar algunos archivos como librería con Control+L. Esto hace que las llamadas a funciones de esos recursos no aparezcan en la pila y tengamos trazas de ejecución más limpias para buscar nuestros errores.
También podemos buscar partes concretas de nuestro código. Al pulsar Control+Shift+F, nos situaremos en el campo de búsqueda. Podemos introducir cadenas simples o expresiones regulares. Al pulsar enter, el buscador nos informará del número de resultados encontrados. Podemos tabular hasta el panel de resultados, donde veremos el recurso y la línea en la que se encontró cada uno de ellos. Si pulsamos enter, nos llevará hasta ese punto del código.
Los cambios que hagamos en los archivos pueden ser guardados para comprobar el efecto de algunos cambios en la próxima ejecución. Para ello, pulsamos Control+S. El archivo pasará a estar marcado con un asterisco (*).
4.2 – Puntos de interrupción
Los puntos de interrupción o breakpoints permiten interrumpir la ejecución del código en un momento concreto. Podemos asociar el punto con líneas de código concretas, pero también podemos hacerlo con excepciones, eventos, etc. Esto nos puede ayudar a comprobar el estado de alguna variable en ese instante o a realizar una ejecución paso a paso de las sentencias posteriores para ver qué bifurcaciones toma la aplicación.
Podemos establecer distintos tipos de puntos de interrupción. Cada uno de ellos detiene la ejecución del código ante diferentes sucesos. Cuando el código llega a uno de estos puntos, el foco es desplazado a la ventana de depuración, a la línea de código donde se ha interrumpido.
4.2.1 – Breakpoint
Podemos insertar un punto de interrupción antes de que se ejecute una sentencia. Para ello, en la ventana de depuración, nos desplazamos dentro del código del recurso hasta el lugar donde queremos introducirlo. Pulsamos Control+Shift+B. El punto de ruptura aparecerá listado en el panel de detalles.
Si queremos eliminar un breakpoint, podemos hacerlo mediante un menú contextual en el panel de detalle o pulsando F9 en la ventana de depuración. También podemos desactivarlo desde el panel de detalle o con la combinación Control+F9 desde la ventana de depuración.
4.2.2 – Breakpoint condicional
Los puntos de interrupción condicionales sólo detienen la ejecución del código si se cumple una determinada condición. Para insertarlos, nos situamos en la sentencia que queremos dentro de la ventana de depuración y pulsamos Alt+F9.
Nota: Este atajo de teclado parece que no funciona. Se reportará para que puedan corregirlo.
4.2.3 – Breakpoints en excepciones
Podemos hacer que se interrumpa la ejecución del código cuando se produzca una excepción. Por defecto, esto está deshabilitado y sólo se registra por consola. Para habilitar este comportamiento, podemos activarlo desde la barra de herramientas o con el atajo Control+Shilft+E.
Nota: El atajo de teclado no funciona. Será reportado para que puedan corregirlo.
Breakpoint en peticiones
Podemos hacer que la ejecución del código se interrumpa cuando haya una petición a algún servidor. Para ello, en el panel de detalles, abrimos el desplegable para estos breakpoints. Podemos marcar la casilla para capturar todas las peticiones o elegir una en concreto mediante el menú contextual.
4.2.4 – Breakpoints en eventos
Podemos detener la ejecución del código cuando se produzca un determinado tipo de evento. Esto se hace desde el panel de detalles, aunque los botones para hacerlo no son accesibles. Se reportará para que se corrija el problema.
4.2.5 – Breakpoints del DOM
Por último, podemos interrumpir la ejecución del código cuando se produce un cambio en un elemento del DOM. Esto es útil cuando queremos comprobar cómo mutan nuestros elementos. Para ello, vamos a la pestaña elementos de las herramientas de desarrollador. En el árbol del DOM, nos desplazamos hasta el elemento que deseemos. Abrimos el menú contextual y elegimos una de las opciones del submenú interrumpir. Podemos hacerlo cuando cambien los atributos, cuando cambie el subárbol del elemento o cuando el elemento sea eliminado.
4.3 – Manejo del flujo de ejecución
Una vez tenemos la ejecución de nuestro código detenida en un punto de interrupción, podemos manejar el flujo de ejecución mediante atajos de teclado desde la ventana de depuración:
- Continue (F8): Prosigue la ejecución del código hasta el siguiente breakpoint.
- Step into (F11): Ejecuta la siguiente sentencia entrando en una función, si la hay.
- Step over (F10): Ejecuta la siguiente sentencia sin entrar en una función.
- Step out (Shift+F11): Sale de la función actual y prosigue en la función que la había llamado.
De esta forma podemos comprobar qué bifurcaciones toma nuestro código y cuál es el estado de las variables en cada paso. También podemos aplicar estas acciones desde los controles de la barra de herramientas.
4.4 – Observar variables
Podemos ver el estado de las variables en el panel de observación. Aquí aparecen tanto las variables locales de la función, como variables relacionadas al contexto, como los atributos de la clase, y globales. Podemos modificar el valor de una variable pulsando enter sobre ella. Así podemos comprobar qué comportamiento tiene la función ante diferentes valores.
4.5 – Pila de llamadas
Podemos ver la pila de llamadas de funciones en el panel de detalles. La función actual aparece en primer lugar, y podemos ir examinando las diferentes funciones llamadoras según descendemos por la lista.
5 – Conclusiones
Como hemos visto, podemos utilizar bastantes de las funciones del depurador de Edge con un lector de pantalla. Todavía falta que algunas se hagan accesibles y que se mejore la experiencia de usuario en general. Sin embargo, seguro que es una gran ayuda para todos esos desarrolladores con algún tipo de deficiencia visual.
Procuraré reportar los problemas más graves de accesibilidad que he ido encontrando durante la redacción de este tutorial. Podéis encontrar información más completa en la documentación de Microsoft sobre el depurador.
