‫Instructor: En este video,
‫aprenderemos sobre la depuración de Node. JS porque, seamos sinceros, siempre
‫habrá algunos errores en nuestro código, sin importar
‫cuán cuidadosos seamos.
‫Por eso es bueno tener una herramienta que nos
‫ayude a depurar nuestro código.
‫Ahora bien, esto no se trata realmente de manejo de errores con
‫Express, pero pensé que este era un buen momento
‫en el curso para presentarle una herramienta
‫de depuración que luego podríamos usar durante el resto del curso.
‫Y hay diferentes formas de depurar Node. Código JS.
‫Por ejemplo, podríamos usar el código VS para eso.
‫Pero, en realidad, Google lanzó recientemente una herramienta increíble
‫que podemos usar para depurar que se llama NDB, ¿de acuerdo?
‫Así que pasemos a nuestra otra terminal aquí
‫y luego instalemos NDB.
‫Y NDB, que significa depurador de nodo, en realidad
‫es solo un paquete NPM.
‫Entonces NPM instala NDB.
‫De acuerdo, y
‫luego debería instalarlo como un paquete global, ¿de acuerdo?
‫Y si está en una Mac, es posible que necesite permisos globales.
‫Así que escribe sudo aquí al frente.
‫O si no puede instalarlo globalmente, siempre puede
‫instalarlo localmente como una dependencia
‫de muerte.
‫Así que así, ¿de acuerdo?
‫De todos modos, continúe e instale esta herramienta ahora.
‫No lo
‫voy a hacer porque puede ser una descarga bastante
‫pesada y eso lleva demasiado tiempo ahora.
‫De todos modos, tan pronto como tengas la herramienta instalada,
‫vayamos al paquete. Jason y
‫agregue un nuevo guión aquí, ¿de acuerdo?
‫Y voy a llamar a eso una depuración.
‫¿Okey?
‫Entonces, el comando que queremos ejecutar
‫aquí es simplemente NDB, entonces el depurador de notas
‫y luego nuevamente nuestro punto de
‫entrada, Entonces, servidor. js ¿Está
‫bien?
‫Y ahora esto funcionará sin
‫importar si instaló NDB local o globalmente.
‫Muy bien, ahora ejecutemos el script.
‫Y para que
‫esto funcione, necesitamos terminar este proceso
‫porque básicamente también iniciará
‫el servidor y luego intentará hacerlo en
‫el mismo puerto y eso,
‫por supuesto, no funcionará.
‫Así que tenemos que terminar el que se
‫está ejecutando actualmente y luego desde aquí podemos ejecutar NPM
‫ejecutar depuración
‫Muy bien,
‫y ahora debería abrirse una nueva
‫ventana de Chrome, lo que se
‫llama un Chrome sin cabeza, pero no
‫es un Chrome real.
‫Entonces verá el ícono de Chrome aquí abajo
‫y también aquí en la barra
‫de menú, pero en realidad este es solo el depurador de notas.
‫entonces que tenemos aqui?
‫Bueno, en el lado izquierdo, tenemos nuestro sistema de archivos completo.
‫También tenemos acceso a nuestros scripts de NPM aquí,
‫que de hecho podemos ejecutar desde aquí.
‫También tenemos una consola y aquí tenemos
‫nuestras salidas habituales con la aplicación ejecutándose y la
‫conexión a la base
‫de datos y también tenemos las pestañas de rendimiento y
‫memoria, que no vamos a usar.
‫Muy bien, ahora si está familiarizado
‫con el proceso de
‫depuración general, entonces todo esto le resultará familiar.
‫Está bien, pero si no, no te preocupes, te
‫mostraré un par de técnicas a
‫lo largo de este video.
‫Muy bien, de todos modos, abramos ahora nuestro servidor. js.
‫Y una cosa que es realmente
‫sorprendente es que podemos editar nuestros archivos aquí, así
‫que en este depurador.
‫Entonces, por ejemplo, digamos que encontramos un error
‫y luego queremos solucionarlo de inmediato.
‫Podemos hacerlo aquí mismo en el depurador
‫y luego actualizará el código original.
‫Entonces, solo para
‫probarlo, agreguemos un comentario aquí.
‫Entonces, prueba, luego presiona comando o control s para guardar y luego cuando
‫volvamos a nuestro código y abrimos
‫el servidor. js allí,
‫verá que el comentario está realmente aquí.
‫¿Okey?
‫Y si ahora lo
‫borramos de aquí,
‫lo guardamos y volvemos
‫al depurador, entonces también desaparecerá de aquí.
‫Bien, pero ahora sobre la depuración en sí.
‫Yo diría que el aspecto
‫fundamental de la depuración es establecer puntos de ruptura.
‫Entonces, los puntos de interrupción son básicamente puntos en nuestro
‫código que podemos definir aquí en
‫el depurador, donde nuestro código dejará de ejecutarse.
‫Básicamente se congelará en el tiempo
‫y luego podremos echar un vistazo a todas nuestras variables.
‫Bien, entonces será extremadamente útil para
‫encontrar algunos errores.
‫Ahora, en este momento no hay
‫ningún error aquí, pero agreguemos un punto de interrupción.
‫Y voy a agregar ese punto de quiebre aquí en esta línea 21.
‫Así que hago clic aquí en
‫esta línea y luego ves este marcador verde, ¿de acuerdo?
‫Y eso significa que el código se detendrá en
‫este punto cuando lo ejecutemos, ¿de acuerdo?
‫Y también puede verlo aquí en
‫el lado derecho en la pestaña de puntos de interrupción aquí.
‫Ahora, nuestra aplicación ya se
‫está ejecutando en este
‫punto y básicamente está esperando solicitudes para ingresar.
‫Entonces, lo que tenemos que
‫hacer aquí es hacer clic derecho y luego hacer clic en ejecutar este script.
‫De acuerdo, entonces básicamente ejecutará el
‫script aquí nuevamente.
‫¿Está bien?
‫Y aquí vamos.
‫Entonces puede ver aquí en el lado
‫derecho, que dice pausado en el punto de interrupción y, por
‫lo tanto, todo el código que está por encima de este punto de
‫interrupción aquí ya se ha ejecutado en este punto.
‫Y ahora podemos echar un vistazo a las variables.
‫Por ejemplo, podemos colocar el cursor sobre esta
‫variable de puerto y vemos que está configurada en 3,000.
‫Y también, de hecho, toque este lugar aquí
‫en el código aquí, de acuerdo.
‫Y luego la tercera forma de verlo es
‫aquí en el lado derecho.
‫Así que tenemos un par de pestañas básicamente aquí para los
‫procesos de nodo, el reloj, la pila de llamadas, lo
‫cual no es realmente importante por ahora.
‫El alcance, y entonces el alcance es donde están
‫todas nuestras variables, ¿de acuerdo?
‫Y aquí nuevamente, tiene el puerto configurado en 3,000.
‫De acuerdo, y aquí también puedes ver
‫las cinco variables a las que tenemos acceso
‫en todos los módulos.
‫¿Recuerdas eso de la conferencia de modelos?
‫Entonces tenemos el nombre del
‫directorio, tenemos el nombre del archivo, tenemos la función require,
‫tenemos el módulo y tenemos la exportación.
‫Así que recuerde, estas son las cinco variables que
‫están disponibles en todos y cada uno de los módulos.
‫Y, de hecho, cuando ejecutamos un
‫código como este en el depurador, podemos ver que todo
‫nuestro código está incluido en esta función.
‫¿Derecha?
‫Entonces esta función contenedora que
‫nos da acceso a estas cinco variables.
‫Muy bien, a continuación también quiero echar un vistazo a
‫nuestra variable de aplicación, así que básicamente la aplicación Express
‫que exportamos desde la aplicación. js, recuerda eso.
‫Y aquí hay un montón de cosas,
‫pero lo que encuentro interesante
‫es echar un vistazo a este enrutador aquí.
‫Bien, entonces en el enrutador tenemos pila.
‫Bien, entonces abramos esto un poco y
‫esta pila aquí es
‫básicamente la pila de middleware que tenemos en nuestra aplicación.
‫Bien, por ejemplo, tenemos nuestro jsonParser aquí,
‫tenemos el código que sirve a los archivos estáticos.
‫Échale un vistazo aquí en la aplicación. js así que este
‫expreso. estático.
‫También tenemos el registrador aquí
‫que proviene del uso de Morgan.
‫Entonces tienes estas dos funciones de middleware
‫siguientes, entonces
‫estas dos aquí, que son anónimas, entonces esta y esta y
‫tal vez podamos echarles un vistazo.
‫Pero no realmente.
‫De acuerdo, no importa.
‫Entonces, esto es solo por curiosidad y
‫para mostrarle que realmente
‫podemos echar un vistazo a nuestra pila de middleware, ¿de acuerdo?
‫Entonces finalmente tenemos nuestros dos enrutadores.
‫¿Okey?
‫Entonces, tenemos el enrutador, y aquí ve realmente la
‫ruta para la que se aplica.
‫Así que api / v1 / tours está bien y encuentro esto realmente interesante.
‫Por supuesto, todavía tenemos a los usuarios aquí también.
‫Y así, con esto realmente puedo echar un vistazo a
‫cómo funciona la aplicación Express entre bastidores.
‫¿Okey?
‫Así que cerremos todo esto.
‫Y la otra cosa que quería mostrarles
‫está aquí en las
‫variables globales porque aquí tenemos la variable de proceso o
‫al menos deberíamos tenerla en algún lugar aquí.
‫Sí, así que aquí está.
‫Así que aquí tenemos la variable de
‫proceso que se recuerda, disponible en todas partes.
‫Y es por eso que aquí se llama variable global.
‫Luego, tenemos el proceso. env y
‫recordar que es aquí
‫donde se almacenan todas nuestras variables de entorno.
‫Y, de hecho, aquí tenemos nuestra cadena de base
‫de datos, tenemos la base de datos local, la contraseña
‫y realmente todas las demás variables de entorno
‫que definimos en nuestra configuración. n archivo.
‫¿Está bien?
‫Cosas realmente interesantes que podemos ver aquí.
‫Pero ahora continuemos con nuestra depuración.
‫¿Okey?
‫Así que detuvimos el código, lo congelamos a
‫tiempo aquí en este punto, así que en la línea 21.
‫Bien, y ahora podemos hacer clic aquí en este
‫botón para continuar ejecutando el código.
‫Y dado que no tenemos
‫más puntos de interrupción, el código no
‫se romperá más y básicamente terminará de ejecutarse.
‫Así que hagámoslo.
‫Y ahora nuestra aplicación realmente se está ejecutando.
‫Echemos un vistazo a eso.
‫En Console, ¿de acuerdo?
‫Entonces, la aplicación se ejecuta en el puerto 3000 y la
‫conexión a la base de datos es exitosa, por supuesto.
‫Que paso aqui
‫Bien, hagamos
‫ahora rápidamente una solicitud aquí.
‫Así que simplemente uno para / tours
‫y ahora tenemos toda esta
‫basura aquí y me ocuparé de eso en un segundo.
‫Muy bien, y si ahora regresa a nuestra Consola
‫aquí, entonces, por supuesto, tenemos todo el código que teníamos antes.
‫Hola desde el
‫middleware y luego cuánto tardó realmente la consulta.
‫Muy bien, y ahora, antes de hacer
‫cualquier otra cosa, eliminémonos de estos tours basura.
‫Así que lo volveré a cargar
‫aquí, y supongo que estará en algún lugar al final.
‫Entonces, prueba lo que sea aquí.
‫Así que deshagámonos de eso.
‫Esta es la gira secreta y de hecho quiero mantenerla aquí.
‫Pero todo de aquí en adelante ya no lo queremos.
‫Y así
‫que sí, ahora volvemos a tener solo
‫10 giras, como antes.
‫De todos modos, establezcamos ahora un punto de interrupción
‫en la función que maneja esta ruta.
‫Bien, entonces llegamos a nuestra carpeta de controladores y
‫ahí tenemos el controlador de gira.
‫¿Okey?
‫Y luego, la función del controlador es obtener todos los recorridos.
‫Entonces, por ahora, todo
‫lo que quería hacer es establecer un punto
‫de interrupción aquí para que podamos ver cómo se ven estas
‫variables después de que la consulta ya esté hecha.
‫Entonces, este código aquí obtendrá nuestros recorridos
‫y luego detendremos
‫el código básicamente antes de enviarlo como respuesta.
‫De acuerdo, todo lo que tenemos que hacer es realizar la
‫solicitud porque eso activará esa función.
‫¿Derecha?
‫Y como tenemos un punto de interrupción, automáticamente regresamos
‫a esta ventana aquí, y al punto donde
‫el código se ha detenido.
‫Entonces, ¿qué tipo de variables tenemos aquí?
‫Entonces ves que tenemos la solicitud y una respuesta,
‫y también tenemos las características
‫variables, y los recorridos, por supuesto.
‫Así que primero echemos un vistazo a la solicitud.
‫Y aquí de nuevo, ves que realmente tenemos todo
‫tipo de cosas.
‫Entonces tenemos baseurl, tenemos el método, tenemos, por
‫ejemplo, request. query, que en este
‫momento está vacía porque no pasamos
‫ninguna cadena de
‫consulta, pero puede ver que ya está aquí.
‫De acuerdo, entonces empiezas a ver lo
‫útil que puede ser esto para depurar nuestro código.
‫Básicamente, congelar nuestro código a tiempo en lugar de tener que
‫hacer todo esto en la consola. registros que solíamos hacer
‫hasta este punto.
‫Entonces, por lo general, cuando queríamos echar un vistazo a la consulta,
‫por ejemplo, hacíamos un montón de consola. logs y utilícelo para
‫descubrir un error en caso de que algo
‫no funcione.
‫Correcto, pero ahora tenemos esta increíble herramienta que puede
‫ayudarnos a evitar todas estas consolas. registros, por
‫ejemplo.
‫Entonces también tenemos la respuesta, por supuesto.
‫Y nuevamente ves todas estas propiedades y métodos que están ahí,
‫y no son realmente interesantes para
‫nosotros ahora.
‫Lo que quería mostrarles es, por supuesto, que en
‫este momento ya tenemos los recorridos, ¿de acuerdo?
‫Tenemos nueve recorridos, así que echémosle un vistazo.
‫Y se ve un poco extraño aquí, así que para tener
‫acceso a los valores reales, debemos hacer clic aquí, está bien, eso es
‫un poco extraño.
‫Pero funciona, por supuesto.
‫Y entonces ves que, de hecho, nuestros tours ya están
‫aquí y, por supuesto, también las características.
‫Entonces puede ver aquí que las características son una
‫instancia de la clase de características API tal como la definimos.
‫Y ahí tenemos la consulta y la cadena de consulta.
‫Genial, así es como echamos un vistazo a todas las variables.
‫Y así es como funcionan las partes
‫más importantes del depurador.
‫Ahora, para aprender un poco sobre el proceso de depuración
‫en sí, introduzcamos un error muy pequeño en nuestro código y luego
‫echemos un vistazo a cómo podemos usar estas herramientas
‫que tenemos aquí para, básicamente, echar un vistazo más
‫profundo a nuestro código.
‫Así que no voy a reanudar
‫la ejecución omitida para ejecutar básicamente el resto del código, ¿de acuerdo?
‫Así que eso debería hacerse ahora.
‫Así que ahora aquí tenemos todas las respuestas.
‫Como ven, tomó todo este tiempo aquí, es
‫decir, tres minutos y 29 segundos, pero eso
‫es solo porque detuvimos la ejecución durante
‫tanto tiempo.
‫Bueno.
‫Ahora vayamos a nuestro código aquí.
‫Cerremos lo que ya no necesitamos.
‫Entonces, en realidad, en nuestro archivo de características de API, quiero
‫introducir un pequeño error aquí en los campos de límite.
‫Entonces, digamos que estábamos tratando de implementar este
‫método aquí, pero en lugar de unirnos con un espacio
‫aquí, nos olvidamos de ponerlo aquí.
‫Entonces, digamos que nos unimos sin ningún
‫espacio, y esto nos daría un resultado extraño, ¿verdad?
‫Así que probémoslo.
‫Entonces, digamos
‫campos y que solo queríamos
‫el nombre y la duración, ¿verdad?
‫Ahora, antes de que pueda enviar esa solicitud, eliminemos el
‫punto de interrupción aquí.
‫¿Okey?
‫Envió la solicitud, y ahora no obtenemos el
‫nombre ni la duración.
‫Así que imaginemos que es nuestro error
‫ahora y ahora estamos tratando de averiguar por qué esto no funciona.
‫¿Okey?
‫Así que vayamos a nuestro depurador.
‫Y sabemos que el error probablemente debe
‫estar en algún lugar de nuestro método de campos límite.
‫Entonces, básicamente, dejemos de ejecutar el código en
‫este punto, ¿de acuerdo?
‫Porque aquí es donde realmente se llamará a este método
‫y desde aquí podemos ingresar esa función para
‫ese método.
‫¿Okey?
‫Entonces, disparemos esa solicitud
‫ahora, y ahora volvemos a nuestro depurador automáticamente.
‫Entonces, en este punto, esta línea y esta línea y
‫esta línea de código ya se han ejecutado, así que ahora usemos
‫la herramienta de pasos, ¿de acuerdo?
‫Lo que hará es que básicamente ejecutará la
‫siguiente línea de código.
‫Y en este caso, estará dentro del
‫método de campos limitados.
‫Así que da un paso, y luego se moverá directamente a esa función.
‫Bien, echemos un vistazo a lo que tenemos aquí.
‫Por ejemplo esto. La cadena de consulta es la duración de
‫la coma del nombre, por lo que es correcto, ¿verdad?
‫Bien, pasemos a la siguiente línea.
‫Muy bien y aquí es donde realmente está
‫sucediendo esta operación.
‫Luego, a continuación.
‫Echemos un vistazo a nuestras variables aquí.
‫Y aquí ahora vemos el campo, y aquí tenemos nuestro error.
‫¿Okey?
‫Entonces, el problema es, por supuesto, que no tenemos
‫espacio entre el nombre y la duración.
‫Y por eso no funciona.
‫Por supuesto, los campos se definen aquí,
‫y así podemos encontrar nuestro error y corregirlo de inmediato.
‫Así que recuerde que el paso agregado
‫que hacemos aquí se refleja inmediatamente en el código.
‫Así que
‫dale un guardado, y luego lo hará de nuevo.
‫Entonces puedo seguir caminando.
‫Y ahora los campos son correctos.
‫Así que nombra la duración del espacio.
‫Luego, la siguiente línea de código.
‫Y ahora ingresamos al método de selección en la consulta.
‫Pero eso no nos interesa en absoluto, así que
‫podemos decir "sal de la función actual". " ¿Okey?
‫Entonces, esa selección que pensamos que estaba ejecutando
‫esta función aquí, ¿de acuerdo?
‫Pero, por supuesto, no estábamos interesados en
‫eso, así que lo dejamos y pasamos a la siguiente línea.
‫Así que ahora hemos
‫devuelto esto, la siguiente línea y otra vez.
‫Así que ahora volvemos a donde estábamos, pero en la siguiente línea.
‫Así que sigamos haciendo eso.
‫Así que ahora estamos en
‫la página ocho, pero no estamos realmente interesados
‫en esta, así que salgamos nuevamente de la función actual.
‫Y ahora estamos aquí en la definición de tours.
‫Lo cual en este punto aún no está hecho.
‫Y entonces digamos de nuevo paso.
‫Y ahora, en este punto, deberían definirse nuestros recorridos.
‫Muy bien, tenemos nuestros nueve recorridos por aquí.
‫Echemos un vistazo a ellos,
‫y aquí están.
‫Y en realidad tienen todos los
‫datos, por lo que no solo los que definimos, sino que
‫de hecho no los tienen.
‫Entonces, realmente solo tenemos el nombre y la duración, por
‫lo que la duración, el nombre y todos los
‫demás están indefinidos.
‫Entonces eso es solo porque limitamos una consulta solo a
‫estos dos campos, ¿recuerdas?
‫Ahora, lo que también quería mostrarles es aquí en
‫las características, podemos echar un vistazo a nuestra consulta y aquí tenemos la propiedad
‫de los campos, por ejemplo, donde vemos la duración establecida
‫en uno y el nombre establecido en uno.
‫Y esos son exactamente los dos nombres que seleccionamos.
‫También tenemos estas opciones
‫aquí, que en este punto están configuradas para crear menos uno.
‫Y eso viene de aquí.
‫Así que esto de aquí.
‫Entonces, básicamente, lo que este método aquí, este método
‫de ordenación va a hacer es agregar esta propiedad de ordenación aquí a
‫estas opciones, ¿de acuerdo?
‫Y luego también tenemos limit and skip que, por supuesto, vienen
‫aquí desde la página ocho.
‫¿Okey?
‫Así que pensé que esto también era
‫un poco interesante y sí, nuestro código ahora está realmente arreglado y sigamos
‫ejecutando esto.
‫Y entonces ahora deberíamos tener nuestro resultado correcto.
‫Ahora aquí dice que no pudimos obtener ninguna respuesta, y
‫eso se debe a que tardamos demasiado en arreglar nuestro código.
‫Entonces obtuvimos un error al conectarnos.
‫Pero si ahora lo volvemos a
‫enviar, y ahora lo hacemos más rápido.
‫O en realidad podríamos eliminar nuestro punto de interrupción por completo.
‫Así que sigamos
‫funcionando, retrocedamos y ahora obtenemos la duración
‫y el nombre también.
‫Eso es porque simplemente arreglamos nuestro
‫código usando el depurador NDB.
‫Que bien.
‫Es una herramienta realmente asombrosa y útil
‫que seguiremos usando durante el resto
‫del curso.
‫Quizás no siempre, a veces es más rápido lanzar un
‫registro de salida de la consola.
‫Pero realmente, en algunos casos más complicados, me gusta
‫usar este tipo de herramienta.