Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Experiencia moderna de depuración: Parte 

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Modern Debugging Experience.
Modern Debugging Experience: Part 1

Spanish (Español) translation by CYC (you can also view the original English article)


En la parte 1, vimos cómo escribir y ejecutar JavaScript usando DevTools. En la parte 2, veremos cómo depurar JavaScript y adoptar un flujo de trabajo tal que la resolución de errores de JavaScript y el diagnóstico de problemas se vuelva más eficiente.

Depuración de JavaScript con DevTools

Palabra clave del depurador

Puedes usar la palabra clave del depurador directamente en tu código para invocar las capacidades de depuración (si las hay) del tiempo de ejecución de JavaScript. El efecto de agregar el depurador de palabras clave en tu código es idéntico a la configuración manual de un punto de interrupción a través de la interfaz de usuario de DevTools. En Chrome, la palabra clave debugger no tiene efecto mientras DevTools está cerrado.

Controles del depurador

Los controles del depurador proporcionan un control detallado sobre el flujo de depuración. Úsalos cuando se detenga en un punto de interrupción para navegar efectivamente a través del código JavaScript. Cada control de depurador enumerado en esta sección corresponde a un botón en DevTools que puedes seleccionar mientras está en pausa en un punto de interrupción.

Continuar

Deja el punto de interrupción actual y reanuda la ejecución del código de forma normal. Esto no afecta otros puntos de interrupción que aún no han sido pausados.

Usa Continue cuando el punto de interrupción en pausa actual no sea útil y desees que la ejecución del código se reanude normalmente.

Paso a paso - Step Over

Pasa el código línea por línea (una línea por clic) hasta que se llegue a una llamada de función. En este punto, la llamada a la función se interrumpe y no entras en esa llamada de función en particular.

Usa Step Over cuando lo que estás tratando de resolver tiene un alcance con la función actual, y no necesitas mirar llamadas a funciones externas.

Entrar - Step Into 

Similar a Step Over, excepto que en este caso, navega a llamadas a funciones externas yendo a su primera línea.

Usa Step Into cuando estés interesado en la ejecución línea a línea, así como cualquier llamada a función externa.

Salir - Step Out

Cuando ingresas en una función, Step Out continuarás ejecutando el resto del código que funciona, sin embargo, no se depura.

Usa Step Out cuando no tengas interés en el resto de la función actual y desees continuar depurando fuera de ella.

La pila de llamadas

La pila de llamadas está activa cuando está en pausa en un punto de interrupción. La ruta de ejecución que conduce al punto de interrupción actualmente en pausa se muestra en la pila de llamadas, siendo la llamada más reciente la más reciente.

Cada llamada dentro de la pila contiene:

  • Nombre de la función
  • Nombre de archivo que contiene la función
  • La línea de código donde existe la función

Haz clic en cualquier llamada dentro de la pila para navegar hasta su punto en el código fuente con la línea relevante resaltada. Para copiar un seguimiento de pila en tu portapapeles, haz clic con el botón derecho en una llamada y selecciona Copiar rastro de pila. En el menú contextual de la pila de llamadas, también puedes seleccionar Reiniciar fotograma.

Reescritura de funciones mientras se pausa en un punto de interrupción

Considera el caso de uso en el que el depurador se detuvo en la mitad de una función de devolución de llamada activada por un controlador de evento de clic, y estás intentando depurar por qué la recuperación del target no parece funcionar como se esperaba.

Verás que se ha intentado acceder a la propiedad de destino como parte de palabra clave this, pero luego recuerdas que es una parte de propiedad del objeto de evento pasado como argumento a la función de devolución de llamada.

Puedes volver a escribir la función usando Live Edit para verificar que los cambios funcionen y el nuevo JavaScript se inyecta en el motor V8.

monitorEvents

Cuando estás escribiendo un controlador de eventos para un evento como desplazamiento, puedes comenzar utilizando console.log para ver cómo se ve el argumento pasado (el objeto del evento). Un consejo rápido para lograr esto es usar el atajo de monitorEvents. Pega el siguiente código en el Panel de la consola y luego recorre la página:

Ten en cuenta que el objeto del evento está registrado en la consola listo para su inspección.

Depurar

Cuando desees que el depurador haga una pausa en la primera línea de una función durante su ejecución, puedes hacer una de las siguientes cosas:

  • Agregar un punto de interrupción a través de la interfaz de usuario de DevTools.
  • Agregar una declaración de depuración a la función.

Otra técnica es ejecutar debug(fn) que es parte de la API de línea de comandos. La función toma la función que deseas depurar como su argumento, y se romperá en la primera línea de la ejecución de esa función.

Romper el acceso a la propiedad

Esta técnica te permite pausar el depurador cuando se accede a la propiedad de un objeto que te interesa de alguna manera (una lectura o escritura). Para interrumpir cuando se lee o escribe una propiedad de un objeto, ejecuta lo siguiente (a través del panel de la consola o los fragmentos):

Esto aplica un getter y un setter a la propiedad scrollTop del objeto document.body. En el getter y setter personalizado, existe la instrucción del depurador. También puedes usar Object.observe para romper adiciones de propiedades para un objeto específico:

Puntos de interrupción condicionales con console.log

Dejando a un lado la palabra clave del depurador, para establecer un punto de interrupción a través de DevTools, puedes hacer clic en la línea de código que deseas interrumpir dentro del margen de línea. Este método de establecer un punto de interrupción tiene una funcionalidad adicional: establecer un punto de interrupción condicional que instruirá a las herramientas de desarrollo para hacer una pausa en un punto de interrupción solo si una determinada expresión se evalúa como verdadera. Por ejemplo, puedes establecer un punto de interrupción condicional para hacer una pausa solo si existe un argumento de error.

Para establecer un punto de interrupción condicional:

  1. Haz clic derecho dentro del canal de la línea.
  2. Selecciona Agregar punto de interrupción condicional.
  3. Ingresa la expresión que deseas que DevTools evalúe.
  4. Presiona Enter
Add conditional breakpoint

También puedes usar la técnica de punto de corte condicional para insertar rápidamente una instrucción console.log como la expresión para evaluar. Como console.log evalúa como indefinido, DevTools no pausa, pero dado que la expresión todavía se ejecuta, puedes inspeccionar el valor de las variables de esta manera.

Usando expresiones de reloj

Cuando el depurador está en pausa en un punto de interrupción, puedes abrir el Panel de la consola en Modo de cajón con la tecla Escape. El código que ingresas se evalúa en el mismo contexto que el punto en el que está en pausa, lo que significa que las variables que tienen alcance estarán disponibles para ti.

Watch expressions

Una expresión de observación es una herramienta para simplificar la técnica de inspección regular (a través de console.log, por ejemplo) de variables de ámbito. Watch Expressions es un panel dentro del Panel de Fuentes. Puedes agregar o eliminar Watch Expressions usando los botones Más y Menos. Un objeto típico a observar es el objeto this; observa cómo se refiere a un objeto de ventana global cuando no está en pausa en un punto de interrupción.

Watch Expressions generalmente se actualizará mientras recorre el código. Sin embargo, en caso que no lo haga, haz clic en el botón Actualizar.

Excepciones

Considera la siguiente secuencia de comandos:

Exceptions

Hay tres funciones declaradas. La función a llama a la función b, luego la función b llama a la función c. La secuencia de comandos inicia la cadena con una llamada a la función a. La instrucción console.trace registra en la consola un seguimiento de pila desde el punto donde se llamó al método. El uso de console.trace muestra el resultado de usar console.trace.

Ten en cuenta que los nombres de las funciones y las líneas donde se llaman se muestran en el mensaje de seguimiento. Puedes hacer clic en el número de línea para llevarlo a su punto en el Código fuente a través del Panel de Fuentes. Esta técnica también funciona para fragmentos.

El depurador ofrece varios modos para tratar con Excepciones:

  • Pausa en excepciones no detectadas.
  • Pausa sobre excepciones atrapadas y no detectadas.
  • No pausa en las excepciones.

2. Depuración desde el exterior

Cuando tienes que depurar un sitio que tiene poca información, puedes utilizar una técnica diferente de depuración. En este enfoque, te conectas con eventos que crees que se desencadenarán, y solicitas las interrupciones de DevTools en dichos eventos, siempre y cuando ocurran. Hay dos categorías de puntos de entrada "fuera > en":

  • Modificaciones DOM
  • Puntos de interrupción del receptor del evento

Romper las modificaciones DOM

Tienes la tarea de depurar una página web, específicamente el DOM. Los nodos se agregan y eliminan durante el ciclo de vida de la página, y debes inspeccionar el JavaScript que hace que esto suceda. Establece un punto de interrupción DOM con los siguientes pasos:

  • Haz clic derecho en un nodo DOM en el Panel de Elementos.
  • Selecciona un punto de interrupción DOM preferido del menú contextual Break on.
  • Mientras te encuentras en pausa en un punto de interrupción, puedes ver un mensaje que explica el motivo por el que el depurador se detuvo, como se muestra en Motivo de la pausa en un punto de interrupción.
DOM modifications

Cada vez que configuras un punto de interrupción DOM, puedes alternar fácilmente entre activarlo y desactivarlo en el panel de puntos de interrupción de DOM en el Panel de elementos. En este panel, cada punto de interrupción que establezcas aparecerá en la lista, y puedes interactuar con este panel de las siguientes maneras:

  • Activa y desactiva la casilla de verificación para habilitar o deshabilitar el punto de interrupción.
  • Haz clic en el nombre del nodo (que está subrayado) para navegar hasta él en la vista de árbol DOM.
  • Haz clic con el botón derecho y selecciona Eliminar todos los puntos de interrupción DOM para deshabilitar y eliminar todos los puntos de interrupción DOM.
DOM breakpoints

Modificaciones de Subárbol

Descripción: Una modificación de Subárbol se produce cuando se modifica el árbol de un nodo raíz (que tiene el conjunto de puntos de interrupción). Esto puede incluir la adición o eliminación de nodos.

Caso de uso: Un contenedor div vacío está presente en el DOM, y una solicitud Ajax ocurre en la carga de la página, que agrega algunos nodos nuevos al contenedor original. Agrega un punto de interrupción de modificación de Subárbol en el contenedor para ver el punto exacto en el código que agrega nuevos nodos al DOM.

Ejemplos de mensaje: Pausado en un subjuego el punto de interrupción modificado se ha establecido en el body, porque su descendiente p se eliminó. O bien: se pausó en un subfondo Punto de interrupción modificado establecido en div#parent, porque se agregó un nuevo elemento secundario a ese nodo.

Modificaciones de Atributos 

Descripción: Una modificación de atributo se activa cuando se agrega, elimina o modifica un nombre o valor de atributo en un nodo. Esto incluye todos los atributos, como class, data-* o style.

Caso de uso: Un cambio visual ocurre en la página en un punto aparentemente aleatorio en el tiempo, y se reduce a una clase que se establece dinámicamente en el elemento del cuerpo. Deseas investigar la causa de esta adición dinámica de clase.

Ejemplo de mensaje: Pausa en un punto de interrupción modificado de atributo establecido en p.

Eliminación de nodos

Descripción: Un punto de corte de eliminación de nodos se desencadena en el punto donde se elimina un nodo del elemento primario que contiene el punto de corte establecido.

Caso de uso: Estás creando una aplicación de lista de tareas y deseas verificar que cuando un usuario elimina una tarea pendiente, también se elimine del DOM. Puedes establecer un punto de corte de eliminación de nodos para garantizar que se produzca este comportamiento.

Ejemplo de mensaje: Se ha pausado un nodo eliminado en div#container.

Puntos de interrupción del receptor del evento

En DevTools, hay varios puntos de interrupción de escucha de eventos predefinidos disponibles para que los habilites. Estos ofrecen puntos de entrada en el JavaScript que pertenece a una página.

Considera una simple página en blanco de acerca de: Establede un punto de corte de escucha del evento de clic en esta página con los siguientes pasos:

  • Navega hasta el panel Puntos de interrupción de escucha de evento en el Panel de orígenes.
  • Abre la categoría Escucha de eventos del mouse.
  • Habilita el detector de eventos Clic.

Ahora haz establecido un punto de interrupción. Si haces clic en la página, observa que no sucede nada. Ahora ejecuta la siguiente pieza de código JavaScript en el Panel de la consola.

Cuando estableces un punto de interrupción para el mismo evento para el que ha registrado un detector de eventos, el depurador realiza una pausa antes del punto donde se ejecuta la devolución de llamada del detector de eventos.

Puedes registrar puntos de interrupción para muchos tipos de eventos, como temporizadores, eventos táctiles y más, que se enumeran en la tabla a continuación.

Categoría de evento Ejemplos de eventos

Animación

requestAnimationFrame, cancelAnimationFrame, animationFrameFired

Control

resize, scroll, zoom, focus, blur, select, change, submit, reset

Portapapeles

copy, cut, paste, beforecopy, beforecut, beforepaste

Mutación DOM

DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded

Dispositivo

deviceorientation, devicemotion

Arrastrar y soltar

dragenter, dragover, dragleave, drop

Teclado

keydown, keyup, keypress, input

Carga

load, beforeunload, unload, abort, error, hashchange, popstate

Mouse

click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout, mousewheel, wheel

Minutero

setTimer, clearTimer, timerFired

Tacto

touchstart, touchmove, touchend, touchcancel

WebGL

webglErrorFired, webglWarningFired


La técnica de "depuración desde el exterior hacia adentro" puede ser útil cuando necesitas depurar un sitio web de un tercero cuya funcionalidad se ha roto, o incluso cuando tienes curiosidad sobre cómo funciona algo en una página que estás viendo.

3. Extensiones

Existe una cantidad de extensiones de Chrome, muchas de las cuales mejoran la funcionalidad de DevTools. Se encuentra una lista destacada en la Galería de extensiones de DevTools.

Preprocesamiento de JavaScript de DevTools

Para los autores de la extensión DevTools, la característica de preprocesamiento de JavaScript es un tema que vale la pena conocer. El preprocesador puede interceptar el código fuente de JavaScript antes de que ingrese al motor V8, lo que significa que el código fuente de JavaScript se puede modificar a través de DevTools antes de ingresar a la máquina virtual, todo desde una extensión.

Además de las capacidades de interceptación, la API de preprocesamiento tiene acceso programático para recargar fuentes de script. Una extensión puede, en cualquier momento durante su ciclo de vida, volver a cargar una fuente JavaScript sin volver a cargar la página web original.

4. Nodo

Esta sección cubre algunas herramientas que ofrecen cierto nivel de integración entre Node.js y Chrome DevTools.

Inspector de nodo

Hay dos partes en DevTools:

  • Front-end: Esto es lo que usa e interactúa. Está compuesto de HTML, CSS y JavaScript.
  • Back-end: En el caso de inspeccionar una página en Google Chrome, el back-end se encuentra dentro de las partes internas de Chrome. Los mensajes se transmiten de un lado a otro a través del protocolo de depuración remota.

Cualquier aplicación puede implementar comunicación a través del protocolo de depuración remota y permitir a sus usuarios depurar a través de DevTools. Node Inspector es una de esas herramientas. Después de la instalación, puedes ejecutar cualquier script de nodo usando Node Inspector. La herramienta inicia un servidor web que aloja el front end de DevTools. Esta versión especial de DevTools no usa el back-end de Chrome, sino el propio Node Inspector.

Node Inspector

Como puedes ver en Node Inspector, DevTools está en pausa en un punto de interrupción. La pila de llamadas se refiere a las llamadas ejecutadas en Node.js. La única participación del navegador aquí es para la interfaz de usuario de DevTools.

Nodo Heapdump

Usa Node Heapdump para tomar una instantánea del montón de V8 en un punto en el tiempo en tu código. El estado actual del montón V8 se serializa y se envía a un archivo.

Node Heapdump

Compara dos instantáneas de montón para descubrir qué objetos no están recogiendo basura. Esto es útil para atrapar fugas de memoria.

Conclusión

Eso es todo por esta serie de dos partes sobre una experiencia de depuración moderna. Esperemos que en este punto, te sientas cómodo con la creación y depuración de JavaScript dentro de las DevTools de Chrome. Estás familiarizado con los flujos de trabajo que pueden ayudar a la depuración y conoces algunos consejos y trucos cuando se trata de un sitio de producción en el que no trabajaste anteriormente. Asegúrate de probar algunas de las técnicas que aprendiste aquí la próxima vez que necesites depurar.

¡Gracias por leer!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.