Installation von Xdebug, Teil 2: Die IDE

Nachdem Xdebug nun mit Ihrer lokalen Installation von PHP installiert ist, ist es an der Zeit, es mit der IDE zu verbinden. Dies bietet uns alle Vorteile, die Xdebug zu bieten hat.

Das heißt, es ermöglicht uns:

• Haltepunkte setzen,
• Schritt durch unseren Code,
• und Variablen beobachten

Währenddessen wird das Programm ausgeführt. Das bedeutet, dass wir, während eine Seite gerendert wird, in unserer Codebasis Punkte festlegen können, an denen wir sehen können, was der Server mit unserem Code macht.

Also, sicher, obwohl es Debugging genannt wird, um Fehler zu entfernen, kann es auch einen Einblick geben, wie eine WordPress-basierte Anwendung, ein Design oder ein Plugin ausgeführt wird, und uns dabei helfen, den WordPress-Kern besser zu verstehen.

Installieren von Xdebug in Visual Studio Code

Zu diesem Zeitpunkt sollten Sie die folgende Umgebung auf Ihrem lokalen Computer eingerichtet haben:

• Valet (einschließlich Nginx und MySQL und verwandter Tools )
• WordPress
• Visual Studio-Code
• Xdebug

Die verbleibenden Aufgaben für alle oben genannten Aufgaben umfassen das Einbinden von Xdebug in Visual Studio Code, sodass wir eine wörtliche Darstellung der Leistung von WordPress (und damit unserer Arbeit) erhalten, was es tut und so weiter, wann immer es im Browser ausgeführt wird.

Lassen Sie uns damit beginnen.

1 Installieren der erforderlichen Erweiterungen

Stellen wir zunächst sicher, dass die PHP Debug Extension in Visual Studio Code installiert ist. Suchen Sie im Menü Erweiterungen in der Seitenleiste der IDE nach PHP Debug, und Sie sollten einen Bildschirm wie den folgenden sehen.

Wenn die Erweiterung noch nicht installiert ist, fahren Sie fort und installieren Sie sie. Möglicherweise müssen Sie Visual Studio Code neu starten, damit die neue Erweiterung wirksam wird.

Ab hier gibt es einige zusätzliche Konfigurationseinstellungen, die wir überprüfen müssen, bevor wir versuchen, Code zu debuggen.

2 Xdebug konfigurieren (noch mehr!)

Erinnern Sie sich an den vorherigen Beitrag, dass wir Xdebug in unsere php.ini -Datei aufnehmen mussten. Insbesondere mussten wir die folgende Codezeile hinzufügen, um Xdebug zu aktivieren:

zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"

Jetzt müssen wir ein bisschen mehr arbeiten.

1. Wir müssen der php.ini -Datei, auf die im letzten Beitrag verwiesen wird, eine Konfigurationszeile hinzufügen.
2. Wir müssen ein Demo-Skript einrichten, um sicherzustellen, dass es einen richtigen Xdebug-Abschnitt gibt,
3. Wir müssen Visual Studio Code konfigurieren

Glücklicherweise sind alle oben genannten Aufgaben relativ schnell erledigt. Zunächst lautet die Konfigurationszeile, die Sie Ihrer Datei hinzufügen möchten, wie folgt:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Richten Sie als Nächstes ein Demo-Skript ein und verbinden Sie es mit Valet. Sie können dies ganz einfach tun, indem Sie ein Verzeichnis auf Ihrem Desktop erstellen, etwas wie test.php erstellen und dann phpinfo(); zur Datei.

Verknüpfen Sie danach das Verzeichnis und starten Sie Valet neu. Ich habe zufällig mein Verzeichnis example genannt und eine test.php -Datei in das Verzeichnis abgelegt.

Wenn alles richtig konfiguriert ist, sollten Sie die Datei in Ihren Browser laden können und so etwas wie das Folgende sehen:

Und jetzt müssen wir Xdebug konfigurieren. Unter der Annahme, dass alle oben genannten Punkte gut verlaufen sind und die Erweiterungen ordnungsgemäß installiert sind und ausgeführt werden, sollte die Arbeit mit Visual Studio Code einfach sein.

Natürlich brauchen wir ein Demo-Skript, das wir testen können, also habe ich etwas geschrieben, das trivial ist, Ihnen aber eine Vorstellung davon gibt, was Sie beim Setzen von Breakpoints erwarten können und was nicht.

Wenden wir uns nun der IDE zu. Klicken Sie in Visual Studio Code auf das Debug -Symbol, das sich direkt über dem Erweiterungssymbol und direkt unter dem Quellcodeverwaltungssymbol befindet .

In der Seitenleiste ganz oben werden Sie feststellen, dass es eine Wiedergabeschaltfläche gibt. Daneben befindet sich eine Dropdown-Liste. Es kann "Keine Konfiguration" lauten. Wenn dies der Fall ist, und ich gehe davon aus, dass dies der Fall ist, müssen Sie einige sehr spezifische Schritte befolgen, um sicherzustellen, dass das Debugging ordnungsgemäß funktioniert.

1 Öffnen Sie das Verzeichnis des Skripts

Sie müssen sicherstellen, dass Sie sich im Verzeichnis des Skripts in Visual Studio Code befinden.

Das heißt, es reicht nicht aus, sicherzustellen, dass Sie nur eine Datei geöffnet haben. Visual Studio Code muss wissen, aus welchem ​​Verzeichnis Sie arbeiten (weil es ein verstecktes .vscode- Verzeichnis innerhalb des übergeordneten Verzeichnisses erstellt).

2 Erstellen Sie die Startkonfiguration

Die standardmäßige Startkonfiguration sollte sofort einsatzbereit sein, basiert jedoch auf dem vorherigen Schritt.

Sobald Sie ein Verzeichnis (in meinem Fall dasjenige, das test.php enthält) in Visual Studio Code geöffnet haben, starten Sie die Befehlspalette (Sie können dies über eine Verknüpfung tun, die von Betriebssystem zu Betriebssystem unterschiedlich ist, oder über das Hilfemenü und wählen Sie dann Befehlspalette).

Sobald es angezeigt wird, geben Sie > launch.json ein, und Sie erhalten die Option, die Datei launch.json anzuzeigen. Out of the Box sollte es so aussehen :

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

An diesem Punkt sollte das Debug – Menü so etwas wie Launch Current Open Script neben dem Play-Symbol haben. Wenn dies nicht der Fall ist, haben Sie die Möglichkeit, etwas wie PHP auszuwählen (da wir die Erweiterung installiert haben).

Wählen Sie in diesem Fall diese Option aus.

3 Legen Sie einige Haltepunkte fest

Jetzt ist es an der Zeit, den Debugger in Aktion zu sehen. Fahren Sie an dieser Stelle fort und starten Sie ein Browserfenster mit Ihrem Testskript.

Meine ist einfach:

Hüpfen Sie danach in Ihre IDE und klicken Sie dann auf den linken Bereich links neben der Zeilennummer. Dadurch werden einige Haltepunkte gesetzt.

Hier ist ein Beispiel:

Klicken Sie nun auf die Play- Schaltfläche für den Debugger. Sie sollten sofort bemerken, dass die Statusleiste orange wird und einige Debugging-Steuerelemente (für Continue, Step In, Step Out, Restart und Stop). Diese interessieren uns im Moment nicht, da wir uns im nächsten Beitrag genauer damit befassen werden.

Beachten Sie auch, dass Ihr linker Bereich einige Informationen über Variablen, Uhren usw. enthält. Wenn Sie Haltepunkte für Ihre lokalen Variablen gesetzt haben, werden Sie feststellen, dass $exampleName hervorgehoben, aber wahrscheinlich nicht initialisiert ist.

Klicken Sie in den neu erschienenen Steuerelementen auf die Schaltfläche Wiedergabe, und es sollte bis zum nächsten Haltepunkt ausgeführt werden.

Die Zeile wird nun hervorgehoben und im Debugging -Bereich erhält $exampleName einen Wert. In meinem Fall ist das Alice.

Sie können so viel damit herumspielen, wie Sie möchten, um ein Gefühl dafür zu bekommen, wie der Debugger funktioniert.

Beim nächsten Mal Screencasts

Debuggen ist leistungsfähig, kann aber in vielerlei Hinsicht entmutigend sein. Ab dem nächsten Beitrag beginne ich damit, einige Screencasts zu teilen, die erklären, wie man:

• Debuggen von Funktionen und Variablen,
• Werte im laufenden Betrieb ändern,
• mit der Debug-Konsole arbeiten,
• und mehr.

Diese werden etwas mehr Zeit in Anspruch nehmen, da es sich um Videos handelt, in denen erläutert wird, wie dies zu tun ist, aber der Nutzen sollte groß sein.

Wenn Sie noch nicht die Gelegenheit hatten, sich mit allen Inhalten dieser Serie vertraut zu machen, kann ich sie nur wärmstens empfehlen.

📣 Ein Hinweis für Mitgliedervorteile

Beachten Sie jedoch, dass ich vor dem nächsten Beitrag zu Screencasts und der nächsten Folge dieser Serie einige Ankündigungen speziell für Mitglieder der Website machen möchte, die Rabatte auf WordPress-basierte Software beinhalten.

Ich werde nächste Woche mehr darüber berichten.