Add-On - Firebug

Gestern habe ich meinem Firefox ein neues add-on hinzugefügt, dass mich sehr viel weiter gebracht hat. Diese add-on zeigt einem den kompletten Quelltext optimal aufgelistet. Wenn man nun bei firebug ein div anklickt wird einem in der Liveansicht direkt angezeigt, wo sich dieses div befindet. Außerdem kann man auf der rechten Seite der firebug Ansicht genau sehen, in welcher Zeile des html-Codes die Einstellungen für diese div zu machen sind.



Ich hatte beispielsweise das Problem, dass ich div nicht verschieben konnte, da in der css-Datei viele Klassen beziehungsweise ID vergeben waren, die den Namen des div in sich hatten. Mit firebug konnte ich einfach in der Liveansicht Textstellen ändern oder komplett herausnehmen um zu sehen wo der Fehler liegt. Aber wozu nutze ich dieses Add-On, wenn ich Dreamweaver auf meinem PC habe - Nun ja leider mussten wir feststellen, dass es Dreamweaver nicht möglich ist phtml-Seiten Live darzustellen. Firebug war für mich gestern definitiv der Gewinner des Tages.



Zum Schluss noch kurz der Unterschied zwischen Klasse und ID:
Eine Klasse wird im html-code vergeben. Durch eine Klasse lassen sich beispielsweise ähnliche Grafiken zu einer Klasse zusammenführen. So kann man die Formatierung für diese alle Elemente in dieser Klasse auf einmal im CSS-Style ändern. Eine Klasse wird im css durch einen Punkt vor dem Klassennamen gekennzeichnet.
Durch einen ID kann man ein einzelnes Element speziell formatieren. Dies wird in der CSS-Datei durch eine raute vor dem Klassennamen gekennzeichnet