So debuggen Sie Front-End und Back-End: Schritt für Schritt Anweisungen

  • Tutorial
Hi, Habr! Ich präsentiere Ihnen die Übersetzung des Artikels " So debuggen Sie Javascript in Chrome schnell und einfach ".

In diesem Beitrag erfahren Sie, wie Sie JavaScript im Front- und Backend mit Chrome DevTools und VS Code debuggen können.

Ziele:


  1. Erfahren Sie, wie Sie Frontend und Angular debuggen
  2. Analysieren Sie den Debugging-Prozess Node.js

Wir fangen Fehler am Frontend (JavaScript, Angular)


Viele Dienste ermöglichen jetzt das Debuggen von Code über das Frontend. Chrome DevTools und Firefox Developer Tools sind die beliebtesten, aber auch andere Browser verfügen über eigene Tools. Wir werden Chrome DevTools für Beispiele verwenden.

Javascript Javascript


Das Debuggen von Code kann ehrlich gesagt viel Zeit in Anspruch nehmen. Besonders, wenn Sie einfache Befehle wie console.log () oder window.alert () verwenden .

Sie müssen den zusätzlichen Code schreiben und dann löschen, und manchmal werden diese Befehle immer noch in das Festschreiben übernommen (auch wenn Sie dachten, dass jeder sie angenommen hat). Wenn Sie Lints (statische Debugger) verwenden, werden die Konsolen- oder Alertbefehle im Code hervorgehoben.

In diesem Moment kommt Chrome DevTools ins Spiel, mit dem wir Code ohne langwierige Befehle debuggen können. Zu den Chips dieses Tools gehören das Bearbeiten von CSS und HTML, das Testen des Netzwerks und das Überprüfen der Geschwindigkeit der Website.

Um sich mit diesem Werkzeug in der Praxis vertraut zu machen, erstellen wir eine einfache JavaScript-Seite mit getData ().Methode. Diese Methode sammelt einfach Daten aus dem Eingabefeld, erstellt ein DOM-Element mit einer dataSpan-ID und fügt diesem Element einen Wert aus dem Eingabefeld hinzu.

So sieht unsere Seite aus:

In HTML:


In JavaScript:



Speichern Sie sie als app.js.

So wird unsere Seite im Browser aussehen:



Um zu überprüfen, wie die Methode funktioniert, bevor Sie Daten in dataSpan speichern , können Sie altmodische console.log (data) oder window.alert (data) verwenden . Folgendes wird beim Ausführen der Datei in VS-Code angezeigt:



Dies ist der primitivste Ansatz.

Stattdessen verwenden wir in Chrome DevTools Haltepunkte (Haltepunkte), um sicherzustellen, dass alles wie vorgesehen funktioniert.

Haltepunkt ist eine Codezeile, in der der Codelauf angehalten werden soll, um zu untersuchen, wie er funktioniert (oder nicht funktioniert).

Um zum Beispiel zurückzukehren, starten wir die Seite in Google Chrome und führen Sie folgende Schritte aus:

  1. Klicken Sie zum Öffnen der Chrome Developer Tools in der oberen rechten Ecke des Browsers auf, um das Einstellungsmenü zu öffnen.
  2. Wählen Sie in diesem Menü Zusätzliche Tools (im englischen Menü - Weitere Tools) und dann Developer Tools (Entwickler-Tools).

Außerdem können Sie die Tastenkombination Strg + Umschalt + I verwenden (wir verwenden sie, aber das liegt an Ihnen =).



Nachdem Sie die Symbolleiste des Entwicklers geöffnet haben, lassen Sie den Haltepunktcode anhalten:

  1. Wählen Sie die Registerkarte Quellen.
  2. Wählen Sie in Sources im Seitenbereich app.js aus (das wir etwas früher erstellt haben).
  3. Klicken Sie im Code-Editor auf die Zeilennummer. let data =document.getElementById('name').value;

Wir setzen also einen Haltepunkt (zur Vereinfachung weist das Programm einen Ort mit Haltepunkt mit einer blauen Flagge zu). Beachten Sie auch, dass die ausgewählte Variable automatisch zum Abschnitt Haltepunkte> Lokal (im Bereich JavaScript-Debugging) hinzugefügt wird .

Verwalten Sie Code-Ausführungsintervalle


Nachdem wir einen Haltepunkt gesetzt haben, setzen wir die Ausführung der Funktion darauf aus. Daher müssen wir die zeilenweise Code-Ausführung fortsetzen, um die Änderungen in unserer Variablen zu untersuchen.
In der oberen linken Ecke des JavaScript-Debugging- Bereichs befinden sich die grundlegenden Haltepunktbefehle:



Die erste Schaltfläche, Skriptausführung fortsetzen (), setzt die Ausführung des Codes bis zum Ende oder zum nächsten Haltepunkt fort.

Geben Sie im Eingabefeld Hallo Welt ein. Data = "Hallo Welt" wird der Zeichenfolge hinzugefügt. Klicken wir nun auf die Schaltfläche Über nächsten Funktionsaufruf () springen .



Die ausgewählte Haltepunktzeichenfolge wird ausgeführt und der Debugger wählt den nächsten aus. Klicken Sie auf die Registerkarte Bereich, um den Wert der Datenvariablen anzuzeigen. Es wurde in "Hallo Welt" geändert, die wir zuvor eingegeben haben, und zeigt nur den Wert unserer Variablen in einer bestimmten Codezeile. Klicken Sie erneut auf Nächsten Funktionsaufruf übergehen, um die ausgewählte Methode auszuführen und zur nächsten Zeile zu gelangen.

Wenn Sie die Seite aktualisieren, wird der Wert der out-Variablen auch im DOM-Element aktualisiert. Um den Wert einer Variablen anzuzeigen, klicken Sie links auf Expand (). Wenn Sie erneut auf nächsten Funktionsaufruf übergehen klicken, wird der Text "Hallo Welt" erneut zum dataSpan hinzugefügt.

Komplexeres Debugging


Angenommen, wir führen eine kompliziertere Funktion aus, die dem Debuggen definitiv nicht schadet. Zum Beispiel möchten wir, dass Benutzer Zahlen durch Leerzeichen eingeben. Die Funktion verarbeitet und gibt dann diese Zahlen, ihre Summe und das Ergebnis der Multiplikation aus.



Dazu aktualisieren wir den app.js-Code wie in der Abbildung oben. Wir aktualisieren die Seite und fahren direkt mit dem Debugging fort.



  1. Klicken Sie auf 3 (Zeilennummer von let data = document.getElementById ('name'). Value;), um den Haltepunkt festzulegen.
  2. Geben Sie 23 24 e in das Eingabefeld des Browsers ein.
  3. Klicken Sie auf Nächsten Funktionsaufruf übergehen.

Der Screenshot zeigt, dass die Summe und das Produkt von Zahlen den Wert NaN (keine Zahl) haben. Dies bedeutet, dass Sie den Code sofort korrigieren müssen.

Wie können Sie einen Haltepunkt festlegen?


In den meisten Fällen ist Ihr Code viel länger und möglicherweise in einer Zeile verkettet. Angenommen, Sie haben 1000 Codezeilen. In diesem Fall scheint das Festlegen von Haltepunkten durch Anklicken von Zeilennummern nicht eine so gute Idee zu sein, oder?

Zu diesem Zweck bietet DevTools ein cooles Tool zum Festlegen von Haltepunkten für verschiedene Interaktionstypen mit dem Browser. Klicken Sie im Bereich JavaScript-Debugging auf Haltepunkte für Ereignis-Listener, um die verfügbaren Kategorien anzuzeigen.



Wie Sie sehen, können Sie an einer beliebigen Stelle in unserem Code einen Haltepunkt auf das Mausklickereignis (Mausklick) setzen. Dies bedeutet , dass , wenn Sie auf die die Eingabe der Daten importieren , die Ausführung von Code im Falle stoppt die Onclick . Sie müssen nichts manuell hinzufügen.



Wenn Sie auf den Funktionsaufruf Schritt über nächste Funktion klicken, werden Sie nacheinander durch den Code geführt, der zur Verarbeitung der Klicks verwendet wird.

Mit Ereignis-Listener-Haltepunkten können Sie Haltepunkte auf verschiedene Arten von Ereignissen setzen, z. B. Keyboard, Touch und XHR.

Stichwort "Debugger"


Wenn Sie an einer beliebigen Stelle im Code einen Debugger eingeben, unterbricht Chrome DevTools die Ausführung des Codes in dieser Zeile und hebt ihn sowie den Haltepunkt hervor. Mit diesem Tool können Sie JavaScript in Chrome oder anderen Browsern debuggen. Denken Sie daran, es zu entfernen, wenn Sie mit dem Debuggen fertig sind.



Der Code in der Abbildung oben stoppt bei der Zeile, die das Schlüsselwort für den Debugger enthält, und startet automatisch Chrome DevTools. Im Wesentlichen entspricht dies dem Setzen eines Haltepunkts in dieser Zeile. Die Ausführung des Codes kann auch mit den Schaltflächen Schritt in nächsten Funktionsaufruf und Schritt über nächsten Funktionsaufruf gesteuert werden .


Squeeze


Zu Beginn haben wir uns die Befehle console.log () und window.alert () angesehen und festgestellt, dass sie nicht sehr praktisch sind. Es war notwendig, sie im gesamten Code häufig zu verwenden, was den Code „härter“ und langsamer machen könnte, wenn wir vergessen, sie vor dem Commit zu entfernen.

Mit der wachsenden Anzahl von Zeilen können die Chrome Developer Tools Fehler besser erkennen und die Gesamtleistung bewerten.

Schrägkämpfe


Die einfachste Möglichkeit zum Debuggen von Angular-Code besteht in der Verwendung von Visual Studio-Code (VS-Code). Um mit dem Debuggen zu beginnen, müssen Sie die Erweiterung "Chug Debugger" installieren:

  1. Führen Sie das Projekt in VS Code aus, und öffnen Sie die Registerkarte Erweiterungen. Oder drücken Sie Strg + Umschalt + X auf der Tastatur.
  2. Geben Sie in der Suchleiste Chrome ein.
  3. Wählen Sie Debugger für Chrome aus und klicken Sie auf Installieren.
  4. Nachdem Sie die Erweiterung installiert haben, wird die Schaltfläche Neu laden angezeigt. Klicken Sie darauf, um die Installation abzuschließen und den Debugger zu aktivieren.

Wie kann man einen Haltepunkt setzen?

Klicken Sie wie in DevTools auf die Zeilennummer in app.component.ts. Die Haltepunktlinie wird durch einen roten Kreis (links von der Zeilennummer) hervorgehoben.



Debugger konfigurieren


Zunächst müssen wir den Debugger konfigurieren:

1. Gehen Sie im Datei-Explorer auf die Registerkarte Debuggen.
Sie können dazu auch Strg + Umschalt + D verwenden.

2. Klicken Sie auf das Symbol Einstellungen, um launch.json zu erstellen.
Dies ist die Einstellungsdatei, die wir verwenden werden.

3. Wählen Sie im Einblendmenü Umgebung auswählen die Option Chrome aus.
Dadurch werden ein neuer .vscode-Ordner und die Datei launch.json für Ihr Projekt erstellt.

4. Führen Sie diese Datei aus.

5. Um diese Datei für unsere Zwecke zu verwenden, ersetzen Sie in der URL-Methode localhost port von 8080 in 4200.

6. Speichern Sie die Änderungen.

So sollte die Datei aussehen:



7. Drücken Sie F5 oder klicken Sie auf die Schaltfläche Debuggen starten, um den Debugger zu starten.

8. Starten Sie Chrome.

9. Aktualisieren Sie die Seite, um die Ausführung des Codes am Haltepunkt anzuhalten.



Verwenden Sie die Taste F10, um die Codeausführung und die Änderungen der Variablen nacheinander anzuzeigen.



README


In der Erweiterung Debugger für Chrome gibt es viele weitere Konfigurationen, die Arbeit mit Quellkarten und die Behebung von Problemen. Um sie direkt in VS Code anzuzeigen, klicken Sie auf die Erweiterung und wählen Sie die Registerkarte Details .



Backend-Debugging (Node.js)


Hier erfahren Sie, wie Sie Code auf Node.js debuggen. Hier sind die gebräuchlichsten Ansätze:

• Chrome DevTools verwenden Derzeit
ist dies unser bevorzugter Ansatz.

• Verwenden von IDE-Code, Visual Studio, WebStorm usw.

Als Beispiele verwenden wir VS Code und Chrome DevTools.

Chrome und Node.js verwenden dieselbe JavaScript-Engine, Google V8. Dies bedeutet, dass wir für das Backend dieselben Tools wie für die Vorderseite verwenden werden.

So führen Sie das aus:

1. Führen Sie Ihr Projekt in VS Code aus.

2. Klicken Sie auf die Registerkarte Konsole.

3. Geben Sie npm start --inspect ein und drücken Sie die Eingabetaste.

4. Ignorieren Sie die vorgeschlagene URL "chrome-devtools: // ..." (es gibt eine bessere Methode).



5. Starten Sie Chrome und geben Sie "about: inspect" ein.

Dadurch werden Sie auf die Registerkarte Geräte in DevTools umgeleitet.

6. Klicken Sie auf den Link Dedicated DevTools for Node öffnen.



Der Debugging-Prozess ist derselbe wie für das Frontend, dh der Haltepunkt. Tatsächlich ist es sehr praktisch, dass Sie nicht zur IDE wechseln müssen. Somit ist es möglich, sowohl das Frontend als auch das Backend an derselben Schnittstelle zu debuggen.

Danke fürs Lesen und hoffen, dass Ihnen dieser Beitrag gefallen hat. Updates abonnieren - wir haben noch viele nützliche Dinge im Ärmel :-)

Jetzt auch beliebt: