‫Instructeur : Dans cette
‫vidéo, nous allons apprendre à déboguer Node. JS car, avouons-le, il y aura
‫toujours des bugs dans notre code, peu importe à quel
‫point nous sommes prudents.
‫Et c'est donc bien d'avoir un outil pour nous
‫aider à déboguer notre code.
‫Maintenant, il ne s'agit pas vraiment de gérer les erreurs avec Express,
‫mais j'ai pensé que c'était un bon point dans
‫le cours pour vous présenter un outil de
‫débogage que nous pourrions ensuite utiliser tout au long du cours.
‫Et il existe différentes manières de déboguer Node. code JS.
‫Par exemple, nous pourrions utiliser le code VS pour cela.
‫Mais, en fait, Google a récemment publié un outil incroyable
‫que nous pouvons utiliser pour déboguer et qui s'appelle NDB, d'accord ?
‫Passons donc à notre autre terminal ici,
‫puis installons NDB.
‫Et NDB, qui signifie débogueur de nœud, n'est
‫en fait qu'un package NPM.
‫Donc, NPM installe NDB.
‫D'accord, et vous devriez
‫ensuite l'installer en tant que package global, d'accord ?
‫Et si vous utilisez un Mac, vous aurez peut-être besoin d'autorisations globales.
‫Alors écrivez simplement sudo ici devant.
‫Ou si vous n'êtes pas du tout capable de l'installer
‫globalement, vous pouvez toujours l'installer localement en tant
‫que dépendance mortelle.
‫Alors juste comme ça, d'accord ?
‫Quoi qu'il en soit, s'il vous plaît allez-y et installez cet outil maintenant.
‫Je ne vais
‫pas le faire car cela peut être un téléchargement assez lourd, et
‫cela prend un peu trop de temps maintenant.
‫Quoi qu'il en soit, dès que l'outil est installé,
‫passons au package. jason et
‫ajoutez un nouveau script ici, d'accord ?
‫Et je vais appeler ça un débogage.
‫D'accord?
‫Et donc la commande que nous
‫voulons exécuter ici est simplement NDB, donc le débogueur de
‫notes, puis à nouveau notre point
‫d'entrée, So, server. js d'accord?
‫Et maintenant, cela fonctionnera, que
‫vous ayez installé NDB localement ou globalement.
‫Très bien, alors exécutons maintenant le script.
‫Et pour que cela
‫fonctionne, nous devons en fait terminer ce processus
‫car il va également démarrer
‫le serveur et il essaiera donc de le faire
‫sur le même port et cela
‫ne fonctionnera bien sûr pas.
‫Nous devons donc terminer
‫celui qui est actuellement en cours d'exécution,
‫puis à partir de là,
‫nous pouvons exécuter
‫le débogage de
‫NPM.
‫Vous verrez donc l'icône Chrome ici et aussi
‫ici dans la barre de menu,
‫mais en réalité, il ne s'agit que du débogueur de notes.
‫Alors qu'avons-nous ici?
‫Eh bien sur le côté gauche, nous avons notre système de fichiers complet.
‫Nous avons également accès à nos scripts NPM ici
‫que nous pouvons réellement exécuter à partir d'ici.
‫Nous avons également une console et nous avons
‫donc ici nos sorties habituelles avec l'application en cours d'exécution
‫et la connexion à la
‫base de données et nous avons également les onglets performances
‫et mémoire, que nous n'utiliserons pas.
‫Très bien, maintenant, si vous êtes
‫familier avec le processus de
‫débogage général, tout cela vous sera un peu familier.
‫D'accord, mais si ce n'est pas le cas, ne vous inquiétez
‫pas, je vais vous montrer quelques techniques
‫tout au long de cette vidéo.
‫Très bien, de toute façon, ouvrons maintenant notre serveur. js.
‫Et une chose qui est vraiment incroyable,
‫c'est que nous pouvons réellement éditer nos fichiers ici, donc
‫directement dans ce débogueur.
‫Ainsi, par exemple, disons que nous trouvons un bogue
‫et que nous voulons le corriger immédiatement.
‫Nous pouvons le faire ici dans le débogueur et
‫il mettra ensuite à jour le code d'origine.
‫Alors juste pour
‫le tester, ajoutons juste un commentaire ici.
‫Alors, testez puis appuyez sur la commande ou le contrôle s pour enregistrer, puis lorsque
‫nous revenons à notre code et ouvrons
‫le serveur. js là,
‫vous verrez que le commentaire est en fait ici.
‫D'accord?
‫Et si nous le
‫supprimons maintenant d'ici,
‫le sauvegardons et revenons
‫au débogueur, alors il disparaîtra également d'ici.
‫D'accord, mais maintenant à propos du débogage lui-même.
‫Je dirais que l'aspect fondamental
‫du débogage est de définir des points d'arrêt.
‫Les points d'arrêt sont donc essentiellement des points dans notre
‫code que nous pouvons définir ici dans
‫le débogueur, où notre code s'arrêtera alors de s'exécuter.
‫Il se figera essentiellement dans le temps
‫et nous pourrons alors jeter un œil à toutes nos variables.
‫D'accord, ce sera donc extrêmement utile pour
‫trouver des bugs.
‫Maintenant, pour le moment, il n'y a pas
‫de bogue ici, mais ajoutons quand même un point d'arrêt.
‫Et je vais ajouter ce point d'arrêt ici dans cette ligne 21.
‫Alors je clique ici sur cette
‫ligne et puis vous voyez ce marqueur vert, d'accord ?
‫Et cela signifie que le code s'arrêtera à
‫ce stade lorsque nous l'exécuterons, d'accord ?
‫Et vous pouvez le voir ici
‫sur le côté droit de l'onglet des points d'arrêt ici aussi.
‫Maintenant, notre application est déjà
‫en cours d'exécution à
‫ce stade et attend essentiellement que les demandes arrivent.
‫Et donc ce que nous
‫devons faire ici est de faire un clic droit puis de cliquer sur exécuter ce script.
‫D'accord, et donc cela exécutera à
‫nouveau le script ici.
‫D'accord?
‫Et donc on y va.
‫Donc, vous voyez ici sur le
‫côté droit, qu'il est dit en pause sur le point
‫d'arrêt et donc tout le code qui est au-dessus de ce point
‫d'arrêt ici a déjà été exécuté à ce stade.
‫Et donc nous pouvons maintenant jeter un œil aux variables.
‫Par exemple, nous pouvons survoler cette variable de
‫port et nous voyons qu'elle est définie sur 3 000.
‫Et aussi en fait, touchez cet endroit ici
‫dans le code ici, d'accord.
‫Et puis la troisième façon de le voir est
‫ici sur le côté droit.
‫Nous avons donc essentiellement quelques onglets ici pour les processus
‫de nœud, la surveillance, la pile d'appels, ce qui
‫n'est pas vraiment important pour le moment.
‫La portée, et donc la portée, c'est là où se trouvent
‫toutes nos variables, d'accord ?
‫Et donc ici encore, vous avez le port défini sur 3 000.
‫D'accord, et ici vous pouvez également
‫voir les cinq variables auxquelles nous avons accès
‫dans tous les modules.
‫Vous vous souvenez de la conférence sur les modèles ?
‫Nous avons donc le nom du
‫répertoire, nous avons le nom du fichier, nous avons la fonction
‫require, nous avons le module et nous avons l'exportation.
‫N'oubliez donc pas que ce sont
‫les cinq variables disponibles dans chaque module.
‫Et en fait, lorsque nous exécutons un
‫code comme celui-ci dans le débogueur, nous pouvons voir que tout notre
‫code est en fait enveloppé dans cette fonction.
‫Droit?
‫C'est donc cette fonction wrapper qui
‫nous donne accès à ces cinq variables.
‫Très bien, ensuite, je veux aussi jeter un œil à
‫notre variable d'application, donc essentiellement l'application Express que nous
‫exportons à partir de l'application. js, souviens-toi de ça.
‫Et voici vraiment une tonne de trucs
‫mais ce que je trouve intéressant,
‫c'est de jeter un œil à ce routeur ici.
‫D'accord, et donc dans le routeur, nous avons alors une pile.
‫D'accord, et alors ouvrons cela un peu et
‫donc cette pile ici est
‫essentiellement la pile de middleware que nous avons dans notre application.
‫D'accord, par exemple, nous avons notre jsonParser ici,
‫nous avons le code qui sert les fichiers statiques.
‫Jetez un œil à cela ici dans l'application. js donc cet
‫express. statique.
‫Nous avons également l'enregistreur ici
‫qui provient de l'utilisation de Morgan.
‫Ensuite, vous avez ces deux fonctions middleware
‫suivantes, donc
‫ces deux ici, qui sont anonymes, donc celle-ci et celle-ci et
‫peut-être que nous pouvons les examiner.
‫Mais pas vraiment.
‫D'accord, ce n'est pas grave.
‫Donc, c'est vraiment juste pour la curiosité et pour
‫vous montrer que nous
‫pouvons réellement jeter un œil à notre pile de middleware, d'accord ?
‫Ensuite, nous avons enfin nos deux routeurs.
‫D'accord?
‫Donc, nous avons le routeur, et vous voyez ici en fait
‫la route pour laquelle il s'applique.
‫Donc api/v1/tours c'est bien et je trouve ça vraiment intéressant.
‫Bien sûr, nous avons toujours les utilisateurs ici aussi.
‫Et ainsi, avec cela, vous pouvez vraiment voir comment
‫l'application Express fonctionne dans les coulisses.
‫D'accord?
‫Alors fermons tout ça.
‫Et l'autre chose que je voulais vous
‫montrer est ici dans les
‫variables globales car ici nous avons la variable de processus ou
‫au moins nous devrions l'avoir quelque part ici.
‫Ouais, donc en effet le voici.
‫Nous avons donc ici la variable
‫de processus qui est mémorisable, disponible partout.
‫Et c'est pourquoi on l'appelle ici une variable globale.
‫Ensuite, nous avons un processus. env et
‫de se rappeler que c'est
‫là que toutes nos variables d'environnement sont stockées.
‫Et donc en effet ici, nous avons notre chaîne de base
‫de données, nous avons la base de données locale, le mot de
‫passe et vraiment toutes les autres variables d'environnement que nous
‫avons définies dans notre configuration. n fichier.
‫D'accord?
‫Donc des choses vraiment intéressantes que nous pouvons jeter un œil ici.
‫Mais maintenant, continuons notre débogage.
‫D'accord?
‫Nous avons donc arrêté le code, nous l'avons gelé
‫dans le temps ici à ce stade, donc à la ligne 21.
‫D'accord, et maintenant nous pouvons cliquer ici sur ce bouton,
‫afin de continuer à exécuter le code.
‫Et puisque nous n'avons plus
‫de points d'arrêt, le code ne s'arrêtera
‫alors plus et finira en gros de s'exécuter.
‫Alors faisons-le.
‫Et maintenant, notre application est vraiment en cours d'exécution.
‫Jetons un coup d'oeil à cela.
‫Dans la console, d'accord ?
‫Donc, l'application s'exécute sur le port 3 000 et
‫la connexion DB est réussie, bien sûr.
‫Que s'est-il passé ici ?
‫Maintenant, très bien,
‫alors faisons maintenant rapidement une requête ici.
‫Donc simplement un pour /tours et maintenant
‫nous avons tous ces déchets
‫ici et je vais m'en occuper dans une seconde.
‫Très bien, et si vous revenez maintenant à notre console
‫ici, alors bien sûr, nous avons tout le code que nous avions auparavant.
‫Bonjour du middleware et
‫ensuite combien de temps la requête a pris.
‫Très bien, et maintenant avant de faire quoi que
‫ce soit d'autre, débarrassons-nous en fait de ces tournées indésirables.
‫Je vais donc le recharger ici,
‫et je suppose que ce sera quelque part ici à la fin.
‫Alors, testez n'importe quoi ici.
‫Alors débarrassons-nous en.
‫C'est la visite secrète et je veux vraiment la garder ici.
‫Mais tout à partir de maintenant nous ne voulons plus.
‫Et donc
‫oui, alors maintenant nous sommes de retour à n'avoir
‫que 10 tournées, comme avant.
‫Quoi qu'il en soit, définissons maintenant un point d'arrêt
‫dans la fonction qui gère cet itinéraire.
‫D'accord, et donc nous arrivons à notre dossier de contrôleurs et
‫là nous avons le contrôleur de tournée.
‫D'accord?
‫Et puis la fonction de gestionnaire est d'obtenir toutes les visites.
‫Donc, pour l'instant, tout
‫ce que je voulais faire, c'est simplement définir
‫un point d'arrêt ici afin que nous puissions voir à
‫quoi ressemblent ces variables une fois la requête terminée.
‫Donc, ce code ici obtiendra nos visites et
‫nous arrêterons ensuite
‫le code avant de l'envoyer en tant que réponse.
‫D'accord, et donc tout ce que nous avons à faire est de faire
‫la demande car cela déclenchera alors cette fonction.
‫Droit?
‫Et donc puisque nous avons un point d'arrêt, nous
‫revenons automatiquement à cette fenêtre ici, et au point
‫où le code s'est arrêté.
‫Alors, quel genre de variables avons-nous ici ?
‫Vous voyez donc que nous avons la demande et une réponse,
‫et nous avons aussi la variable
‫de fonctionnalités, et les visites, bien sûr.
‫Voyons donc d'abord la requête.
‫Et là encore, vous voyez qu'on a vraiment toutes
‫sortes de trucs.
‫Donc nous avons, baseurl, nous avons la méthode, nous avons
‫par exemple, request. query, qui est vide pour
‫le moment car nous n'avons pas passé
‫de chaîne de
‫requête, mais vous voyez qu'elle est vraiment déjà là.
‫D'accord, et vous commencez donc à voir à
‫quel point cela peut être pratique pour déboguer notre code.
‫Donc en gros pour geler notre code dans le temps au lieu
‫d'avoir à faire toutes ces consoles. journaux que nous avions l'habitude de
‫faire jusqu'à ce point.
‫Donc généralement, lorsque nous voulions jeter un œil à la requête par
‫exemple, nous faisions un tas de console. logs et utilisez-le pour
‫découvrir un bogue au cas où quelque chose ne
‫fonctionnait pas.
‫D'accord, mais maintenant nous avons cet outil incroyable qui peut nous
‫aider à éviter toutes ces consoles. journaux par
‫exemple.
‫Ensuite, nous avons aussi la réponse bien sûr.
‫Et encore une fois, vous voyez toutes ces propriétés et méthodes qui sont
‫là, et elles ne sont pas vraiment intéressantes
‫pour nous maintenant.
‫Ce que je voulais vous montrer, c'est bien sûr qu'à
‫ce stade, nous avons déjà les tournées, d'accord ?
‫Nous avons donc neuf tournées, alors examinons-les.
‫Et ça a l'air un peu bizarre ici, donc pour
‫avoir accès aux valeurs réelles, nous devons cliquer ici, d'accord, donc c'est
‫un peu bizarre.
‫Mais ça marche bien sur.
‫Et donc vous voyez qu'en fait nos visites sont déjà
‫là et bien sûr les fonctionnalités aussi.
‫Vous voyez donc ici que les fonctionnalités sont une
‫instance de la classe de fonctionnalités API telle que nous l'avons définie.
‫Et là-dedans, nous avons la requête et la chaîne de requête.
‫Génial, c'est ainsi que nous examinons toutes les variables.
‫Et c'est ainsi que fonctionnent les parties les
‫plus importantes du débogueur.
‫Maintenant, afin d'en savoir un peu plus sur
‫le processus de débogage lui-même, introduisons un très petit bogue
‫dans notre code, puis examinons comment nous pouvons
‫utiliser ces outils que nous avons ici pour
‫approfondir notre code.
‫Je ne vais donc pas
‫reprendre l'exécution ignorée afin d'exécuter le reste du code, d'accord ?
‫Cela devrait donc être fait maintenant.
‫Alors maintenant, ici, nous avons toutes les réponses.
‫Donc vous voyez que cela a pris tout ce
‫temps ici, donc trois minutes et 29 secondes, mais
‫c'est juste parce que nous avons suspendu l'exécution pendant
‫si longtemps.
‫D'accord.
‫Venons-en maintenant à notre code ici.
‫Fermons ce dont nous n'avons plus besoin.
‫Donc en fait, dans notre fichier de fonctionnalités API, je veux
‫introduire un petit bug ici dans les champs de limite.
‫Supposons donc que nous essayions d'implémenter cette méthode
‫ici, mais au lieu de nous joindre à un espace ici,
‫nous avons oublié de la mettre ici.
‫Et donc disons simplement que nous nous sommes joints
‫sans aucun espace, et cela nous donnerait alors un résultat bizarre, non?
‫Alors testons-le réellement.
‫Alors disons
‫des champs et qu'on ne voulait
‫que le nom et la durée, non ?
‫Maintenant, avant de pouvoir envoyer cette demande, supprimons le
‫point d'arrêt ici.
‫D'accord?
‫Envoyé la demande, et maintenant nous n'obtenons pas le
‫nom et la durée.
‫Imaginons donc que c'est notre bogue
‫maintenant et nous essayons maintenant de comprendre pourquoi cela ne fonctionne pas.
‫D'accord?
‫Passons donc à notre débogueur.
‫Et nous savons que l'erreur doit probablement
‫se trouver quelque part dans notre méthode de champs limites.
‫Et donc arrêtons l'exécution du code à ce
‫stade, d'accord ?
‫Parce que c'est là que cette méthode sera appelée et donc
‫à partir de là, nous pouvons entrer cette fonction
‫pour cette méthode.
‫D'accord?
‫Alors lançons cette requête maintenant,
‫et maintenant nous retournons automatiquement à notre débogueur.
‫Donc, à ce stade, cette ligne et cette ligne et
‫cette ligne de code ont déjà été exécutées, et utilisons donc maintenant
‫l'outil pas à pas, d'accord ?
‫Quelle étape fera, c'est qu'il exécutera essentiellement la
‫prochaine ligne de code.
‫Et dans ce cas, ce sera à l'intérieur
‫de la méthode des champs limites.
‫Alors faites un pas, et il passera alors directement à cette fonction.
‫Bon alors jetons un coup d'œil à ce que nous avons ici.
‫Par exemple ceci. la chaîne de requête est la durée de
‫la virgule du nom, donc c'est correct, n'est-ce pas ?
‫Bon, passons à la ligne suivante.
‫Très bien et c'est donc là que cette
‫opération se déroule réellement.
‫Ensuite, ensuite.
‫Jetons un coup d'œil à nos variables ici.
‫Et donc ici, nous voyons maintenant le champ, et nous avons donc ici notre bogue.
‫D'accord?
‫Le problème est donc, bien sûr, que nous n'avons pas
‫d'espace entre le nom et la durée.
‫Et c'est pour ça que ça ne marche pas.
‫Donc les champs sont bien sûr définis ici, et comme
‫ça on peut trouver notre bug et le corriger tout de suite.
‫N'oubliez donc pas que l'étape ajoutée que
‫nous faisons ici se reflète immédiatement dans le code.
‫Alors
‫faites-lui une sauvegarde, et il recommencera.
‫Donc je peux continuer à marcher.
‫Et maintenant, les champs sont corrects.
‫Donc, nommez la durée de l'espace.
‫Puis la ligne de code suivante.
‫Et maintenant, nous entrons dans la méthode select sur la requête.
‫Mais cela ne nous intéresse pas du tout, nous pouvons
‫donc dire "sortir de la fonction actuelle. " D'accord?
‫Donc, cette sélection que nous pensions exécuter cette
‫fonction ici, d'accord ?
‫Mais bien sûr, cela ne nous intéressait pas,
‫alors nous l'avons simplement quitté et sommes passés à la ligne suivante.
‫Alors maintenant, nous
‫devons retourner ceci, la ligne suivante, et encore.
‫Alors maintenant, nous sommes de retour là où nous étions, mais dans la ligne suivante.
‫Alors continuons à faire ça.
‫Nous en sommes maintenant à
‫la page huit, mais celle-ci ne nous intéresse pas
‫vraiment, et sortons donc à nouveau de la fonction actuelle.
‫Et maintenant, nous sommes ici à la définition des tournées.
‫Ce qui n'est pas encore fait à ce stade.
‫Et donc disons encore étape.
‫Et maintenant, à ce stade, nos tournées devraient être définies.
‫Très bien, nous avons nos neuf tournées ici.
‫Jetons un coup d'œil à
‫eux, et les voici.
‫Et en fait, ils ont toutes les
‫données, donc pas seulement celle que nous avons définie, mais en fait,
‫ce n'est pas le cas.
‫Donc, nous n'avons vraiment que le nom et la durée,
‫donc la durée, le nom et tous les
‫autres sont indéfinis.
‫C'est simplement parce que nous avons limité une requête à ces deux
‫champs, vous vous souvenez ?
‫Maintenant, ce que je voulais aussi vous montrer, c'est ici
‫dans les fonctionnalités, nous pouvons jeter un œil à notre requête et ici nous avons
‫la propriété field par exemple où nous voyons la durée définie
‫sur un et le nom défini sur un.
‫Et ce sont donc exactement les deux noms que nous avons sélectionnés.
‫Nous avons également ces options
‫ici, qui sont à ce stade définies pour le créer moins un.
‫Et donc ça vient d'ici.
‫Alors ça ici.
‫Donc, fondamentalement, ce que cette méthode ici, cette méthode
‫de tri va faire, c'est qu'elle ajoutera cette propriété de tri ici à
‫ces options, d'accord ?
‫Et puis nous avons aussi la limite et le saut qui viennent bien
‫sûr ici de la page huit.
‫D'accord?
‫J'ai donc pensé que c'était aussi intéressant
‫et oui, donc notre code est maintenant corrigé et continuons à
‫l'exécuter.
‫Et donc nous devrions maintenant avoir notre résultat correct.
‫Maintenant, ici, il est dit que nous n'avons pu obtenir aucune réponse,
‫et c'est parce que nous avons mis trop de temps à corriger notre code.
‫Nous avons donc une erreur de connexion.
‫Mais si nous l'envoyons maintenant à
‫nouveau, et maintenant nous le faisons plus rapidement.
‫Ou en fait, nous pourrions supprimer complètement notre point d'arrêt.
‫Alors continuons à tourner,
‫revenons en arrière et maintenant, en effet, nous obtenons
‫également la durée et le nom.
‫C'est parce que nous venons de corriger notre
‫code à l'aide du débogueur NDB.
‫Tellement bon.
‫C'est un outil vraiment incroyable et utile que
‫nous continuerons à utiliser tout au long
‫du cours.
‫Peut-être pas toujours, parfois il est plus rapide de simplement ajouter
‫un journal de sortie de console.
‫Mais vraiment, dans certains cas plus compliqués, j'aime
‫utiliser ce genre d'outil.