Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Hilfe bei Browserbugs

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Hilfe bei Browserbugs

Früher oder später trifft jeder Webdesigner auf einen sogenannten Browserbug. Eigentlich ist man sich sicher, dass man alles richtig gemacht hat, aber Tests zeigen, dass die Webseite in einem oder mehreren Browsern nicht so dargestellt wird wie gewünscht.

Bevor nun die große Panik und Frustration ausbricht, gibt es einige Mittel wie man den Bug orten und entfernen oder zumindest unschädlich machen kann.

Die 3 Schritte zur (hoffentlichen) Bug-Identifizierung

Da es nicht immer eindeutig ist wodurch eine Fehldarstellung ausgelöst wird, sollte man bei der Suche folgendermaßen vorgehen:

1. Käfer mögen es schmutzig … oder: Validiere deinen Quellcode

Der erste Schritt sollte immer die Validierung des Quellcodes sein. Erst wenn man weiß, dass der Aufbau des HTML-Dokuments und der CSS-Datei korrekt ist, kann man sicher gehen dass nicht bereits darin der Fehler vergraben liegt. Auch in Foren oder Newsgroups wird meist erst dann geholfen wenn diese Grundvoraussetzung erfüllt ist.

2. Käfer verkriechen sich in Ecken … oder: Zerteile deinen Quellcode

Ist die getestete Seite valide und das Problem noch nicht behoben, sollte man damit beginnen, in einer Testdatei Abschnitte des Quellcodes zu überprüfen. Taucht die Fehldarstellung z.B. nur im Navigationsbereich auf, sollte man in der Testdatei ausschließlich den HTML-Abschnitt abspeichern der die Navigation enthält. Wenn der Fehler immer noch auftaucht, löst ihn irgendeine Angabe aus die im Zusammenhang mit der Navigation steht. Alternativ scheint ein anderer Abschnitt die Wirkung auszulösen. Im zweiteren Fall kann man nun damit beginnen Stück für Stück die Abschnitte des Dokuments wieder hinzuzufügen und zu testen, ab wann der Fehler wieder aktiv wird. Im Idealfall hat man den Bug nun eingegrenzt.

3. Befrage Käfer-Experten … oder: Nutze Suchmaschinen und durchforste Webseiten, Foren und Newsgroups

Mit der erfolgreichen Eingrenzung hat man ein großes Stück Arbeit bereits erledigt. Jetzt muss man mit der gefundenen Information im Internet nach Situationen suchen, wo andere Webdesigner auf diesen Fehler gestoßen sind und hoffentlich ihre Lösung dafür veröffentlicht haben. Ein guter Anfangspunkt sind Foren die sich speziell mit dem Thema beschäftigen. Eine kluge Wahl von Begriffen führt mit Hilfe der Forensuche schon zu passenden oder thematisch verwandten Beiträgen. Alternativ kann man auch einen Beitrag mit der Bitte um Hilfe öffnen. Idealerweise enthält dieser Beitrag eine möglichst konkrete Fehlerbeschreibung, einen Link zur Testseite auf der man den Fehler nachvollziehen kann und eine Erklärung inwiefern man den Bug vielleicht schon auf einen Abschnitt des Dokuments eingegrenzt hat. Mit etwas Glück erhält man schon bald eine helfende Antwort. Bei Newsgroups wendet man die gleiche Methode an. Allerdings ist es hier manchmal schwieriger die Archive zu durchforsten.

Wenn beide Wege zu keinem Ergebnis geführt haben, kann man sein Glück noch mit einer Suchmaschine auf die Probe stellen. Allerdings ist hier meist bereits etwas Erfahrung in der Bugsuche von Nöten um geeignete Suchbegriffe zu finden. Es empfiehlt sich, Google in Verbindung mit englischen Suchbegriffen zu nutzen um so auf möglichst viele Ergebnisse zu kommen.

Die Nutzung von sogenannten Hacks

Es würde zu weit führen, wenn ich hier noch erkläre, welche Hacks es gibt und welche Vor- und Nachteile sie mit sich bringen. Ich möchte aber davor warnen, zu viele Hacks einzusetzen. Es ist zwar so, dass man manche Bugs wirklich nur dadurch lösen kann, aber es sollte möglichst nach anderen Lösungen gesucht werden. Wenn es keine Alternative gibt, ist es empfehlenswert, die Hacks innerhalb der CSS-Angaben durch Kommentare kurz zu erklären, so dass man auch später noch weiß weshalb bestimmte Formulierungen eingesetzt wurden.

Kleine Anmerkung am Rande: Das „Problem“ mit dem Internet Explorer 7

Aus gegebenem Anlass möchte ich noch kurz darauf hinweisen, dass es durch die baldige Veröffentlichung des Internet Explorer 7 zu massiven Problemen mit einigen herkömmlichen Hacks für
IE-Bugs kommen kann. Ich habe deshalb einen Link mit angegeben, der diese Thematik bespricht und eine Lösung dafür präsentiert.

Weiterführende Links

Kommentare

ralph
am 18.12.2005 - 00:11

Die Technik der Code-Ausgrenzung zur Fehlersuche ist wirklich sehr hilfreich. Schöner Artikel.

Permanenter Link

Edoardo
am 18.12.2005 - 03:47

Genau bei dieser Ausgrenzung kann es aber passieren, daß sie im IE nicht hilft, weil der z.T. wirklich abnorm abstruse Bugs hat. Und gerade da hat man die meiste Zeit mit Bugs zu kämpfen.

Ich hab' z.B. erlebt, daß eine winzige, aber ganz bestimmte Kombination von padding und border einen üblen Fehler bei der Darstellung hervorruft.

Permanenter Link

Edoardo
am 18.12.2005 - 03:49

Nachtrag: Allerdings hat bei der Kombi von padding und border die Ausgrenzung von CSS-Code geholfen …

Permanenter Link

Eckhard Rotte
am 24.12.2005 - 02:17

Zum Einkreisen von Bugs muss man nicht unbedingt logische Blöcke (Navigation. Content)
in Quarantäne schicken. Man konnt z. B. bei fiesem CSS-Bugs oft einfach und schnell auf die Schliche, indem man die ganze Datei mehfach halbiert.
Ich benutze dazu die Option "Undo after Save", die Zwischenablage tuts aber genauso gut.

Von einer 1000 Zeilen langen CSS -Datei würde ich zunächst eine Hälfte (Zeilen 500-1000) entfernen. Falls der Bug immer noch auftritt, befindet er sich höchstwahrscheinlich im Zeilenbereich 0-500.
Von diesem Bereich entfernt man dann (nachdem man die vorher entfernten Zeilen wieder eingefügt hat ) wiederum eine Hälfte. Mit dieser Methode kann man oft innerhalb von Minuten fiese Bugs sicher orten.

Permanenter Link

Die Kommentare sind geschlossen.