Webflow Bugs beheben: Der ultimative Guide inklusive Tools

Mysteriöse Bugs, fehlerhafter Code oder Layouts, die je nach Gerät oder Browser auseinanderfallen – solchen und vielen weiteren Herausforderungen muss sich jeder Webflow-Entwickler früher oder später in seinen Website-Projekten stellen. Dabei springen manche Fehler sofort ins Auge, während andere eine echte Schnitzeljagd erfordern, bevor sie endlich behoben sind.

‍

Doch Bugs sind ein ganz normaler Bestandteil jedes Projekts und können mit der richtigen Vorgehensweise strategisch eingegrenzt und gelöst werden. Aufgrund dessen werfen wir einen Blick auf die effektivsten Schritte und Tools, um Bugs jeder Art anzugehen und deine Fähigkeiten im Problem-Solving zu stärken.

Problem-Solving als Skill

Das Beheben von Bugs auf Webseiten hat wenig mit Glück oder endlosen Forensuchen zu tun, sondern gleicht eher methodischer Detektivarbeit.  Zuerst betrachtest du das Gesamtbild, sammelst schrittweise Details und identifizierst schließlich das Kernproblem. Ab diesem Zeitpunkt ist die Lösung nur noch wenige Internetsuchen entfernt.

‍

Dennoch gibt es einige übergreifende Prinzipien, die du auf jede Website-Bug erneut anwenden kannst:

• Identifikation: Kategorisiere das Problem zunächst grob, bevor du dich in Details vertiefst. Damit kannst du deine nächsten Schritte gezielt anpassen.
• Hypothesen aufstellen: Formuliere begründete Vermutungen basierend auf deinem Wissen und teste sie der Reihe nach, um dich langsam vorzuarbeiten.
• Dokumentierung: Führe ein einfaches Protokoll mit deinen Hypothesen und Tests. So kannst du wiederkehrende Muster erkennen und hast eine Referenz für zukünftige Probleme.
• Nichts überstürzen: Vermeide es, oberflächliche Lösungen aus Foren und Videos blind zu übernehmen, ohne das eigentliche Problem zu verstehen. Oft bleibt der Bug dadurch in Hintergrund bestehen und du verlierst langzeitig den Überblick sowie den Lerneffekt.

Wieso das ganze?

Der Webflow-Designer verbindet im Hintergrund viele komplexe Aspekte wie responsive Breakpoints, Animationen und Custom Code. Deshalb verhält sich die veröffentlichte Seite manchmal anders als im Designer und wird von verschiedenen Geräten sowie Browsern unterschiedlich interpretiert.

‍

Deswegen benötigt es eine strukturierte Vorgehensweise und ein grundlegendes Verständnis, um gegen Probleme jeder Art vorzugehen und stundenlanges Verzweifeln zu vermeiden. Schließlich wollen wir alle mehr Zeit mit den spannenden Teilen verbringen und Bugs so schnell wie möglich aus dem Weg räumen.

‍

Best-Practice: Es ist entscheidend, Bugs so früh wie möglich zu beheben, sobald sie auftauchen. Andernfalls riskierst du, das Problem zu verschlimmern und das gesamte Projekt zu gefährden.

‍

Um diesen Prozess so einfach wie möglich zu gestalten formulieren wir die grundlegenden Prinzipien nun in einen expliziten Plan um, und lernen welche Tools die Suche unterstützen können.

Schritt für Schritt zum Problem

Die folgenden vier Schritte fassen eine allgemein Vorgehensweise zusammen, um richtig über Website-Probleme nachzudenken und strukturiert gegen diese vorzugehen. Dabei kombinieren sie die vorherigen Prinzipien und zusätzliche Hilfsmitteln (im Folgekapitel), um den maximalen Effekt zu erzielen:

1. Analyse: Tritt das Problem wiederholt auf? Welche Bedingungen (Timing, Gerät, Browser, Nutzereingabe) liegen während und nach dem ungewollten Verhalten vor?
2. Eingrenzen: Stelle deine Thesen auf und wähle die richtigen Hilfsmittel, um die Ursache genauer einzugrenzen. (Mehr dazu im nächsten Abschnitt)
3. Mit welchen Hilfsmittel kann ich die Ursache genauer einzugrenzen? (mehr dazu in nächsten Kapitel)
4. Ideen testen: Recherchiere das Problem, um zu verstehen, welche Änderungen im Webflow-Designer zu einer Lösung führen könnten.
5. Verifizieren: Stelle sicher, dass deine Lösung auf allen Geräten und Browsern funktioniert, barrierefrei ist und die Ladezeit der Seite nicht beeinträchtigt. Nutze WAVE oder den Lighthouse-Test für weitere Informationen.

Essenzielle Hilfsmittel, um Probleme einzugrenzen

Der Schritt “Eingrenzen” des oberen Frameworks klingt zwar einfach, stellt sich aber meistens als überaus knifflig heraus, wenn man vor einem unbekannten Problem sitzt. Zum Glück bieten sowohl Webflow als auch dein Browser eine Reihe kostenloser Hilfsmittel an, die dich bei der Fehlersuche unterstützen.

‍

Ein kleiner Tipp vorweg:

Erstelle immer ein Backup im Webflow-Designer, bevor du mit jeglichen Tests beginnst. So kannst du bei Bedarf alle Änderungen rückgängig machen, falls etwas schiefgeht oder du die Originaleinstellungen vergessen hast.

Webflow-spezifische Hilfsmittel

Preview mode

Im Designer kannst du mit dem „Preview“-Modus zwischen Breakpoints wechseln und die Responsiveness deiner Seite auf verschiedenen Bildschirmgrößen testen. So erkennst du schnell defekte Layouts oder Overflow-Probleme noch bevor die Webseite veröffentlicht wird.

‍

Zusätzlich lässt sich die Webseite im Preview Modus mit oder ohne Custom Code anzeigen. Wenn du also einen Code-Fehler vermutest, deaktiviere den Custom Code einfach in der Vorschau (oder kommentiere ihn in den Seiteneinstellungen aus), um Code- und Design-Probleme zu unterscheiden.

Duplizieren und isolieren

Unerwünschte Interaktionen entstehen oft durch andere Elemente oder Einstellungen auf der Seite. Um das zu prüfen, kopiere die betroffenen Komponenten auf eine leere Unterseite. Bleibt das Problem bestehen, liegt die Ursache wahrscheinlich an der Komponente selbst (z. B. fehlerhafte Styles).

‍

Falls das Problem selbst nach deiner Suche im Webflow-Designer nicht zu finden ist, lohnt es sich, die veröffentlichte Seite ein wenig genauer unter die Lupe zu nehmen.

Browser & Debugging Tools

Quellcode inspizieren

Der Seitenquellcode zeigt detailliert an, wie Webflow unsere Einstellungen aus dem Designer in eine vollständige Webseite umgewandelt hat. Klicke dafür mit der rechten Maustaste auf das betroffene Element und wähle die Option “Untersuchen” aus. Nun sollte sich eine Seitenleiste öffnen, in der HTML Struktur und die CSS-Styles zu sehen sind.

‍

Achte bei deiner Untersuchung besonders auf die folgenden Punkte:

• HTML Struktur: Sind alle Elemente vorhanden und in der richtigen Reihenfolge? Sieht die Struktur anders aus als im Webflow-Designer?
• Klassen und IDs: Überprüfe, ob die IDs und Klassennamen mit denen in Webflow übereinstimmen. Falsch platziere Selektoren sind eine häufige Fehlerquelle.
• CSS Konflikte: Schaue dir die CSS-Eigenschaften im Styles-Panel an. Werden Einstellungen durch Browser-Defaults überschrieben? Gibt es Konflikte zwischen globalen Styles und deinen Klassen?

Hinweis: CSS-Eigenschaften mit „!important“ überschreiben immer Konflikte in Klassen.

‍

Custom Code validieren

Webflow validiert selbstgeschriebenen CSS- oder JavaScript-Code nicht vor der Veröffentlichung. Falls dein Projekt also auf eigene Snippets zurückgreift, solltest du diese auf folgende Probleme überprüfen:

• Syntaxfehler: Setzte Tools wie JSHint oder ChatGPT ein, um fehlende Zeichen und inkorrekte Ausdrücke, die das Kompilieren des Codes beeinträchtigen, zu finden.
• Ausführungsfehler: Öffne die Browserkonsole (F12) und such nach Fehlermeldungen, die die Ausführung des Codes stoppen.

‍

Best Practice: Wenn du den Fehler nicht sofort findest, füge Debugging-Nachrichten (z. B. console.log("Element gefunden")) an Schlüsselstellen in deinem JavaScript ein. So kannst du den Code-Ablauf in der Konsole der veröffentlichten Seite verfolgen und sehen, wo er abbricht.

Cross-Browser- und Cross-Gerät-Tests

Chrome ist nicht der einzige Browser der Welt und nicht jede Person verwendet einen Desktop Computer. Daher sollte deine Webseite auch auf Browsern wie z. B. Safari oder Firefox, sowie einem breiten Spektrum an Bildschirmgrößen funktionieren.

‍

Teste deine Webseite daher daher auf unterschiedlichen Geräten und Systemen auf Fehler, oder verwende Emulatoren wie Browserstack oder LambdaTest, um realistische Szenarien nachzustellen.

Ein echtes Beispiel: Das teleportierende Cookie-Popup

Damit du eine bessere Vorstellung des Prozess bekommst, stelle ich ein aktuelles Beispiel von meiner Webseite vor. Dieser Vorfall betrifft das Cookie-Popup und involviert eine Kombination aus CSS-Positionierung, Custom Code und Animationen, also das volle Paket.

‍

Dabei versuche ich mit dir auf die Lösung hinzuarbeiten, indem ich meinen Gedanken schrittweise darstelle und zeige, wie die obigen Tools zu dem Prozess beigetragen haben.

1. Das Problem definieren

Das Problem betrifft die EfficiencyLab-Webseite und den fix positionierten Cookie-Button (inklusive Popup) unten links am Bildschirmrand.

‍

Sobald die Seite geladen war, verschwand der Button nach wenigen Sekunden und tauchte am Seitenende im Footer auf. Das Popup, das eigentlich mittig im Bildschirm erscheinen sollte, verschob sich zur Mitte der gesamten Webseite.

‍

Dokumentierung: Das Verhalten trat wiederholt in Chrome und Safari auf, sowohl auf Desktop als auch Mobilgeräten. Es gab eine Verzögerung von etwa 3 Sekunden nach dem Laden, was auf etwas Dynamisches wie eine Animation oder Custom-Code-Funktion hindeutet. Bei einem reinen CSS-Bug wäre das Problem schon sofort zu Page-Load vorhanden gewesen.

2. Das Problem eingrenzen

Der erste Versuch

• Vermutung: Der Fehler könnte zwischen einem Konflikt der fixen Positionierung des Cookie-Buttons und einem anderen Popup der Seitennavigation entstehen.
• Test: Den Cookie-Button auf eine Unterseite ohne die Navigation kopieren und die Webseite veröffentlichen.
• Observation: Der Cookie-Button teleportiert sich nicht wie auf der Homepage, und das Popup erscheint mittig auf dem Bildschirm. Das Problem liegt nicht mehr vor.

Der zweite Versuch

• Vermutung: Das Problem könnte nicht an der Navigation, sondern einem anderen Element auf der Homepage liegen.
• Test: Die Navigation wird ebenfalls auf der Unterseite einfügt.
• Observation: Der Cookie-Button und das Popup funktionieren weiterhin ohne Probleme. Der Fehler tritt (wahrscheinlich) also nur auf der Homepage auf.

Der dritte Versuch

Nun ist es Zeit, den Quellcode der veröffentlichten Seite im Browser genauer zu untersuchen.

• Vermutung: Das Problem könnte mit einer Überschneidung der Klassen oder Animation zu tun haben.
• Test: Quellcode de Seite inspizieren und prüfen, ob alle Elemente die richtigen Eigenschaft erhalten oder sich nach ~3 Sekunden verändern.
• Oberservation: Das Body-Element bekommt kurze Zeit nach Laden der Webseite eine CSS-Eigenschaft translate: transform(0, 0, 0). Aus Erfahrung weiß ich, dass keine meiner Animationen oder Code-Snippets das <body>-Element adressiert und diese Eigenschaft nicht vorhanden sein sollte. Wenn die Transform-Eigenschaft in den Chrome Dev-Tools deaktiviert wird, positionieren sich der Cookie-Button und das Popup wieder korrekt.

3. Die Ursache finden

Da nun bekannt ist, wie das Problem gelöst werden kann, fehlt nur noch der Grund. Nach überfliegen des Custom-Code konnte dieser vorerst ausgeschlossen werden, da das <body>-Element nirgends als Selektor erwähnt war. Da der Effekt jedoch erst einige Sekunden nach dem Laden auftrat, bleiben somit nur noch die GSAP Animationen übrig.

‍

Beim Durchsuchen der GSAP-Animationen auf der Homepage bin ich auf eine leere “scale” Eigenschaft ohne Wert oder Selektor gestoßen. Wie sich herausstellt, werden solche Eigenschaften standardmäßig auf das <body>-Element angewendet, was unter anderem zu translate: transform(0, 0, 0) führte.

‍

Diese kleine Änderung passt die Referenz für fix Positionierte Element (wie den Cookie-Button oder das Popup) an und führt die ungewollte Verschiebung kurz nach dem vollständigen Laden der Seite herbei.

‍

Meine Lektion: Überprüfe immer die Selektoren in GSAP-Animationen und entferne leere Eigenschaften.

Fazit

Ein strukturierter Ansatz, um Probleme schrittweise einzugrenzen und nachhaltig zu lösen, ist ein wertvoller Skill für jeden Webflow-Entwickler. Dabei gewinnst du nicht nur ein tieferes Verständnis für die Technologien hinter deiner Seite, sondern baust eine Erfahrungsdatenbank auf, mit der du zukünftige Probleme schneller und gezielter lösen kannst.

‍

Dieser Prozess illustriert sich Beispielhaft an der Cookie-Sage die ich oben durchlaufen habe. Und du kannst dir sicher sein: Wenn ich jemals wieder auf ein ähnliches Problem stoße, dauert die Lösung keine Stunden mehr, sondern bestenfalls Minuten!