Firebug - Webseiten debuggen

0 | 0 Kommentare | 13338 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Firebug - Webseiten debuggen" mit Ihrem Wissen!

Anzeige Hier werben

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.

Bild zu Firebug - Webseiten debuggen

Firebug Shortcuts

Befehl
Shortcut
Firebug öffnen / schließen F12
Firebug in neuem Fenster
STRG + F12
Suchen
STRG + SHIFT + K
Auswahlmodus
STRG + SHIFT + C

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.

Bild zu Firebug - Webseiten debuggen

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.

Bild zu Firebug - Webseiten debuggen

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.

Bild zu Firebug - Webseiten debuggen

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).

Bild zu Firebug - Webseiten debuggen

CSS

Bild zu Firebug - Webseiten debuggen

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:

 
JavaScript
1
2
3
var anz = 1;
var lamp = 'Lampe';
console.log('In meinem Zimmer steht %d %s.', anz, lamp);
String
Erklärung
%s
String
%d, %i
Integer
%f
Floating point number
%o
Object hyperlink

Beispiel 2:

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

Bild zu Firebug - Webseiten debuggen

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).

Bild zu Firebug - Webseiten debuggen

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.

Bild zu Firebug - Webseiten debuggen

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "Firebug - Webseiten debuggen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Firebug - Webseiten debuggen" hier bearbeiten.

Mitarbeiter

Kommentare: Firebug - Webseiten debuggen