Debugging in Local (by Flywheel): Ein Leitfaden für Anfänger

Veröffentlicht: 2022-08-13

Probleme auf einer Website oder sogar innerhalb der lokalen Installation einer Website zu haben, kann nervenaufreibend sein. Schließlich können Leistungsprobleme oder Fehler auf der Website zu Ausfallzeiten der Website führen. Und Website-Ausfallzeiten können verlorenen Traffic, verpasste Gelegenheiten und sogar entgangenen Umsatz bedeuten.

Glücklicherweise gibt es zahlreiche Debugging-Lösungen zum Identifizieren und Reparieren von Site-Problemen. Aber wie können Sie wissen, was für Ihre Situation am besten funktioniert?

In Local steht ein mehrgleisiger Ansatz zum Debuggen zur Verfügung. Hier besprechen wir die in Local enthaltenen Standard-Debug-Optionen sowie Möglichkeiten zum Identifizieren von Fehlern und zusätzliche Add-Ons, mit denen Sie Probleme schneller und effizienter erkennen und beheben können.

Was ist Xdebug in Local?

Bevor wir diskutieren können, wie man in Local debuggt, müssen wir zuerst über Xdebug sprechen, das in Local vorhandene Debugging-Tool und einige seiner bemerkenswertesten Funktionen.

Xdebug ist eigentlich eine PHP-Erweiterung, die den Debugging-Prozess vereinfacht. In erster Linie macht es die Formatierung für die Funktion var_dump () sauberer und fügt mehr Warnungen und Hinweise zu bestimmten Fehlern hinzu. Auf diese Weise sorgt es für eine intuitivere Benutzererfahrung.

xdebug var dump Unterschiede

Falls Sie es nicht wissen, var_dump() ist ein nützliches Stück PHP, das schnell aufdeckt, was mit Ihrem Code nicht stimmt. Aber der Unterschied hier ist, dass, wenn Sie Xdebug nicht zur Hand hatten, der Code erzeugt wird, wenn Sie var_dump() aufrufen wäre viel schwerer zu lesen. Außerdem müssten Sie Ihr PHP auf eine ganz bestimmte Weise formatieren, wenn var_dump() aufrufen. an erster Stelle.

Xdebug ist in Local verfügbar, da es eine größere Tiefe an Informationen über auftretende Fehler bietet. Es wird auch mit einem Step-Debugger geliefert, der den Debugging-Prozess rationalisiert, insbesondere bei größeren Problemen. Der Schritt-Debugger funktioniert, indem er Ihnen ermöglicht, Ihren Code Schritt für Schritt an bestimmten Haltepunkten auszuwerten. Dadurch können Sie den Code in kleineren Abschnitten bewerten und Probleme leichter lokalisieren.

Und das Beste daran ist, dass Xdebug standardmäßig in Local aktiviert ist, sodass Sie nicht einmal mit irgendwelchen Einstellungen herumspielen müssen, um loszulegen. Öffnen Sie einfach Local und gehen Sie.

So debuggen Sie eine Website in Local

Sie können eine Website in Local auf einige wichtige Arten debuggen. Hier sind die wichtigsten Schritte, die wir besprechen werden:

  1. Identifizieren von Browserkonsolenfehlern
  2. Verwenden des Abfragemonitors
  3. Über Xdebug und VS-Code
  4. Mit Xdebug und PhpStorm
  5. Verwendung von Xdebug für Schritt-Debugging

Tauchen wir ein.

1. Identifizieren Sie Browserkonsolenfehler

Firefox-Browserkonsole in local

Der erste Schritt beim Debuggen ist die Verwendung der Browserkonsole, die Teil aller Browser-Entwicklertools ist. Auf diese Weise können Sie Fehler auf Webseiten ohne spezielle Tools erkennen. Starten Sie einfach Local, rufen Sie die betreffende Seite mit dem Browser Ihrer Wahl auf und verwenden Sie die Konsole, um Fehler zu finden. Im Folgenden finden Sie eine Aufschlüsselung des Zugriffs auf die Browserkonsole über mehrere Browser hinweg.

Wenn Sie Chrome verwenden …

  1. Öffnen Sie DevTools, indem Sie im Chrome-Browsermenü zu Weitere Tools > Entwicklertools gehen. Alternativ drücken Sie Strg/Befehl+Umschalt+I .
  2. Klicken Sie auf die Registerkarte Konsole .
  3. Wenn Fehler vorhanden sind, sollten sie jetzt sichtbar sein. Wenn nicht, laden Sie die Webseite neu, um sie zu generieren.
  4. Notieren Sie sich die Art des Fehlers, wo er sich befindet, und seine Zeilennummer in der Browserkonsole.

Wenn Sie Firefox verwenden …

  1. Öffnen Sie die Browser-Entwicklertools, indem Sie im Firefox-Menü zu Weitere Tools > Web-Entwicklertools gehen. Strg/Cmd+Shift+I funktioniert auch hier.
  2. Klicken Sie auf die Konsole Tab. Alternativ können Sie die Konsole auch direkt über More Tools > Browser Console aufrufen .
  3. Alle Fehler sollten jetzt sichtbar sein. Wenn nicht, laden Sie die Seite neu.

Wenn Sie Safari verwenden …

  1. Schalten Sie die Entwicklertools ein, indem Sie im Safari-Menü zu Einstellungen > Erweitert gehen. Option+Cmd+I ist hier dein Freund.
  2. Aktivieren Sie das Kontrollkästchen neben Entwicklungsmenü in der Menüleiste anzeigen . Schließen Sie dann das Dialogfeld.
  3. Klicken Sie auf Entwickeln > Fehlerkonsole anzeigen . Gleiches Angebot wie oben.

Bewaffnet mit diesen Informationen können Sie zu dem in Local eingerichteten Dateisystem zurückkehren und das spezifische Codebit finden, das die Probleme verursacht, und dann eine Lösung implementieren. Verwenden Sie die Schaltfläche Gehe zum Site-Ordner , um auf den Speicherort Ihrer lokalen Websites zuzugreifen.

gehen Sie zum Site-Ordner

2. Verwenden Sie den Abfragemonitor, um Probleme mit der Websiteleistung zu beheben

Sie können Website-Probleme auch direkt in WordPress identifizieren und beheben. Tatsächlich ist das Query Monitor-Plugin eine fantastische Wahl zum Debuggen und insbesondere zum Identifizieren von Leistungsproblemen. Dies ergibt ein hilfreiches Paar mit integrierten lokalen Debugging-Tools und ist besonders hilfreich, um Probleme mit Plugins und Designs von Drittanbietern zu erkennen.

Sie können das Plugin wie jedes andere installieren. Gehen Sie einfach zu Plugins > Neu hinzufügen und suchen Sie nach dem Namen. Suchen Sie es in der Liste und klicken Sie auf Jetzt installieren und dann auf Aktivieren , sobald es heruntergeladen wurde.

Abfragemonitor installieren

Was Query Monitor Ihnen sagen kann

Nach der Installation des Plugins sollten Sie oben im WordPress-Dashboard eine neue Menüoption sehen.

Menü der Admin-Leiste des Abfragemonitors

Wenn Sie den Mauszeiger darüber bewegen, wird eine Dropdown-Liste mit Query Monitor-Tools und -Optionen angezeigt. Wenn Sie eine davon auswählen, wird unten ein Menü geöffnet, in dem Sie weitere Details über die aktuelle Seite erfahren können.

Monitor-Konsole abfragen

Query Monitor gibt Ihnen unter anderem einen Überblick über die Leistung Ihrer Seite, einschließlich:

  • Spitzenspeicherauslastung. Dieses Tool zeigt Ihnen, wie viel Speicher zu einem bestimmten Zeitpunkt zum Generieren einer Seite verwendet wird.
  • Seitenerstellungszeit. Zeigt Ihnen die Zeit an, die zum Generieren einer Seite benötigt wird.
  • Datenbankabfragezeit. Schließlich zeigt Ihnen dieses Tool, wie lange die Datenbank gebraucht hat, um auf Design- oder Plugin-Anfragen zu reagieren.

Neben Leistungsproblemen kann dieses Plugin auch PHP-Fehler und -Hinweise identifizieren – ähnlich wie Xdebug es tut. Seine Bemühungen konzentrieren sich jedoch auf Themen und Plugins von Drittanbietern. Was hier praktisch ist, ist, dass, wenn Fehler vorhanden sind, innerhalb des Tools eine neue Registerkarte mit dem treffenden Namen PHP Errors erscheint, die jeden Fehler mit seiner Sicherheitsbedrohung auflistet. Es wird Ihnen auch die Codezeile mitteilen, in der der Fehler auftritt, sowie den spezifischen Fehlercode oder Hinweis.

Dies ist jetzt wirklich hilfreich für Websites, die bereits live sind oder sich in der späten Testphase befinden. Wenn Sie sich jedoch noch in der lokalen Entwicklungsphase befinden, ist die Verwendung von Xdebug in Local die beste Wahl.

3. Einrichten von Xdebug und VS-Code zum Debuggen

Zurück in Local können Sie Xdebug auf verschiedene Weise verwenden, um lokales Site-Debugging durchzuführen. Um sozusagen mehr für Ihr Geld zu bekommen, können Sie der Gleichung die Leistung von VS Code hinzufügen.

VS Code ist ein Open-Source-Code-Editor mit erweiterten Tools und einer intuitiveren Benutzeroberfläche. Es macht diesen zeilenweisen Debugging-Prozess viel intuitiver und angenehmer für die Augen.

Visual Studio-Code vscode-Code-Editor

Sie können VS Code mit großem Erfolg mit dem Xdebug Step Debugger verbinden. So richten Sie es für die Verwendung in Local ein:

  1. Laden Sie VS Code herunter und installieren Sie es gemäß den Anweisungen des Entwicklers.
  2. Laden Sie eine PHP-Debugger-Erweiterung herunter und installieren Sie sie. Die Dokumentation von Local empfiehlt die PHP-Debug-Erweiterung für diese Aufgabe.
  3. Klicken Sie unter Lokal auf Add-ons > Xdebug + VS Code .
  4. Klicken Sie auf Add-on installieren .
  5. Wenn Sie fertig sind, klicken Sie auf Enable & Relaunch .
  6. Öffnen Sie eine Site in Lokal und klicken Sie dann auf die Registerkarte Dienstprogramme .
  7. Klicken Sie auf Ausführungskonfiguration zu VS Code hinzufügen .
  8. VS Code wird gestartet und Sie können dann den Debugging-Prozess starten.

Wenn Sie VS Code nicht bevorzugen, können Sie ein anderes Bearbeitungstool für die Aufgabe verwenden.

4. Einrichten von Xdebug und PhpStorm zum Debuggen

lokales Add-On für xdebug und phpstorm

Eine weitere Option ist die Verwendung von PhpStorm mit Xdebug. Sie können es über ein Add-On zu Local hinzufügen und es funktioniert in Verbindung mit dem Xdebug Step Debugger. Die Installation und Einrichtung ist dem oben für VS Code beschriebenen Prozess sehr ähnlich. Um es zu verwenden, führen Sie die folgenden Schritte aus:

  1. Laden Sie PhpStorm herunter und installieren Sie es.
  2. Klicken Sie unter Lokal auf Add-ons > Xdebug + PhpStorm .
  3. Klicken Sie auf Add-on installieren .
  4. Wieder aktivieren und neu starten , nachdem es fertig ist.
  5. Öffnen Sie eine beliebige Site in Lokal und klicken Sie auf Dienstprogramme Tab.
  6. Klicken Sie auf Ausführungskonfiguration zu PhpStorm hinzufügen .
  7. Legen Sie bei aktivem PhpStorm Breakpoints fest, indem Sie auf den Bundsteg an der bestimmten Codezeile klicken, an der der Breakpoint auftreten soll.
  8. Klicken Sie auf Wiedergabe , um den Debugging-Vorgang zu starten.

Wenn Sie mehr Anleitung durch den Debugging-Prozess wünschen, ist Step Debugging immer eine Option.

5. Verwendung von Xdebug für Schritt-Debugging

Step Debugging ist ein äußerst nützliches Tool und Teil von Xdebug, das Sie im Wesentlichen durch den Debugging-Prozess führt. Es funktioniert mit VS Code und PhpStorm (sowie vielen anderen IDEs und Texteditoren), um detaillierte und dennoch einfach zu befolgende Debugging-Tools, Schritte und Protokolle bereitzustellen.

In Local müssen Sie nichts tun, um Xdebug einzurichten – es ist standardmäßig automatisch aktiviert. Obwohl es komplexere Setup-Anweisungen gibt, wenn Sie eine komplizierte Testumgebung haben (mit mehreren Systemen, die gleichzeitig beitragen), gehen wir davon aus, dass Sie das Debugging vorerst nur auf einem System in einer Installation von Local durchführen müssen.

Um das schrittweise Debuggen zu verwenden, müssen Sie eigentlich nur die in den beiden vorherigen Abschnitten beschriebenen Schritte ausführen. Die Funktion funktioniert sowohl mit VS Code als auch mit PhpStorm. Sobald alles eingerichtet ist, werden automatisch Haltepunkte gesetzt und der Code nacheinander abgespielt. Dies bietet eine intuitive Möglichkeit, Ihren Code auszuführen, Fehler anzuzeigen und sie zu beheben, sobald sie auftreten.

Debugging in Local leicht gemacht

Wie Sie sehen können, ist das Debuggen in Local eigentlich ein ziemlich einfacher Prozess, der nur eine minimale Einrichtung erfordert, um loszulegen. Das primäre Debugging-Tool ist bereits standardmäßig vorhanden. Alles, was Sie tun müssen, ist, Ihren bevorzugten Texteditor oder Ihre bevorzugte IDE einzurichten, ein oder zwei Add-Ons zu konfigurieren, und schon sind Sie fertig. Natürlich müssen Sie die eigentlichen Fehlerbehebungen durchführen, um Ihre Website in Topform zu bringen. Aber zumindest kann der Debugging-Prozess selbst mit Leichtigkeit und minimalem Aufwand ausgeführt werden.

Was sind Ihre bevorzugten Tools zum Debuggen in Local? Wir würden gerne Ihr Feedback in den Kommentaren unten hören.