Hauptmenü

Untermenü

HTML/CSS - Fehlersuche - Firebug

1. Die Abschnitte

2. Ein wichtiger Hinweis!

Alle folgenden Erläuterungen basieren auf der Firebug-Version 1.7.3, die im Firefox 5 läuft. Wenn ihr also abweichende Ergebnisse habt oder Unterschiede feststellt, so liegt das schlicht und ergreifend daran, dass ihr mit anderen Versionen arbeitet.

3. Einführung

Um euch die Möglichkeiten zu zeigen, arbeiten wir hier mit der firebug.htm. Die sieht zwar nicht sehr schön aus, aber das ist lattens. Firebug startet man ganz normal über die "F12"-Taste. Details dazu habe ich schon hier erklärt. Konzentrieren wir uns zunächst auf den linken Bereich.

Firebug Ansicht

Der Menüpunkt "HTML" wird gewöhnlich automatisch aktiviert. Auch sucht sich Firebug direkt das <body>-Element als Startpunkt aus. Im rechten Bereich dagegen seht ihr dann die Stylesheet-Anweisungen, die mit dem ausgewählten Element verknüpft sind.

Firebug CSS Ansicht

4. Durch das Dokument wandern

Dazu klickt man einfach im linken Bereich auf das Pluszeichen und die direkt(!) untergeordneten Elemente werden sichtbar.

HTML-Elemente

5. In die CSS-Datei springen

Wenn man mit der Maus im rechten Bereich über den blauen Link fährt, so zeigt uns Firebug zunächst den Pfad zur Datei an.

CSS-Anweisungen

Wenn man darauf klickt, so springt Firebug in die entsprechende Datei. Und nicht nur das, der hüpft sogar in die entsprechende Zeile mit den CSS-Anweisungen für das ausgewählte Element, in diesem Fall also body. Der entsprechende Code dazu wird für kurze Zeit optisch hervorgehoben.

CSS-Code

So, das war der erste Einstieg. Kommen wir nun zum Eingemachten.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt