Wonach suchen Sie?
Beim Erstellen einer komplexen Webanwendung sind Sie wahrscheinlich auf die Tatsache gestoßen, dass etwas nicht wie geplant funktioniert hat. Sie haben stundenlang nach einem Fehler in Ihrem Code gesucht und dann im Internet nach Hilfe zur Behebung des Problems gesucht. Um es Ihnen einfacher zu machen, erklären wir in diesem Artikel einige effektive Techniken zum Debuggen einer Webanwendung, die das Debuggen erheblich vereinfachen und die Zeit zum Erkennen von Problemen verkürzen.
Konsole.log
Erstens, eine häufig verwendete Javascript-Methode Konsole.log. Sie können eine Methode mit der angegebenen Variablen in Ihren Code einfügen. Während der Codeausführung gibt die Anwendung den Wert der in der Methode in der Konsole angegebenen Variablen zurück. Dies ist der einfachste Weg, um zu überprüfen, ob das Programm den erwarteten Wert zurückgibt.
Leider ist dies keine sehr effektive Methode zum Debuggen. Ein solcher Ansatz t erlaubt es uns nicht, den Fortschritt der Codeausführung zu sehen (es sei denn, wir fügen Konsole ein.protokollieren Sie alle paar Zeilen, aber dann ist die in die Konsole geworfene Datenmenge nicht lesbar und wir werden nur den Code durcheinander bringen.) Darüber hinaus wird nur die übergebene Variable zurückgegeben, sofern die Anwendung beim Ausführen des Codes keinen Fehler auslöst.
Tipp no. 1
Wenn sie haben viele konsole.logs setzen den Namen in einen String und die nächste Variable, z.B. console.log(‚variable‘, variable).
Chrome DevTools (Registerkarte Quelle)
Eine effizientere Methode zum Debuggen einer Webanwendung ist die Verwendung von Chrome DevTools und der Registerkarte Quelle. Bevor wir mit dem Debuggen auf der Registerkarte Quelle beginnen, müssen wir node_modules zu Blackbox hinzufügen. Wir fügen diese Regel hinzu, damit beim Durchlaufen von Haltepunkten keine Dateien aus externen Paketen angezeigt werden, was das Debuggen erschwert. Wir müssen Einstellungen in Chrome → Blackboxing → Muster hinzufügen öffnen und dann dort /node_modules schreiben.
Wenn Sie node_modules zu Black boxing hinzufügen, können wir zur Registerkarte Quelle wechseln. Nehmen wir an, Sie möchten den Prozess Ihrer Funktion in Echtzeit verfolgen und die Ausgaben überprüfen. Drücken Sie Strg + O auf der Registerkarte Quelle und geben Sie einen Quelldateinamen ein. Setzen Sie dann die Haltepunkte in die Codezeilen, die Sie interessieren, und Sie können den Vorgang in Ihrem Browser ausführen. Wenn die von Ihnen ausgewählten Zeilen mit der Verarbeitung beginnen, stoppt der Browser die Ausführung des Codes. Siehe den Screenshot unten.
Wie Sie sehen können, hat die aktuelle Codezeile, in der der Browser gestoppt wurde, einen blauen Hintergrund. Auf der rechten Seite befindet sich eine Leiste, in der sich unsere Kommandozentrale befindet. Hier ist unsere kurze Einführung.
Steuerelemente
Oben in der Leiste befindet sich der Abschnitt Steuerelemente. Konzentrieren wir uns auf die entscheidenden Elemente. Das erste Resume-Steuerelement führt uns zum nächsten markierten Haltepunkt im Rahmen des ausgeführten Codes. Der zweite Steuerschritt über den nächsten Funktionsaufruf führt uns zur nächsten Zeile des ausgeführten Codes. Das Steuerelement last Deactive breakpoints deaktiviert die ausgewählten Haltepunkte. Es ist ein nützliches Steuerelement, wenn wir viele Haltepunkte ausgewählt haben und eine Weile durch die Anwendung klicken möchten, ohne an jedem Haltepunkt anzuhalten.
Bereiche
Wir haben unten einen Bereich. Wir haben verschiedene Arten von Bereichen: lokal (die aktuell ausgeführte Funktion) und Schließungen, abhängig vom Bereich, in dem wir uns befinden (z. B. das übergeordnete Element der aktuell ausgeführten Funktion oder eine Komponente). In jedem dieser Bereiche zeigt uns der Browser alle darin vorkommenden Variablen an.
Haltepunkte
Der letzte besprochene Abschnitt sind Haltepunkte. Es zeigt an, welche Haltepunkte und in welchen Dateien markiert sind. Mithilfe von Kontrollkästchen können wir sie einfach deaktivieren und reaktivieren.
Tipps keine. 2-5
- Wenn Sie unveränderlich verwenden.js Installieren Sie in Ihrem Projekt das Unveränderliche.js Object Formatter Plugin und aktivieren Sie es in den Browsereinstellungen. Dies vereinfacht das Debuggen unveränderlicher Objekte erheblich.
- Wenn Sie nicht unveränderlich verwenden.js in Ihrem Projekt und Sie Visual Studio Code als IDE verwenden, empfehlen wir dringend die Installation und Konfiguration Debugger für Chrome (VSC hat keine unveränderliche.js Formatierung Plugin). Es vereinfacht das Debuggen noch weiter und ermöglicht schnellere Codeänderungen.
- Wenn die Registerkarte Quelle Ihre lokalen Dateien nicht anzeigt, überprüfen Sie die Quellzuordnung in Ihrem Projekt.
- Wenn der Browser an einem Haltepunkt stoppt, haben Sie auch in der Konsole Zugriff auf Variablen.
React Developer Tools
React Developer Tools sind ebenfalls hilfreiche Lösungen. Mit solchen Tools können Sie die React-Baumstruktur in Ihrem Projekt, die Status und Requisiten in der Komponente einfach anzeigen. Die Funktion Select an element in the page to inspect it ist leistungsstark, insbesondere wenn Sie nicht das gesamte Projekt kennen. Es hilft Ihnen, die Komponente zu finden, die Sie aktualisieren müssen.
Tipp Nr. 6
Wenn Sie Vue verwenden.ja, Sie können Vue verwenden.in: js devtools. Die Erweiterung hat ähnliche Funktionen und Zugriff auf Vuex (das Redux-Äquivalent in React).
Redux DevTools
Wenn Sie Redux in Ihrem Projekt verwenden, ist Redux DevTools ein Muss. Mit einer solchen Lösung können Sie den vollständigen Ablauf von Aktionen, Statusänderungen und Nutzdaten verfolgen und den aktuellen Speicher nach jeder ausgeführten Aktion anzeigen. Wenn etwas nicht wie angenommen funktioniert und im Code alles in Ordnung zu sein scheint, sollten Sie überlegen, welche Aktionen mit welcher Nutzlast gesendet werden. Manchmal gibt es einfache Fehler wie das Kopieren der Konstanten aus der obigen Aktion, das Umbenennen ohne Änderung des Werts und das anschließende Aufrufen von etwas völlig anderem. Nachfolgend finden Sie ein GIF mit den wichtigsten Funktionen von Redux DevTools.
Tipp Nr. 7
Wenn Ihre Anwendung eine große Anzahl von Aktionen ausführt, funktioniert die Erweiterung möglicherweise nicht ordnungsgemäß, da der Arbeitsspeicher für die Verarbeitung so vieler Aktionen nicht ausreicht. Sie können versuchen, es in den Erweiterungsoptionen zu konfigurieren (in diesem Fall die Option MaxAge.)
Fiddler
Das letzte Tool, das wir vorstellen möchten, ist Fiddler. Das Tool wurde entwickelt, um den Netzwerkverkehr zu verwalten. Es ist äußerst nützlich, wenn wir einige Produktionsfehler haben und die Produktionsdaten nicht in eine niedrigere Umgebung kopieren können, um sie lokal zu debuggen. Um in einer solchen Situation auf Produktionsdaten in der lokalen Umgebung zugreifen zu können, legen wir den Datenverkehr auf der Registerkarte AutoResponder fest. Wenn Sie die Seite öffnen, anstatt die js-Datei vom Server herunterzuladen, verbindet Fidler unsere lokal erstellte Produktionsdatei. Das weitere Debuggen erfolgt auf der Registerkarte Chrome dev Tools source. Unten sehen Sie einen Screenshot mit der Einstellung zum Umleiten des Datenverkehrs in die lokale Datei. Das Programm ermöglicht auch Scheinendpunkte.
Tipp Nr. 8
Wenn Sie Mocks von Endpunkten auf einfache und schnelle Weise erstellen möchten, können Sie ein Mock-Moon-Programm verwenden.
Zusammenfassung eines agilen Debuggens einer Webanwendung
Für viele von uns ist das Debuggen einer Webanwendung mit Kopfschmerzen und langen Stunden vor dem Computer verbunden. Dieser Prozess kann jedoch verkürzt und angenehmer gestaltet werden, wenn Sie über die richtigen Werkzeuge und das richtige Know-how verfügen. Oft sind sie an Ihren Fingerspitzen und kostenlos. Wir haben mit Ihnen die wichtigsten und nützlichsten Tools geteilt, die wir täglich verwenden.