Fehler mit der Browserkonsole debuggen

Wenn eine Schaltfläche nichts tut, ein Formular nicht abgeschickt wird oder eine Seite kaputt aussieht, zeigt sich die Ursache fast immer in den Entwicklerwerkzeugen des Browsers. Alle haben dieselben zwei Registerkarten, die wir verwenden: Konsole und Netzwerk.

Die Werkzeuge öffnen

• Firefox: Strg + Umschalt + K (Command + Option + K unter macOS) öffnet die Konsole.
• Chrome und Edge: Strg + Umschalt + J (Command + Option + J unter macOS) öffnet die Konsole.
• Jeder Browser unter Windows oder Linux: F12 öffnet die Werkzeuge; wählen Sie dann die Registerkarte.
• Safari: Aktivieren Sie vorher Safari > Einstellungen > Erweitert > Funktionen für Webentwickler anzeigen. Drücken Sie danach Command + Option + C.

Es öffnet sich ein Bereich wie dieser (im Screenshot Firefox):

Konsole

Die Konsole zeigt die Fehler und Warnungen der Seite: JavaScript-Fehler, Ressourcen, die blockiert wurden, weil sie kein https verwenden, Kodierungsprobleme usw. Fehler erscheinen rot, Warnungen gelb.

So finden Sie den Fehler, der Sie interessiert:

1. Klicken Sie auf das Papierkorbsymbol, um die bisherigen Meldungen zu löschen.
2. Wiederholen Sie einmal, was nicht funktioniert (die Schaltfläche klicken, das Formular absenden …).
3. Achten Sie auf den ersten roten Fehler, der erscheint. Rechts sehen Sie die Datei und die Zeile, die ihn verursachen.

Die häufigsten Meldungen und was sie bedeuten:

• Uncaught TypeError / Uncaught ReferenceError: ein Fehler in einem Skript. Die Datei rechts verrät Ihnen, aus welchem Plugin, Theme oder Modul er stammt (zum Beispiel wp-content/plugins/NOMBRE/...). Versuchen Sie, es zu aktualisieren oder zu deaktivieren.
• Mixed Content: Die Seite lädt über https, aber eine Ressource (Bild, Skript, CSS) wird über http angefordert. Der Browser blockiert sie. Ändern Sie diese URL in der Konfiguration oder im Inhalt der Website auf https.
• blocked by CORS policy: Die Website versucht, Daten von einer anderen Domain zu lesen, die das nicht erlaubt. Das passiert oft nach einem Domainwechsel oder beim Wechsel von www zu ohne www: Prüfen Sie, dass die URL der Website in der Konfiguration der Anwendung die ist, die Sie verwenden.
• Failed to load resource: the server responded with a status of 404 (oder 403, 500): Eine Datei konnte nicht geladen werden. Suchen Sie sie in der Registerkarte Netzwerk, um zu sehen, welche es ist.

Wenn die Seite Sie beim Fehler auf eine andere weiterleitet, aktivieren Sie Logs beibehalten (Firefox) oder Log beibehalten (Chrome), damit die Meldungen nicht gelöscht werden.

Netzwerk

Die Registerkarte Netzwerk zeigt alle Anfragen, die die Seite stellt: das HTML, die Bilder, die Skripte, die Stylesheets und die internen Aufrufe von Schaltflächen und Formularen. Zu jeder sehen Sie den Status, die Methode (GET oder POST), die Größe und die benötigte Zeit. Unten steht die Summe für die Seite.

So verwenden Sie sie:

1. Öffnen Sie die Registerkarte Netzwerk, bevor Sie das Problem nachstellen.
2. Aktivieren Sie Cache deaktivieren (Firefox und Chrome), um das echte Laden zu sehen.
3. Laden Sie die Seite neu oder wiederholen Sie die Aktion, die nicht funktioniert.
4. Suchen Sie die roten Zeilen oder die mit Status 4xx oder 5xx. Wenn eine Schaltfläche oder ein Formular nicht funktioniert, filtern Sie nach XHR (Firefox) oder Fetch/XHR (Chrome).
5. Klicken Sie auf die Anfrage und öffnen Sie Antwort: Oft enthält sie die vollständige Fehlermeldung.

Was jeder Status bedeutet:

• 404: Die Datei existiert unter diesem Pfad nicht. Prüfen Sie die URL oder laden Sie die Datei hoch.
• 403: Der Server verweigert den Zugriff. Das kann eine Dateiberechtigung, eine Regel in der .htaccess oder die Firewall sein.
• 500: Fehler der Anwendung auf dem Server. Die genaue Meldung steht im PHP-Fehlerprotokoll: Das PHP-Fehlerprotokoll aktivieren.
• 502, 503 oder 504: Der Server hat zu lange gebraucht oder war ausgelastet. Sehen Sie sich die Zeitspalte an.

Um herauszufinden, warum eine Website langsam ist, sortieren Sie nach der Spalte Zeit oder Größe: Sie sehen, welches Bild zu schwer ist oder welche Anfrage mehrere Sekunden dauert.

Den Fehler an den Support schicken

Wenn Sie ein Ticket eröffnen, geben Sie die URL, die Uhrzeit, Ihr Vorgehen und einen Screenshot des Fehlers aus der Konsole oder der Anfrage in Netzwerk mit ihrer Antwort an. Bevor Sie eine aus Netzwerk exportierte HAR-Datei weitergeben, bedenken Sie, dass sie Ihre Sitzungs-Cookies enthält: Ein Screenshot ist besser.

In der Konsole lässt sich auch JavaScript-Code ausführen. Fügen Sie niemals Code ein, den Ihnen jemand per E-Mail oder Chat schickt: Das ist eine übliche Methode, um Sitzungen zu stehlen.