Bit - loader

La depuración de JavaScript en navegadores (II)

   Artículo | JavaScript Development Bit - La depuración de JavaScript en navegadores (II)
Marino Posadas | 05/09/16

En la entrada anterior vimos algunos aspectos de depuración ligados a los navegadores. Continuamos aquí, viendo otras ventajas de interés para el desarrollador en relación con la depuración, especialmente, de JavaScript.

 

Javascript-ii

 

La depuración de JavaScript

Por supuesto, la depuración de JavaScript en las herramientas F12 no se limita a los DOM BreakPoints, sino que más bien empieza. Podemos situar puntos de ruptura en el código JavaScript, exactamente igual que en cualquier otro IDE, pero algunos avances son muy interesantes, como el que posibilita depurar hebras de ejecución.

Cuando creamos un Web Worker, el constructor del objeto Worker recibe como argumento una cadena que contiene la URL de un archivo JavaScript cuyo contenido es asociado a una nueva hebra de ejecución. Nos interesa, entonces poder depurar esa hebra al igual que lo hacemos con la hebra principal (la de la interfaz de usuario).

Supongamos este código sencillo:

 

JavaScript1

 

Se supone que está incluido en una etiqueta <script> dentro de la página activa (hebra principal). Pero, el creador del Worker carga el archivo “tarea.js“, que contiene el siguiente código:

 

JavaScript2

 

Resulta trivial poner un punto de ruptura en la hebra principal, pero también podemos hacerlo en el código de “tarea.js“, y comprobar cuál es el dato que le llega de la hebra principal. En este caso, vamos a usar Microsoft Edge para comprobarlo en la pestaña “Depuración“:

 

Depuración de javascript

 

La figura muestra cómo disponemos de un entorno de depuración completo, con las opciones típicas: Paso a paso por Instrucciones (F11), Paso a Paso por Procedimientos (F10), Paso a Paso para Salir (May.+F11), e incluso una especial, Interrumpir en Nuevo Trabajador (CTL+MAY+W), especialmente dedicado a la depuración de Workers (trabajadores en la traducción española de Edge).

También podemos comprobar el estado de la pila de llamadas, establecer puntos de inspección sobre cualquier objeto activo, e incluso acceder a hebras asíncronas ocultas.

La depuración puede continuar, además, pasando alternativamente de una hebra a otra a medida que los Workers de comunican con la interfaz de usuario y viceversa. De hecho, si ponemos otro punto de interrupción en la hebra principal, o si, simplemente, continuamos al ejecución paso a paso, veremos que conmutamos a la página principal y en la zona de inspecciones, aparecen los datos de vuelta mostrados con una entrada especial, como muestra la siguiente captura:

 

JavaScript4

 

Y lo mismo sucede con otras API como los Web Sockets, las API que accede a ficheros locales (File API), y las API de almacenamiento local (localStorage) y de sesión (sessionStorage)

Seguiremos analizando la depuración JavaScript más avanzada en la siguiente entrada.


Entradas relacionadas

Cursos relacionados
Nuestro sitio utiliza cookies para análisis. Si no estás seguro de ello, echa un vistazo a nuestra política de privacidad.