‫Kursleiter: In diesem Video
‫lernen wir das Debuggen von Node. JS, weil, seien wir ehrlich, es
‫wird immer einige Fehler in unserem Code geben, egal
‫wie vorsichtig wir sind.
‫Daher ist es gut, ein Tool zu haben, das uns
‫beim Debuggen unseres Codes hilft.
‫Es geht hier nicht wirklich um die Fehlerbehandlung mit Express, aber
‫ich dachte, dies wäre ein guter Punkt im
‫Kurs, um Ihnen ein Debugging-Tool vorzustellen,
‫das wir dann im weiteren Verlauf des Kurses verwenden könnten.
‫Und es gibt verschiedene Möglichkeiten zum Debuggen von Node. JS-Code.
‫Zum Beispiel könnten wir dafür VS-Code verwenden.
‫Aber tatsächlich hat Google vor kurzem ein erstaunliches Tool veröffentlicht,
‫das wir zum Debuggen verwenden können, das sich NDB nennt, in Ordnung?
‫Gehen wir also zu unserem anderen Terminal hier über
‫und installieren Sie dann NDB.
‫Und NDB, was für Node Debugger steht,
‫ist eigentlich nur ein NPM-Paket.
‫Also NPM installiert NDB.
‫In Ordnung, und Sie
‫sollten es dann als globales Paket installieren, in Ordnung?
‫Und wenn Sie einen Mac verwenden, benötigen Sie möglicherweise globale Berechtigungen.
‫Also einfach Sudo hier vorne schreiben.
‫Oder wenn Sie es überhaupt nicht global installieren können,
‫können Sie es immer nur lokal als
‫Todesabhängigkeit installieren.
‫Also einfach so, in Ordnung?
‫Wie auch immer, bitte fahren Sie fort und installieren Sie dieses Tool jetzt.
‫Ich werde
‫es nicht tun, weil es ein ziemlich schwerer Download sein
‫kann, und das dauert jetzt etwas zu lange.
‫Wie auch immer, sobald Sie das Tool installiert haben, gehen wir
‫zum Paket über. jason und
‫füge hier ein neues Skript hinzu, in Ordnung?
‫Und das nenne ich mal Debug.
‫Okay?
‫Der Befehl, den wir hier
‫ausführen möchten, ist also einfach NDB, also der
‫Notiz-Debugger und dann wieder unser
‫Einstiegspunkt, also Server. js Okay?
‫Und jetzt wird das funktionieren, egal
‫ob Sie NDB lokal oder global installiert haben.
‫In Ordnung, also lassen Sie uns jetzt das Skript ausführen.
‫Und damit das
‫funktioniert, müssen wir diesen Prozess tatsächlich abschließen,
‫da er im Grunde auch
‫den Server startet und dann versucht, dies auf
‫demselben Port zu tun, und
‫das wird natürlich nicht funktionieren.
‫Wir müssen also das derzeit laufende beenden
‫und dann können wir von hier aus NPM ausführen
‫debug ausführen.
‫In
‫Ordnung, und jetzt sollte sich
‫ein neues Chrome-Fenster öffnen, also
‫ein sogenanntes kopfloses Chrome, aber es
‫ist kein echtes Chrome.
‫Sie sehen das Chrome-Symbol hier unten
‫und auch hier in
‫der Menüleiste, aber das ist wirklich nur der Notiz-Debugger.
‫Was haben wir also hier?
‫Auf der linken Seite haben wir unser komplettes Dateisystem.
‫Wir haben hier auch Zugriff auf unsere NPM-Skripte,
‫die wir von hier aus ausführen können.
‫Wir haben auch eine Konsole und hier
‫haben wir unsere üblichen Ausgaben mit der laufenden
‫App und der Datenbankverbindung
‫und wir haben auch die Registerkarten Leistung und Speicher,
‫die wir nicht verwenden werden.
‫Alles klar, wenn Sie mit
‫dem allgemeinen Debugging-Prozess vertraut
‫sind, wird Ihnen das alles irgendwie bekannt vorkommen.
‫Alles klar, aber wenn Sie sich keine Sorgen
‫machen, werde ich Ihnen in diesem
‫Video ein paar Techniken zeigen.
‫Okay, trotzdem öffnen wir jetzt unseren Server. js.
‫Und wirklich erstaunlich ist, dass
‫wir unsere Dateien hier, also direkt in diesem
‫Debugger, bearbeiten können.
‫Nehmen wir zum Beispiel an, wir finden einen
‫Fehler und wollen ihn dann sofort beheben.
‫Das können wir direkt hier im Debugger machen
‫und dann wird der Originalcode aktualisiert.
‫Um es zu testen,
‫fügen wir einfach hier unten einen Kommentar hinzu.
‫Also, testen Sie, dann drücken Sie Command oder Control s, um zu speichern, und dann,
‫wenn wir zu unserem Code zurückkehren und
‫den Server öffnen. js dort
‫sehen Sie, dass der Kommentar tatsächlich hier ist.
‫Okay?
‫Und wenn wir es jetzt
‫von hier löschen,
‫speichern und zurück zum
‫Debugger, dann ist es auch von hier weg.
‫Okay, aber jetzt zum Debugging selbst.
‫Ich würde sagen, dass der
‫grundlegende Aspekt des Debuggens darin besteht, Breakpoints zu setzen.
‫Breakpoints sind also im Grunde Punkte in unserem Code, die
‫wir hier im Debugger definieren können,
‫an denen unser Code dann aufhört zu laufen.
‫Es wird im Grunde mit der
‫Zeit einfrieren und wir können uns dann alle unsere Variablen ansehen.
‫Okay, das wird dann sehr nützlich sein, um
‫einige Fehler zu finden.
‫Im Moment gibt es hier keinen
‫Fehler, aber fügen wir noch einen Haltepunkt hinzu.
‫Und ich werde diesen Breakpoint hier in dieser Zeile 21 hinzufügen.
‫Also klicke ich hier auf diese
‫Zeile und dann siehst du diese grüne Markierung, okay?
‫Das bedeutet, dass der Code an dieser Stelle
‫stoppt, wenn wir ihn ausführen, okay?
‫Und Sie können es hier
‫auf der rechten Seite auch hier auf der Registerkarte Breakpoints sehen.
‫Nun, unsere Anwendung läuft zu
‫diesem Zeitpunkt tatsächlich
‫bereits und wartet im Grunde auf Anfragen.
‫Was wir hier tun müssen,
‫ist, mit der rechten Maustaste zu klicken und dann auf Dieses Skript ausführen zu klicken.
‫Okay, und damit wird das Skript dann
‫im Grunde wieder hier ausgeführt.
‫Gut?
‫Und so geht's.
‫Sie sehen also hier auf
‫der rechten Seite, dass am Breakpoint pausiert steht
‫und somit der gesamte Code, der hier über diesem Breakpoint
‫liegt, an dieser Stelle bereits ausgeführt wurde.
‫Und so können wir uns jetzt die Variablen anschauen.
‫Zum Beispiel können wir diese Portvariable mit der
‫Maus bewegen und sehen, dass sie auf 3.000 gesetzt ist.
‫Und hier im Code auch tatsächlich auf
‫diese Stelle getroffen, in Ordnung.
‫Und dann ist die dritte Möglichkeit, es zu sehen,
‫hier auf der rechten Seite.
‫Wir haben hier also ein paar grundsätzliche Registerkarten,
‫also Node-Prozesse, die Uhr, den Call-Stack, was
‫im Moment nicht wirklich wichtig ist.
‫Der Geltungsbereich, und der Geltungsbereich ist der Ort, an dem sich
‫alle unsere Variablen befinden, okay?
‫Und so haben Sie auch hier den Port auf 3.000 gesetzt.
‫Okay, und hier sehen Sie auch
‫die fünf Variablen, auf die wir in
‫allen Modulen Zugriff haben.
‫Erinnern Sie sich noch an die Modellvorlesung?
‫Wir haben also den Verzeichnisnamen,
‫wir haben den Dateinamen, wir haben die Anforderungsfunktion, wir haben
‫das Modul und wir haben den Export.
‫Denken Sie also daran, dass dies die fünf
‫Variablen sind, die in jedem einzelnen Modul verfügbar sind.
‫Und tatsächlich, wenn wir einen solchen
‫Code im Debugger ausführen, können wir sehen, dass unser gesamter
‫Code tatsächlich in diese Funktion eingeschlossen ist.
‫Rechts?
‫Also diese Wrapper-Funktion, die uns
‫Zugriff auf diese fünf Variablen gibt.
‫Alles klar, als nächstes möchte ich auch einen Blick auf
‫unsere App-Variable werfen, also im Grunde die Express-Anwendung, die
‫wir aus der App exportieren. js, denk daran.
‫Und hier ist wirklich eine Menge Zeug,
‫aber was ich interessant finde, ist,
‫einen Blick auf diesen Router hier zu werfen.
‫Okay, und im Router haben wir dann Stack.
‫Okay, lassen Sie uns das ein wenig
‫öffnen, und dieser Stack hier
‫ist im Grunde der Middleware-Stack, den wir in unserer Anwendung haben.
‫Okay, zum Beispiel haben wir hier unseren jsonParser,
‫wir haben den Code, der die statischen Dateien bereitstellt.
‫Schau dir das hier in der App an. js so
‫ausdrücken. statisch.
‫Wir haben hier auch den
‫Logger, der hier von Morgan verwendet wird.
‫Dann haben Sie diese beiden nächsten
‫Middleware-Funktionen, also
‫diese beiden hier, die anonym sind, also diese und diese und
‫vielleicht können wir sie uns ansehen.
‫Aber nicht wirklich.
‫Okay, es spielt keine Rolle.
‫Das ist also wirklich nur aus Neugier
‫und zeigt Ihnen, dass
‫wir tatsächlich einen Blick auf unseren Middleware-Stack werfen können, okay?
‫Dann endlich haben wir unsere beiden Router.
‫Okay?
‫Wir haben also den Router, und Sie sehen hier tatsächlich
‫die Route, für die er gilt.
‫Also api/v1/tours richtig und so finde ich das wirklich interessant.
‫Natürlich haben wir auch noch die User hier.
‫Und damit kann man wirklich einen Blick darauf werfen, wie
‫die Express-Anwendung hinter den Kulissen funktioniert.
‫Okay?
‫Also lass uns das alles schließen.
‫Und das andere, was ich Ihnen
‫zeigen wollte, ist hier
‫in den globalen Variablen, denn hier haben wir die
‫Prozessvariable oder sollten sie zumindest hier irgendwo haben.
‫Ja, also hier ist es tatsächlich.
‫Hier haben wir also die Prozessvariable, die
‫man sich merken kann und die überall verfügbar ist.
‫Deshalb wird sie hier als globale Variable bezeichnet.
‫Dann haben wir dort den Prozess. env
‫und denken Sie daran,
‫dass hier alle unsere Umgebungsvariablen gespeichert sind.
‫Hier haben wir also tatsächlich unseren Datenbankstring,
‫die lokale Datenbank, das Passwort und wirklich alle
‫anderen Umgebungsvariablen, die wir in unserer
‫Konfiguration definiert haben. n-Datei.
‫Gut?
‫Also wirklich interessante Sachen, die wir uns hier anschauen können.
‫Aber jetzt fahren wir mit unserem Debugging fort.
‫Okay?
‫Also haben wir den Code gestoppt, wir haben
‫ihn hier an dieser Stelle, also in Zeile 21, rechtzeitig eingefroren.
‫Okay, und jetzt können wir hier auf diese Schaltfläche
‫klicken, um den Code tatsächlich weiter auszuführen.
‫Und da wir keine Breakpoints
‫mehr haben, wird der Code dann nicht
‫mehr brechen und im Grunde die Ausführung beenden.
‫Also machen wir das.
‫Und jetzt läuft unsere Anwendung wirklich.
‫Schauen wir uns das an.
‫In der Konsole, okay?
‫Also App läuft auf Port 3.000
‫und DB-Verbindung natürlich erfolgreich.
‫Was ist hier passiert?
‫Nun gut, also
‫lass uns jetzt schnell eine Anfrage hier stellen.
‫Also einfach eine für /tours und jetzt
‫haben wir den ganzen
‫Kram hier und ich werde mich gleich darum kümmern.
‫In Ordnung, und wenn Sie jetzt hier zu unserer
‫Konsole zurückkehren, haben wir natürlich den gesamten Code, den wir zuvor hatten.
‫Hallo von der Middleware
‫und dann wie lange die Abfrage eigentlich gedauert hat.
‫Alles klar, und bevor wir noch
‫etwas tun, sollten wir diese Junk-Touren tatsächlich loswerden.
‫Also werde ich es hier neu
‫laden, und ich denke, es wird irgendwo hier am Ende sein.
‫Also, teste was auch immer hier.
‫Also lass es uns loswerden.
‫Dies ist die geheime Tour und ich möchte sie eigentlich hier behalten.
‫Aber alles ab jetzt wollen wir nicht mehr.
‫Und so
‫so ja, jetzt haben wir wieder nur 10
‫Touren, genau wie zuvor.
‫Wie auch immer, setzen wir nun tatsächlich einen Breakpoint
‫in der Funktion, die diese Route verarbeitet.
‫Okay, und so kommen wir zu unserem Controller-Ordner
‫und dort haben wir den Tour-Controller.
‫Okay?
‫Und dann ist die Handler-Funktion dies, um alle Touren zu erhalten.
‫Im Moment wollte
‫ich nur einen Breakpoint hier setzen,
‫damit wir uns ansehen können, wie diese Variablen
‫aussehen, nachdem die Abfrage bereits abgeschlossen ist.
‫Dieser Code hier wird also unsere Touren erhalten und
‫wir werden den Code
‫dann im Grunde stoppen, bevor wir ihn tatsächlich als Antwort senden.
‫Okay, und wir müssen also nur die Anfrage ausführen, da
‫dies dann diese Funktion auslöst.
‫Rechts?
‫Da wir also einen Unterbrechungspunkt haben, kehren wir automatisch zu
‫diesem Fenster hier zurück und zu dem Punkt, an
‫dem der Code aufgehört hat.
‫Also, was für Variablen haben wir hier?
‫Sie sehen also, dass wir die Anfrage und eine Antwort
‫haben, und wir haben auch
‫die Funktionen variabel und natürlich die Touren.
‫Schauen wir uns also zunächst die Anfrage an.
‫Und hier sieht man wieder, dass wir wirklich alle
‫möglichen Sachen haben.
‫Wir haben also baseurl, wir haben die Methode, wir haben
‫zum Beispiel Request. query, die im Moment
‫leer ist, weil wir keine Abfragezeichenfolge
‫übergeben haben, aber
‫Sie sehen, dass sie wirklich schon da ist.
‫Okay, und jetzt sehen Sie, wie
‫praktisch dies sein kann, um unseren Code zu debuggen.
‫Im Grunde also, um unseren Code rechtzeitig einzufrieren, anstatt all
‫diese Konsolen ausführen zu müssen. Protokolle, die wir bis zu diesem
‫Zeitpunkt gemacht haben.
‫Wenn wir uns zum Beispiel die Abfrage ansehen wollten, machten wir
‫normalerweise eine Reihe von Konsolen. logs und verwenden Sie
‫diese, um einen Fehler zu finden, falls etwas
‫nicht funktioniert.
‫Richtig, aber jetzt haben wir dieses erstaunliche Tool, das uns helfen
‫kann, all diese Konsolen zu vermeiden. Protokolle zum
‫Beispiel.
‫Dann haben wir natürlich auch die Antwort.
‫Und wieder sehen Sie all diese Eigenschaften und Methoden, die da drin
‫sind und die für uns jetzt nicht
‫wirklich interessant sind.
‫Was ich euch zeigen wollte ist natürlich, dass wir
‫zu diesem Zeitpunkt schon die Touren haben, okay?
‫Wir haben also neun Touren, also schauen wir sie uns an.
‫Und es sieht hier irgendwie seltsam aus, also müssen wir hier
‫klicken, um Zugang zu den tatsächlichen Werten zu erhalten, okay, das ist also
‫ein bisschen seltsam.
‫Aber es funktioniert natürlich.
‫Und so sehen Sie, dass unsere Touren tatsächlich schon da
‫sind und natürlich auch die Features.
‫Sie sehen hier also, dass die Features eine
‫Instanz der API-Feature-Klasse sind, so wie wir sie definiert haben.
‫Und dort haben wir die Abfrage und den Abfragestring.
‫Großartig, also sehen wir uns alle Variablen an.
‫Und so funktionieren die wichtigsten
‫Teile des Debuggers.
‫Um nun ein wenig über den Debugging-Prozess selbst zu lernen,
‫führen wir einen sehr kleinen Fehler in unseren Code ein und werfen
‫dann einen Blick darauf, wie wir diese Tools verwenden
‫können, die wir hier haben, um unseren Code im
‫Grunde genauer zu betrachten.
‫Also werde ich die übersprungene Ausführung
‫nicht fortsetzen, um im Grunde den Rest des Codes auszuführen, okay?
‫Das sollte also jetzt geschehen.
‫Hier haben wir nun alle Antworten.
‫Sie sehen also, dass es hier die ganze Zeit gedauert
‫hat, also drei Minuten und 29 Sekunden, aber das
‫liegt nur daran, dass wir die Hinrichtung so lange
‫unterbrochen haben.
‫Okay.
‫Kommen wir nun zu unserem Code hier.
‫Schließen wir, was wir nicht mehr brauchen.
‫Eigentlich möchte ich in unserer API-Features-Datei hier einen
‫kleinen Fehler in den Limit-Feldern einführen.
‫Nehmen wir an, wir haben versucht, diese Methode hier
‫zu implementieren, aber anstatt sie hier mit einem Leerzeichen zu verbinden,
‫haben wir vergessen, sie hier zu platzieren.
‫Also sagen wir einfach, dass wir ohne Leerzeichen
‫beigetreten sind, und das würde uns dann ein seltsames Ergebnis liefern, oder?
‫Also lass es uns mal testen.
‫Sagen wir
‫also Felder und wir wollten
‫nur den Namen und die Dauer, oder?
‫Bevor ich diese Anfrage tatsächlich senden kann, entfernen wir
‫den Haltepunkt hier.
‫Okay?
‫Die Anfrage wurde gesendet, und jetzt erhalten wir tatsächlich den
‫Namen und die Dauer nicht.
‫Nehmen wir also an, das wäre
‫jetzt unser Fehler und wir versuchen jetzt herauszufinden, warum das nicht funktioniert.
‫Okay?
‫Kommen wir also zu unserem Debugger.
‫Und wir wissen, dass der
‫Fehler wahrscheinlich irgendwo in unserer Grenzwertfeldmethode liegen muss.
‫Also lassen Sie uns an dieser Stelle im Grunde die
‫Ausführung des Codes stoppen, okay?
‫Da diese Methode hier tatsächlich aufgerufen wird, können wir
‫von hier aus diese Funktion für diese
‫Methode eingeben.
‫Okay?
‫Lassen Sie uns diese Anfrage jetzt
‫abfeuern, und jetzt kehren wir automatisch zu unserem Debugger zurück.
‫An diesem Punkt wurden diese Zeile und diese
‫Zeile und diese Codezeile bereits ausgeführt, und jetzt verwenden
‫wir das Step-Tool, okay?
‫Der Schritt führt dazu, dass im Grunde die
‫nächste Codezeile ausgeführt wird.
‫Und in diesem Fall befindet sich das
‫innerhalb der Methode limit field.
‫Also Schritt, und es wird dann direkt in diese Funktion übergehen.
‫Okay, schauen wir uns an, was wir hier haben.
‫Zum Beispiel dies. Abfragezeichenfolge ist Name Kommadauer,
‫das ist also richtig, oder?
‫Okay, also gehen wir zur nächsten Zeile.
‫In Ordnung, und hier findet diese
‫Operation tatsächlich statt.
‫Dann als nächstes.
‫Schauen wir uns hier unsere Variablen an.
‫Und hier sehen wir jetzt ein Feld, und hier haben wir unseren Fehler.
‫Okay?
‫Das Problem ist also natürlich, dass zwischen Name
‫und Dauer kein Leerzeichen steht.
‫Und deshalb funktioniert es nicht.
‫Felder sind hier natürlich definiert, und so
‫können wir unseren Fehler sofort finden und korrigieren.
‫Denken Sie also daran, dass sich der
‫hinzugefügte Schritt, den wir hier ausführen, sofort im Code widerspiegelt.
‫Also speichern
‫Sie es und dann wird es wieder tun.
‫So kann ich weitergehen.
‫Und so ist jetzt Felder richtig.
‫Also Namensraumdauer.
‫Dann die nächste Codezeile.
‫Und jetzt geben wir die Methode select für die Abfrage ein.
‫Aber das interessiert uns überhaupt nicht, also können wir
‫sagen: "Aus der aktuellen Funktion aussteigen. " Okay?
‫Also diese Auswahl, von der wir dachten, dass sie
‫diese Funktion hier ausführt, okay?
‫Aber das interessierte uns natürlich nicht, also
‫haben wir es einfach aufgegeben und sind zur nächsten Zeile übergegangen.
‫Jetzt haben wir
‫dies, die nächste Zeile und noch einmal zurück.
‫Jetzt sind wir also wieder da, wo wir waren, aber in der nächsten Zeile.
‫Machen wir also weiter.
‫Jetzt sind wir also bei
‫Seite acht, aber diese interessiert uns nicht
‫wirklich, und so verlassen wir die aktuelle Funktion wieder.
‫Und jetzt sind wir hier bei der Tourendefinition.
‫Was an dieser Stelle noch nicht fertig ist.
‫Sagen wir also noch einmal Schritt.
‫Und so sollten jetzt an dieser Stelle unsere Touren definiert werden.
‫Also gut, wir haben unsere neun Touren hier drüben.
‫Werfen wir einen Blick auf sie,
‫und hier sind sie.
‫Und tatsächlich haben sie alle
‫Daten, also nicht nur die, die wir definiert haben,
‫sondern tatsächlich nicht.
‫Wir haben also wirklich nur den Namen und
‫die Dauer, also sind Dauer, Name und
‫alle anderen undefiniert.
‫Das liegt also nur daran, dass wir eine Abfrage auf nur diese beiden
‫Felder beschränkt haben, erinnern Sie sich?
‫Was ich Ihnen jetzt auch zeigen wollte, ist hier
‫in den Funktionen, wir können uns unsere Abfrage ansehen und hier haben wir zum
‫Beispiel die Felder-Eigenschaft, bei der wir die Dauer auf eins
‫und den Namen auf eins gesetzt sehen.
‫Und das sind genau die beiden Namen, die wir ausgewählt haben.
‫Wir haben auch diese Optionen
‫hier, die an dieser Stelle so eingestellt sind, dass sie minus eins erstellt werden.
‫Und das kommt also von hier.
‫Also das hier.
‫Im Grunde genommen wird diese Methode
‫hier, diese Sortiermethode, diese Sortiereigenschaft hier zu diesen Optionen
‫hinzufügen, in Ordnung?
‫Und dann haben wir auch noch Limit und Skip, die hier
‫natürlich ab Seite 8 kommen.
‫Okay?
‫Also dachte ich, dass das auch irgendwie
‫interessant ist und ja, unser Code ist jetzt tatsächlich behoben und lass uns das
‫weiterlaufen lassen.
‫Und so sollten wir jetzt unser korrektes Ergebnis haben.
‫Hier heißt es nun, wir konnten keine Antwort erhalten, und das
‫liegt daran, dass wir zu lange gebraucht haben, um unseren Code zu reparieren.
‫Wir haben also einen Fehler beim Verbinden erhalten.
‫Aber wenn wir es jetzt noch
‫einmal schicken, und jetzt machen wir es schneller.
‫Oder wir könnten unseren Breakpoint ganz entfernen.
‫Also lassen Sie uns
‫weiterlaufen, gehen wir zurück und jetzt bekommen wir tatsächlich
‫auch die Dauer und den Namen.
‫Das liegt daran, dass wir gerade unseren Code
‫mit dem NDB-Debugger korrigiert haben.
‫So großartig.
‫Das ist ein wirklich erstaunliches und hilfreiches Werkzeug,
‫das wir für den Rest des Kurses
‫verwenden werden.
‫Vielleicht nicht immer, manchmal ist es schneller,
‫einfach ein Konsolen-Log einzufügen.
‫Aber in einigen komplizierteren Fällen verwende ich diese
‫Art von Werkzeug wirklich gerne.