Visual Studio Code Debugger: Eine Einführung und ein Screencast

In früheren Beiträgen habe ich ein wenig darüber gesprochen, warum die Verwendung eines geeigneten Debuggers im Vergleich zu einigen der eingebauten PHP-Anweisungen wichtig ist. Im letzten Beitrag gehe ich sogar durch die Einrichtung von Xdebug mit Visual Studio Code (und MAMP Pro, falls Sie es verwenden).

Aber wenn Sie noch nie ein solches Tool verwendet haben, noch nie gesehen haben, wie es funktioniert, oder Sie noch nie gesehen haben, warum es so leistungsfähig ist, möchte ich das in diesem Beitrag ein wenig behandeln.

Ich werde dies im Rahmen einiger Definitionen und Screenshots sowie eines kurzen Screencasts am Ende ein wenig durchgehen, damit ich den Visual Studio Code-Debugger in Aktion zeigen kann.

Der Visual Studio-Code-Debugger

Angenommen, Sie haben den Debugger installiert; Es gibt ein paar Begriffe, die es wert sind, gelernt zu werden. Sicher, es gibt noch mehr, aber das sind die, die ich für entscheidend halte:

• An Haltepunkten teilen Sie dem Programm mit, dass es seine Ausführung anhalten soll. Sobald der Code an dieser Stelle angehalten hat, können Sie Variablen untersuchen, sehen, welche Werte im Speicher gespeichert sind, und so weiter.
• Überwachungen sind Variablen im Code, die Sie buchstäblich beobachten möchten, wenn sie sich während der Ausführung der Variablen ändern.
• Start setzt den Debugger in Gang. Selbst wenn Sie Breakpoints und Watches gesetzt haben, wird der Debugger nichts tun, bis Sie ihn starten.
• Step Into ist eine Aktion, die Sie beim Drücken eines Funktionsaufrufs in die aufgerufene Funktion führt. Manchmal ist dies nützlich, z. B. wenn Sie sehen möchten, was die Funktion tut. In anderen Fällen ist es unnötig, wenn Sie sich nur um die Ausführung der Funktion kümmern oder sich nur darum kümmern, was sie zurückgibt.
• Step Over ermöglicht es Ihnen, die Ausführung einer Funktion zu überspringen, sodass die Ausführung des Programms sofort angehalten wird, nachdem die Funktion, die Sie übersprungen haben, beendet ist.
• Step Out wird verwendet, wenn Sie in eine Funktion eingetreten sind, einen Punkt erreicht haben, an dem Sie mit der Auswertung des Codes fertig sind, und dann bereit sind, zu der Stelle zurückzukehren, an der Sie einen Haltepunkt festgelegt haben.
• Stop beendet die Ausführung des Debuggers.

Klingt relativ klar, oder? Meiner Meinung nach ist es am einfachsten, dies in Aktion zu sehen.

Um zu sehen, welche Symbole was tun, ist es normalerweise am besten, den Mauszeiger darüber zu bewegen und dann die Tooltips zu lesen. Nach ein oder zwei Mal werden Sie jedoch mit der jeweiligen Funktion vertraut sein.

Schließlich sind die Symbole ziemlich aussagekräftig.

Ein Beispiel

Angenommen, Sie haben die Schritte im vorherigen Artikel befolgt, hier ist ein kurzes Beispiel, wie Sie einen Haltepunkt setzen und seine Ausführung über ein Plugin verfolgen können.

1 Haltepunkt

Beachten Sie im Bild unten, dass ich einen Haltepunkt neben einer Codezeile platziert habe (wie durch den roten Punkt angezeigt).

Hier wird die Ausführung beendet, sobald ich den Debugger starte und mit der Ausführung des Programms beginne.

2 Stellen Sie eine Uhr ein

Als Nächstes bedeutet eine Variable beobachten, dass wir den Wert einer Variablen während des gesamten Lebenszyklus des Programms sehen möchten. Unten füge ich der $description-Variablen eine Uhr hinzu.

Im nächsten Abschnitt sehen Sie den Wert der Uhr, nachdem die Ausführung des Programms diese Codezeile übergeben hat.

3 Bewerten Sie die Uhr

Sobald der Code diese Zeile durchlaufen hat, können Sie den Wert der Variablen im Abschnitt „Überwachen” des Debug – Bereichs sehen.

Beachten Sie, dass in der Funktion woocommerce_wp_text_input aufgerufen wird. Wir verwenden diese Funktion als Beispiel, um in eine Funktion einzusteigen, da es sich um eine Funktion handelt, die Teil des WooCommerce-Kerns ist.

4 Bereiten Sie sich darauf vor, einzugreifen

Bevor Sie eine Funktion aufrufen, müssen Sie sicherstellen, dass der Funktionsname hervorgehoben ist.

Sobald Sie fertig sind, können Sie auf die  Schaltfläche Step In klicken, um zu sehen, was in der Funktion passiert.

5 Treten Sie ein

Nach dem Einsteigen sehen Sie Code, den Sie nicht geschrieben haben. Stattdessen ist es Code, der Teil von WooCommerce ist (zumindest in diesem Beispiel).

Basierend auf Ihrer Erfahrung sehen Sie Code, den Sie vielleicht geschrieben haben oder den jemand anderes geschrieben hat.

6 Aussteigen

Sobald Sie den Code verlassen haben, kehren Sie unmittelbar nach der Stelle, an der Sie in den Code eingetreten sind, zu der Codezeile zurück.

Sinn ergeben?

Ein Screencast

Und schließlich ist hier ein sehr kurzer Screencast, der zeigt, wie all das oben in Aktion aussieht:

Wie im Video erwähnt, ist dies keineswegs umfassend, aber es sollte ausreichen, um zu zeigen, wie leistungsfähig Debugging sein kann.

Es braucht Zeit und Übung

Das Debuggen dauert etwas länger als das Ausgeben von Variablen auf dem Bildschirm.

Und ich sage nicht, dass das nicht seinen Platz hat; Wenn Sie jedoch ein tieferes Verständnis dafür erlangen möchten, was passiert, wenn Sie Ihr Programm ausführen, oder wenn Sie beispielsweise den WordPress-Kern erkunden möchten, ist die Verwendung eines Debuggers eine wirklich gute Möglichkeit, dies zu tun.

Darüber hinaus würde ich argumentieren, dass die Verwendung eines Debuggers dazu beitragen kann, ein besseres Verständnis dafür zu vermitteln, was im Kontext Ihres Codes falsch (oder richtig) läuft, damit Sie die bestmögliche Lösung dafür erstellen können.