Como desarrollador, a menudo querrás depurar código. Es posible que ya hayas utilizado console.log en algunos de los desafíos, que es la forma más sencilla de depurar.

En este artículo te contamos algunos de los trucos más interesantes para depurar usando las herramientas de depuración nativas de los navegadores.

Una breve descripción del editor de código freeCodeCamp:

Antes de saltar a la depuración, filtremos algunos datos secretos sobre ese increíble motor de verificación de códigos en FCC.

Usamos un CodeMirror personalizado como editor de código. Se utiliza una función eval() para evaluar el código JavaScript representado como una cadena del editor. Cuando se llama a eval(), los navegadores ejecutarán tu código de forma nativa. Aprenderemos más por qué este secreto es importante en secciones posteriores de este artículo.

Pasemos ahora a los trucos:

DevTools de Google Chrome

Google Chrome es uno de los navegadores más populares con un motor JavaScript incorporado llamado V8, y ofrece un gran conjunto de herramientas para desarrolladores llamado Chrome DevTools. Se recomienda encarecidamente visitar su Guía completa de depuración de JavaScript.

1 : DevTools básico

Lanzamiento de Chrome DevTools

Presiona F12

Alternativamente, puedes presionar en Windows

Ctrl + Shift + I

y Linux or Mac

Cmd + Shift + I

o si te encanta tu ratón, ve a Menú > Más herramientas > Herramientas del desarrollador.

Conociendo las pestañas de Sources y Console.

Estas dos pestañas serán quizás tus mejores amigas mientras depures. La pestaña Sources(fuentes), se puede utilizar para visualizar todos los scripts que se encuentran en la página web que estás visitando. Esta pestaña tiene secciones para la ventana de código, árbol de archivos, pila de llamadas y ventanas de observación, etc.

La pestaña Console es donde va toda la salida del registro. Además, puedes utilizar el indicador de la pestaña de la consola para ejecutar código JavaScript. Es una especie de sinónimo del prompt de comandos en Windows o terminal en Linux.

Consejo: alterna la consola en cualquier momento en DevTools usando la tecla Esc.

2: Funciones y atajos comunes


Si bien puedes visitar la lista completa de accesos directos, a continuación se muestran algunos de los más utilizados:

Con Windows, Linux Mac:
Busca una palabra clave, se admiten expresiones regulares. Ctrl + F o Cmd+F
Buscar y abrir un archivo Ctrl + P o Cmd+P
Saltar a la línea Ctrl+G+:num_linea o Cmd+G+:num_linea
Agregar un punto de interrupción Ctrl+B o Cmd+B, o haz clic en el número de línea.

Pausar / reanudar la ejecución del script F8
Pasar sobre la siguiente llamada de función F10
Paso a la siguiente llamada de función F11

3 : Usando un Source Map(Mapa de origen) para nuestro código

Una de las funciones más interesantes que te encantará es la depuración de Dynamic Script, sobre la marcha, a través de Source Maps.

Cada script se puede visualizar en la pestaña Sources de DevTools. La pestaña Sources tiene todos los archivos fuente JavaScript. Pero el código del editor de código se ejecuta a través de eval() en un contenedor llamado simplemente máquina virtual (VM, virtual machine) dentro del proceso del navegador.

Como ya habrás adivinado, nuestro código es en realidad un script que no tiene un nombre de archivo. No vemos eso en la pestaña Sources.

¡Aquí viene el truco!

:sparkles:

Debemos aprovechar Source Maps para asignar un nombre al JavaScript de nuestro editor. Es bastante simple:

Digamos que estamos en el desafío Factorialize, y nuestro código se ve así:

function factorialize(num) {
  if(num <= 1){
  ...
}
factorialize(5);

Todo lo que tenemos que hacer es agregar // # sourceURL = factorialize.js en la parte superior del código, es decir, la primera línea:

//# sourceURL=factorialize.js

function factorialize(num) {
  if(num <= 1){
  ...
:sparkles:

¡Y Eureka! ¡Eso es!

:sparkles:

Ahora abre DevTools y busca el nombre del archivo. Agrega puntos de interrupción, depura y disfruta!

Más información sobre depuración:


Traducido del artículo How to Debug JavaScript with your Browser's Devtools