Webdesign, Tutorials und mehr - Webmasterpro.de

Firebug - Webseiten debuggen

Die Installation

Firebug ist ein Addon von Firefox welches hier gefunden werden kann. Durch einen Klick auf "Add to Firefox" wird es automatisch in Firefox integriert. Nach einem Neustart von Firefox kann es durch drücken der Taste "F12" bzw. Ansicht/Firebug geöffnet werden.

Firebug Shortcuts

Alle Firebug Shortcuts können hier nachgelesen werden.

HTML

Der HTML Reiter ist in zwei Spalten unterteilt. Die Linke Spalte zeigt die HTML Struktur, die rechte zeigt die Formatierungen für das links ausgewählte Element.

Befindet man sich im Auswahlmodus(Grün markiert) erscheint beim Fahren mit der Maus über die Webseite immer das aktuelle Element mit allen relevanten CSS Eigenschaften (Das aktuelle Element wird im Browser blau umrandet). Ein Klick beendet den Auswahlmodus.

Wenn man nun in der HTML Struktur mit der Maus über ein Element fährt, wird es folgendermaßen hervorgehoben:

• Inhalt: hellblau
• Padding: lila
• Margin: hellgelb

In Firebug ist es nicht nur möglich, die HTML Struktur bzw. CSS Eigenschaften anzeigen zu lassen, sonder auch das Verändern bzw. Hinzufügen ist möglich. Durch einen Klick auf das graue Verbotszeichen vor einer Formatierung kann diese deaktiviert werden. Die Änderungen werden sofort im Browser sichtbar. Zur Erleichterung wird zusätzlich der Name der CSS Datei sowie die Zeile angezeigt.

Wird im rechen Bereich auf Layout geklickt, erscheint die in der HTML Struktur ausgewählt Bot mit allen relevanten Pixelangaben (size, padding, border, margin, offset).

CSS

Der CSS Reiter dient zum Ansehen bzw. Bearbeiten aller vorhandenen CSS Dateien.

Konsole

In der Konsole können Javascript Befehle live getestet werde.

Es ist auch möglich mit dem Befehl console.log Texte ausgeben zu lassen. Der Methode console.log können beliebig viele Attribute übergeben werden.

Beispiel 1:

1
2
3

var anz = 1;
var lamp = 'Lampe';
console.log('In meinem Zimmer steht %d %s.', anz, lamp);

Beispiel 2:

console.log ('test');
console.debug ('debug');
console.info ('info');
console.warn ('warnung');
console.error ('error');

Skript

Der Reiter Skript bietet einen kompletten Javascript Debugger. Es besteht die Möglichkeit Breakpoints zu setzten und sich "step by step" durch die Skripts zu arbeiten. Die Ergebnisse sind sofort im DOM zu sehen.

DOM

Der DOM Reiter dient zum Ansehen bzw. Bearbeiten des Document Object Models (DOM).

NET

In diesem Reiter wird sichtbar wie lange die Request zu den einzelnen Dateien dauert. Außerdem wird sichtbar was als Request und Response Parameter gesendet wird.

Kommentare: Firebug - Webseiten debuggen