Weitere Infos

Inhaltsbereich

Aktuelles zu »Little Boxes«

Diese Seite wird nicht mehr gepflegt. Aktuelle Infos finden Sie im Blog auf pmueller.de.

Sie sehen einen Beitrag in der Einzelansicht (mit Kommentaren).

Zeige alle Beiträge

Der neue Page Inspector im Firefox (ab V11)

Ich surfe im Alltag schon seit Jahren mit Chrome, aber zum Seiten bauen und testen greife ich regelmäßig wieder auf Firefox zurück. Zum Beispiel, weil der "Page Inspector", der seit Firefox 11 fest eingebaut ist, wirklich Klasse ist.

Page Inspector starten

Das Tool ist so gut integriert, dass viele Firefox-Benutzer es gar nicht finden: 

  • Menü "Extras - Web-Entwickler" 
  • Befehl "Untersuchen" (Win) bzw. "Seite untersuchen" (Mac) 

Falls man im Firefox unter Windows das Menü nicht sieht, einfach die ALT-Taste drücken, oder gleich das Tastenkürzel "STRG+Umschalt+I" drücken. Auf dem Mac ist das "Cmd+Alt+I". "I" wie "Inspector". 

Egal wie man das Tool aufruft, danach kann man einfach mit der Maus auf der Seite herumfahren und per Klick das jeweils gerade hervorgehobene Element auswählen (siehe Screenshot).

Arbeiten mit dem Page Inspector

Nach der Auswahl eines Elementes erscheint unten in der Statuszeile die Elemente-Hierarchie (und zwar richtig rum, nicht wie beim Firebug) und rechts daneben kann man dann "3D", "HTML" oder "Style" auswählen.

Für HTML und CSS wird man den Firebug auf den ersten Blick nicht mehr benötigen. Der Page Inspektor ist übersichtlicher und besser zu bedienen (siehe angehängten »Skitch«). 

Es gibt auch noch die spektakuläre 3D-Ansicht, in der man die Seite mit gedrückter Maustaste drehen kann und so die Verschachtelungstiefe von HTML-Elementen visualisieren kann, aber was mich mehr beeindruckt ist die tägliche Arbeit mit der Analyse von HTML und CSS. 

Fehlt nur noch die Visualisierung des Boxmodell (padding, border, margin), und dann ist der Firebug für HTML und CSS bald nicht mehr nötig.

Weitere Quellen

22.06.2012 von Peter Müller

Zurück