La depuración es una parte esencial del proceso de desarrollo de software, ya que permite a los desarrolladores identificar, comprender y corregir errores y comportamientos inesperados en su código, garantizando que el software funcione correcta y eficientemente. Dominarlo puede mejorar significativamente su productividad y la calidad del código. Aquí tienes una guía detallada que te ayudará a depurar código JavaScript como un profesional:

1. Registro de consola

• console.log(): La forma más básica de depuración. Úselo para imprimir valores y ver cómo cambian con el tiempo.

• console.error() y console.warn(): Útil para resaltar errores y advertencias.

• console.table(): Muestra datos de matriz u objeto en formato de tabla, lo que facilita su lectura.

2. Declaración del depurador
La declaración del depurador se puede insertar en su código para pausar la ejecución en un punto específico. Cuando el navegador encuentre esta declaración, se detendrá y abrirá las herramientas de depuración.

3. Herramientas para desarrolladores del navegador

Herramientas de desarrollo de Chrome

• Panel de elementos: Inspecciona y modifica HTML y CSS.

• Panel de consola: Ejecute JavaScript sobre la marcha, vea mensajes de registro e interactúe con el entorno de JavaScript.

• Panel de fuentes: Establezca puntos de interrupción, recorra el código e inspeccione variables.

• Panel de red: Analiza las solicitudes y respuestas de la red.

• Panel de rendimiento: Mide y analiza los cuellos de botella en el rendimiento.

4. Establecer puntos de interrupción
Establecer puntos de interrupción es una técnica de depuración fundamental que le permite pausar la ejecución de su código en puntos específicos. Esta pausa le permite inspeccionar el estado actual de su aplicación, incluidos los valores de las variables y el flujo de ejecución.

Tipos de puntos de interrupción

• Puntos de interrupción de línea: El tipo más común. Estos se configuran haciendo clic en el número de línea en el editor de código o en las herramientas de desarrollo del navegador. Cuando la ejecución llega a esta línea, se detiene, lo que le permite inspeccionar el estado actual.

• Puntos de interrupción condicionales:
  Estos puntos de interrupción solo pausan la ejecución si una condición especificada es verdadera. Es útil para detener la ejecución de código solo cuando se cumplen ciertos criterios, lo que reduce las pausas innecesarias.

• Puntos de interrupción de funciones: Se configura automáticamente para pausar cada vez que se llama a una función en particular. Es útil cuando desea inspeccionar cómo se comporta una función cada vez que se ejecuta.

• Puntos de interrupción DOM: Establecer en elementos DOM específicos para pausar la ejecución cuando ocurre un evento particular (por ejemplo, modificación de atributos, eliminación de nodos) en ese elemento. Es útil para depurar cambios dinámicos de DOM.

5. Observando expresiones
Puede agregar expresiones de observación en las herramientas de depuración para realizar un seguimiento de variables o expresiones específicas a lo largo del tiempo.

1. Abre el panel Fuentes.
2. Haga clic con el botón derecho en la sección Ver y seleccione "Agregar expresión de observación".
3. Ingresa la expresión que deseas ver.

6. Manejo de errores
El manejo adecuado de errores puede evitar que su aplicación falle y facilitar la depuración.

• try...catch: Úselo para manejar excepciones.

• Mensajes de error personalizados: Proporciona mensajes de error significativos para facilitar la depuración.

7. Herramientas de pelado
Las herramientas de Linting como ESLint pueden detectar errores potenciales y aplicar estándares de codificación, lo que reduce la probabilidad de que se produzcan errores.

Herramientas de pelado populares

1. ESLint
2. JSHint
3. Más bonita

8. Pruebas unitarias
Las pruebas unitarias implican escribir pruebas para unidades o componentes individuales de su código para garantizar que funcionen como se espera. Ayuda a detectar errores tempranamente y hace que su código sea más confiable y más fácil de refactorizar.

Marcos de prueba populares

1. Broma
2. Moca
3. Jazmín

9. Depuración de red y rendimiento

Panel de red

• Inspeccionar solicitudes: Ver detalles de las solicitudes de red, incluida la URL, el método, el estado, la respuesta y el momento.

• Tiempo: Analizar el tiempo que tardan las solicitudes en completarse e identificar cuellos de botella.

Panel de rendimiento

• Grabar interpretación: Iniciar una grabación de interpretación para capturar la línea de tiempo de los eventos.

• Identifique cuellos de botella: Busque tareas largas, cambios de diseño o reflujos excesivos que puedan degradar el rendimiento.

• Analizar gráfico de llamas: Comprenda la ejecución de tareas a lo largo del tiempo e identifique áreas de optimización.

10. Gestión de perfiles y memoria
Utilice los paneles Rendimiento y Memoria para identificar y solucionar cuellos de botella de rendimiento y pérdidas de memoria.

Instantáneas del montón

• Tomar instantáneas del montón: Capture el uso de memoria de su aplicación en diferentes puntos.

• Comparar instantáneas: Compara varias instantáneas para identificar objetos que están perdiendo memoria.

Cronogramas de asignación

• Supervisar la asignación de memoria: Realice un seguimiento de la asignación de memoria a lo largo del tiempo para ver dónde su aplicación utiliza más memoria.

• Identifique el uso excesivo de memoria: Busque picos en la asignación de memoria e identifique qué partes de su código son responsables.

Conclusión
La depuración eficaz de JavaScript requiere una combinación de las herramientas, técnicas y un enfoque metódico adecuados. Al aprovechar las funciones de las herramientas modernas para desarrolladores de navegadores, escribir código claro y fácil de mantener y utilizar pruebas automatizadas, puede identificar y corregir errores de manera más eficiente.
Por favor comparta sus puntos de vista sobre esto. ¡Feliz depuración!