Website richtig testen

In diesem Artikel geben wir dir ein paar nützliche Tipps, wie du deine Website richtig testen kannst oder im Fall eines Problems, das Problem selbst lösen oder an den richtigen Entwickler weitergeben kannst. Wir nutzen hierfür den Google Chrome Browser, für Firefox ist die die Vorgehensweise aber sehr ähnlich. Solltest du die Schritte aus diesem Artikel nicht in Firefox nachvollziehen können, lade dir bitte Google Chrome herunter.

Browser-Caching deaktivieren

Eine der häufigsten Ursachen für Anzeige- oder Funktionsfehler veraltete Dateien im Browser-Cache. Um zu verhindern, dass du beim Testen etwas aus deinem Browser-Cache angezeigt bekommst, deaktiviere den Cache so lange die Entwicklertools des Browser offen sind. Unsere Anleitung bezieht sich auf den Google Chrome Browser. Dazu gehe wie folgt vor:

Entwicklertools öffnen

Caching deaktivieren

Nachdem die Entwicklertools offen sind, klicke wie im Video auf die 3 Punkte oben rechts und wähle die Settings / Einstellungen aus. Du kannst alternativ auch die F1-Taste drücken.

In den Einstellungen scrolle etwas nach unten bis du Network siehst und aktiviere dort die Option Disable cache (while DevTools is open). Klicke anschließend auf das kleine x oben rechts, um die Einstellungen zu schließen, lasse aber weiterhin die Entwicklertools offen. Durch diese Einstellungen wird dein Browser jetzt keinen Cache mehr verwenden, so lange die Entwicklertools offen sind. Dadurch kannst du verhindern, dass dir veraltete Informationen angezeigt bzw. veraltete Dateien geladen werden. Der Cache bleibt nur im Tab mit den geöffneten Entwicklertools deaktiviert. Wenn du die Entwicklertools schließt, wird dein Browser wieder Daten aus seinem Cache laden.

Website auf JavaScript-Fehler überprüfen

Bevor du ein neues Plugin installierst und aktivierst, stelle immer sicher, dass deine Website frei von Fehlern ist. Nicht selten treten Probleme mit neuen Plugins auf, die durch bereits vorhandene Fehler auf der Website entstehen. Das Problem hat seine Ursache dann nicht im neuen Plugin und eine Lösung muss daher für die bereits vorher bestehenden Zustände gesucht werden. Dafür überprüfen wir die Website auf JavaScript-Fehler.

In den Entwicklertools klicke auf den Tab Console / Konsole und prüfe, ob du dort Meldungen in roter Schrift siehst. Gelbe Meldungen kannst du für diesen Fall erst einmal ignorieren, rote Meldungen sind aber in aller Regel ein Problem und müssen korrigiert werden. Hier zeigen wir dir drei typische Fehler und geben dir Tipps, was du gegen sie unternehmen kannst. Diese Fehlermeldungen werden so nicht 1 zu 1 bei dir auftauchen!

Uncaught TypeError: Cannot read property - Variante A

Ein typischer Fehler ist der Uncaught TypeError, der bei unsauberer Programmierung auftritt. In diesem Fall wird der Fehler in der Datei camera.js ausgelöst. Wenn du mit der Maus über camera.js?ver=5.2.2:863 fährst, wird dir der Pfad der Datei angezeigt. Durch den Pfad kannst du erkennen, ob die Datei zu deinem Theme oder zu einem bestimmten Plugin gehört. Erstelle einen Screenshot der Fehlermeldung und kontaktiere den Entwickler des Plugins oder des Themes, damit der Fehler korrigiert werden kann.

Uncaught TypeError: Cannot read property - Variante B

Wie du rechts am Dateinamen 922f580....js erkennen kannst, scheint dieser keine vernünftige Bezeichnung zu haben. Das ist häufig ein Hinweis darauf, dass ein Plugin das JavaScript deiner Website zu einer Datei zusammengefasst hat. Plugins wie Autoptimize, Borlabs Cache und WP Rocket führen zur Optimierung der Ladezeit deiner Website das JavaScript zusammen. Hier können allerdings Fehler entstehen, z.B. wenn in einer JavaScript-Datei bereits ein Syntax-Fehler vorhanden war, kann dieser in der zusammengeführten Datei negative Auswirkungen auf den restlichen Code haben. In solchen Fällen deaktiviere zunächst die Zusammenführung von JavaScript und prüfe, ob der Fehler verschwindet. Falls ja, kannst du die Zusammenführung nicht benutzen.

Uncaught - Fehler die z. B. nach einem Klick entstehen

Der Fehler Uncaught M {message: "adsbygoogle.push()... tritt häufig in Verbindung mit Borlabs Cookie und Google AdSense auf, nachdem du in der Cookie-Box eine Auswahl getroffen hast. Die Ursache ist, dass auf deiner Website bereits Google AdSense geladen wurde, bevor der Besucher eine Auswahl in der Cookie-Box getätigt hat. Wenn er in der Cookie-Box seine Zustimmung zu AdSense gibt, wird Google AdSense ein weiteres Mal eingebunden und es kommt zur Fehlermeldung. Du kannst das Problem ganz einfach lösen, in dem du die Einbindung von Google AdSense aus deiner Website entfernst, da es nur durch Borlabs Cookie geladen werden darf.

Weitere typische Fehler

Failed to load resource: the server responded with status 403 ()

Der Fehler trifft auf, wenn versucht wurde eine Datei zu laden, für die keine Zugriffsberechtigung besteht. Fahre mit der Maus über den Dateinamen und lass dir die Quelle der Datei anzeigen. Anhand der URL bzw. des Pfades zur Datei kannst du Rückschlüsse ziehen, welches Plugin bzw. welcher Service/Anbieter den Fehler verursacht.

GET https://meine-website.de/mein-bild.jpg 404 (Not Found)

Ein 404 Fehler tritt immer dann auf, wenn eine Datei unter einer URL nicht gefunden werden konnte. In der Konsole siehst du bereits die URL und musst jetzt nur noch auf deiner Website die Stelle finden, die den Aufruf verursacht.

Eine Möglichkeit diese Stelle zu finden ist in den Entwicklertools auf Elements zu klicken, unter macOS ⌘ + F bzw. unter Windows STRG + F zu drücken und in der unten aufgehenden Suche nach dem Dateinamen zu suchen, wie im folgenden Bild.

Fehlerquelle eingrenzen

Es kann vor kommen, dass ein Plugin erst in Kombination mit anderen Plugins Probleme verursacht. Der Fehler muss dabei nicht zwangsläufig beim Plugin mit dem Problem liegen - nicht selten entstehen durch andere Plugins, die sich nicht an den WordPress Codex halten, Konflikte. Um die Ursache ausfindig machen zu können, musst du wie folgt vorgehen:

1. Deaktiviere alle Plugins
2. Aktiviere das Plugin, dass nicht korrekt funktioniert
   1. Funktioniert das Plugin jetzt, gehe weiter zu Schritt 3
   2. Funktioniert das Plugin nicht, wende dich an den Plugin-Entwickler
3. Aktiviere das nächste Plugin und wiederhole diesen Schritt so lange, bis der Fehler erneut auftritt

Falls du auf deiner Live-Website diese Schritte nicht vornehmen kannst, empfehlen wir dir das Plugin WP Staging zu installieren. Mit diesem Plugin kannst du eine Kopie deiner Website in einen Unterordner erstellen und dort die Tests durchführen. Das Plugin ist kostenlos und die Einrichtung ein Kinderspiel. Deine Live-Website bleibt unberührt und in der erzeugten Staging Umgebung kannst du dich austoben, ohne die Gefahr, dass etwas auf deiner Live-Website kaputt geht.