Über mich

Startseite arrow Tipps & Tricks arrow Firefox 3.5 und Firebug 1.4 haben einen Bug

Firefox 3.5 und Firebug 1.4 haben einen Bug

Dienstag, 21. Juli 2009
Geschrieben von Armin Vieweg
Die Kombination Firefox 3.5 mit Firebug 1.4 scheint nicht ganz fehlerfrei zu sein. Vermutlich werden die Entwickler demnächst Updates rausgeben, bis dahin möchte ich kurz den Fehler beschreiben.

Der Bug wurde in Firefox 3.5.2 behoben



"Web Development Evolved" lautet der Untertitel dieser wirklich göttlich anmutenden Erweiterung für den Firefox Browser. Der Slogan bedeutet soviel wie "Webentwicklung weitergedacht".

Die Rede ist von der Erweiterung Firebug, welche ausnahmslos jedem Webdesigner eine große Erleichterung sein dürfte, vor allem beim Debugging von Webseiten und JavaScripts.

Firebug 1.4.0 Screenshot

In der neuen Version von Firebug 1.4.0 die kurz nach Firefox 3.5 erschienen ist, scheint es jedoch einen kleinen aber relativ gravierenden Fehler zu geben, der das Arbeiten mit Firebug nahezu unmöglich macht.

Update: Der Fehler ist in Version 1.4.1 leider immer noch enthalten.





Die Ausgangssituation
Der Fehler wird verursacht durch für verschiedene Medien definierte Stylesheets. Ein Stylesheet kann je nach Medium, dass die Seite gerade aufruft verschiedenen definiert sein. So ist es bei mir z.B. üblich, dass ich spezielle Formatierungen verwende um die Seite beim Ausdrucken anders aussehen zu lassen, als auf dem Monitor.

Ein entsprechendes Stylesheet sähe z.B. so aus:

#website {
  background:red;
}

@media print
{
  #website {
    background:white;
  }
}


Das Element mit der id="website" wäre im Browser mit einem roten Hintergrund versehen und beim Ausdruck mit einem weißen. Dies ist nur ein Beispiel, was in dieser Form nun keine Anwendung finden dürfte - aber ich nutze die Technik ganz gerne um Content-unabhängige Elemente wie Header oder Footer beim Druck auszublenden.



Der Fehler
Firebug in der neusten Version zeigt, sobald man ihn aktiviert die Print-Variante an. Man sieht also erst die normale Website, aktiviert Firebug und auf einmal verändern oder verschwinden alle entsprechend formatierten Elemente.

So kann man natürlich nicht effektiv arbeiten. Hier mal eine Beispielseite bei der die Nutzung von Firebug zu dem Fehler führt.


Die Lösung
(zum Update)
Es gibt zwar ein Workaround, doch das ist recht impraktikabel: Die Print-Definitionen im Stylesheet für den Zeitraum der Entwicklung der eigentlichen Seite auskommentieren.

Also so:

#website {
  background:red;
}

/* @media print
{
  #website {
    background:white;
  }
} */



So interpretiert Firebug nun nur noch den tatsächlich gültigen CSS-Code und lässt die Kommentare als solche links liegen.



Alternativen?
In meinem Beispiel hänge ich die Print-Definitionen unter das normale Stylesheet. Bisher war dies auch nirgends ein Problem - auch Firefox 3.5 ohne aktiviertem Firebug interpretiert den Code einwandfrei. Gegebenenfalls (das habe ich jetzt aber nicht ausprobiert) reicht die Aufteilung von Screen- und Print-Definition in zwei Dateien mit einem entsprechend definiertem Aufruf im HTML:

<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
<link rel="stylesheet" media="print" href="print.css" type="text/css" />



Wenn Ihr hier Erfahrungswerte habt, würde ich mich über einen kurzen Kommentar freuen.

Ansonsten bleibt nur Abwarten und Tee trinken, bis eine neue Version von Firebug veröffentlicht wird, die den Fehler entsprechend behebt.


Die Entwickler sagen,...

dass in Version 3.5.2 von Firefox der Fehler behoben sein wird. Noch ist diese Version nicht draußen, d.h. bis dahin müssen wir noch etwas Tee trinken und warten.

Link: Firebug Issue #2141




Update: Eine weitere Alternative
So eben ist mir eine weitere Alternative eingefallen, die auch wunderbar funktioniert. Dieser Bug scheint erst ab der Beta 7 von Firebug 1.4.0 aufzutreten. Da man sich auch vergagene Versionen installieren kann empfiehlt es sich solange es kein neues Update gibt auf eine Beta-Version zurückzuspringen.

Ich bin mal alle durchgegangen. In der Beta 5 war der Fehler noch nicht, in der Beta 7 schon. Das heißt, einfach die Beta 5 installieren und produktiv arbeiten können.

Download: Firebug 1.4.0 Beta 5



Diese Beta-Version sieht noch etwas anders aus als die endgültige Fassung, aber man kann dennoch wunderbar damit arbeiten. Der Fehler tritt zwar immer noch vereinzelnt auf, jedoch ist er mit einem Refresh (F5) der Website wieder behoben.


Letztes Update: Fehler in Firefox 3.5.2 und Firebug 1.4.1 behoben
Wie die Entwickler über Google Code schon mitgeteilt haben, ist in dem kürzlich erschienenen Firefox Update 3.5.2 dieser Fehler behoben. Auch andere kleine Darstellungsfehler wie das Verschwinden von CSS-Attributen wenn man sie verändert, wurden behoben. Damit ist dieser Artikel mehr oder weniger hinfällig :)


Übrgens...
Auch neu ist, dass sich Firebug automatisch in Popups und neuen Fenstern öffnet, die von der gleichen Seite kommen wie der, auf der schon Firebug geöffnet ist. Das kann man aber glücklicherweise abschalten. In den Optionen bzw. Einstellungen einfach den Haken bei "URLs mit gleicher Herkunft aktivieren" raus nehmen. Dann wird Firebug wieder für jedes Fenster separat gehandlet.

Denn es ist nervig, wenn ich auf einer Website Firebug im Einsatz habe und in einem anderen Fenster im CMS ein Popup öffne um z.B. ein Bild hochzuladen, welches dann erstmal komplett von Firebug überlagert wird.


  Kommentare (4)
 1 Geschrieben von: roy, am 24.07.2009 um 09:24
der bug ist mir noch nciht aufgefallen! 
hatte jedoch starke probleme um den neuen firebug überhaupt in den ff 3.5 installiert zu bekommen! 
an was es lag - ich weiß es nicht. 
man konnte das addon firebug scheinbar problemlos installieren, nach dem fälligen neustart war dann aber weit und breit keine spur von firebug - auch nicht bei den addons. 
nach dem x-ten mal probieren und neustarten war er dann auf einmal verfügbar - komisch
 2 Geschrieben von: Mr X, am 01.08.2009 um 11:26
Web Development Evolved = Webentwicklung weiterentwickelt/weitergedacht
 3 Geschrieben von: John Deere, am 15.11.2009 um 21:05
Gibt es eine deutsche Anleitung für FireBug? 
Ich finde nirgends eine, jedenfalls keine die viele Einzelheiten besser erklärt. 
Wer kann mir weiterhelfen? 
 
Netter Gruß 
John Deere 
Schleswig-Holstein 
--------------------------------------------------------------- 
Webcam-Cache in 25355 Barmstedt 
http://www.john-deere.lima-city.de/Webcam
 4 Geschrieben von: Armin Vieweg, am 16.11.2009 um 08:03
Hallo, 
 
von offizieller Seite gibt es keine deutsche Anleitung. Lediglich die Englische: 
http://getfirebug.com/docs.html 
 
Allerdings gibt es an Firebug nicht soooo viel zu verstehen. Man sieht die JavaScript Console die Du in Scripts auch selbst ansteuern kannst (zum debuggen) über console.log("Neuer Eintrag"); oder console.clear(); Hier nur aufpassen, der Internet Explorer kennt den Befehl "console" nicht und gibt dann einen Fehler aus. 
 
Außerdem siehst Du in Firebug die DOM (unter "HTML"), kannst Dich dort durch die einzelnen Elemente klicken und siehst rechts daneben die passenden CSS-Definitionen. Wenn Du mehr mit JavaScript machst, siehst Du unter dem Punkt "DOM" auch Funktionen und Attribute von erstellten Objekten, braucht man aber eher selten. 
 
Und dann gibt es noch den Punkt Netzwerk, mit dem Du die Ladezeiten deiner Website und deren Komponenten überprüfen kannst. 
 
Es gibt natürlich noch Erweiterungen für Firebug, wie z.B. FirePHP aber ich denke die Grundfunktionalitäten von Firebug sind so toll, dass man damit schon jede Menge machen kann. 
 
Wenn Du ansonsten keine Dokumentation findest, mach es auf die alte Art und Weise: Rumklicken und ausprobieren :D 
 
Firebug ist ja komplett lokal, d.h. Du kannst an Seiten nichts kaputt machen. Nach einem F5 ist alles so wie vorher :) 
 
Gruß 
Armin
Letzte Aktualisierung ( Dienstag, 4. August 2009 )
 
Weiter >