Cómo dejar de usar console.log() y comenzar a usar el depurador de su navegador

Cada vez que veo a alguien depurar JavaScript de forma realmente eficaz en el navegador, utiliza las herramientas DevTools para hacerlo. Establecer puntos de interrupción y saltar sobre ellos y demás. Eso, a diferencia de esparcir console.log()(y amigos) declaraciones alrededor de su código.

Parag Zaveri escribió sobre la transición y ¡claramente ha resonado en mucha gente! (7,5 mil aplausos en Medium mientras escribo).

Sé que tengo complejos al respecto…

• Parte de la depuración no consiste simplemente en inspeccionar el código una vez tal como está; es inspeccionar cosas, hacer cambios y luego continuar depurando. Si pasa mucho tiempo configurando puntos de interrupción, ¿seguirán ahí después de cambiar mi código y actualizarlo? Respuesta: DevTools parece hacer un buen trabajo con eso.
• Mirar la consola para ver algunos resultados es una cosa, pero perder el tiempo en el panel Fuentes es otra. Mi código allí puede estar transpilado, combinado y no parecer el código de mi autor, lo que hace que las cosas sean más difíciles de encontrar. Además, visualmente es un poco estrecho allí.

¡Pero aún! Es tan poderoso. Establecer un punto de interrupción (simplemente haciendo clic en un número en línea) significa que no tengo que llenar mi propio código con basura adicional, ni tengo que elegir qué registrar. Todas las variables en el ámbito local y global están disponibles para que pueda ver ese punto de interrupción. En el artículo de Parag aprendí que es posible que ni siquiera necesites establecer puntos de interrupción manualmente. Puede, por ejemplo, hacer que se rompa cada vez que se activa un evento de clic (u otro). Además, puedes escribir los nombres de las variables que deseas observar específicamente, para no tener que buscarlas. Intentaré utilizar las DevTools adecuadas para depurar con más frecuencia y ver cómo funciona.

Mientras hablamos de depuración… He tenido esto en mi cabeza durante algunos meses: ¿Por qué JavaScript no tiene niveles de registro? Al parecer, este es un concepto muy común en muchos otros idiomas. Puede escribir declaraciones de registro, pero solo se registrarán si la configuración así lo indica. De esa manera, en desarrollo, se pueden obtener registros detallados, pero registrar solo errores más graves en producción. Lo mencioné porque podría ser bueno dejar declaraciones de registro útiles en el código, pero no hacer que se registren si configuras “me gusta” console.level = "production";o lo que sea. O tal vez podrían compilarse durante un paso de construcción.