Unterstütze das Firebug-Projekt / Deine Ideen für Firebug
Firebug ist die populärste Firefox-Erweiterung für Webentwickler. Das Firebug-Projekt möchte auch in Zukunft einen echten Mehrwert für Webentwickler bieten und benötigt dafür Unterstützung. Dazu muss man nicht programmieren können. Dokumentieren, Übersetzen, Testen, es gibt viele Möglichkeiten. Auch anderen Firebug bekannt machen ist eine mögliche Art der Unterstützung. Ebenso werden Wünsche für kommende Versionen gesucht, um welche in den Kommentaren dieses Artikels gebeten wird. Diese werden dann gesammelt an das Firebug-Team übergeben.
Firebug
Firebug ist eine hervorragende Erweiterung sowohl für professionelle als auch für hobbymäßige Webentwickler zur Live-Analyse und -Bearbeitung von HTML, CSS und JavaScript. Wahrscheinlich den allermeisten Webentwicklern hat Firebug schon das Leben erleichtert; insbesondere da Firefox selbst lange Zeit überhaupt keine oder auch nur mittelmäßige Entwickler-Werkzeuge besessen hatte. Über drei Millionen aktive Benutzer laut AMO sprechen eine klare Sprache. Damit ist Firebug die Top-3-Erweiterung überhaupt nach Adblock Plus und dem Video DownloadHelper. Und Firebug kann mittels weiterer Erweiterungen sogar noch umfangreich erweitert werden.
[lightbox style=“modern“ image_path=“https://www.soeren-hentzschel.at/wp-content/uploads/firebug.png“ popup=“https://www.soeren-hentzschel.at/wp-content/uploads/firebug.png“ link_to_page=““ target=““ description=““ size=“two_col_small“]
Mozilla liefert Firefox seit einiger Zeit selbst mit integrierten Entwicklerwerkzeugen aus, welche sich stetig verbessern. Die Frage, wozu man dann überhaupt noch Firebug benötigt, ist sicherlich berechtigt. Die Antwort darauf ist, dass sowohl die integrierten Werkzeuge als auch Firebug beide ihre Stärken und Schwächen haben und sich im Entwickler-Alltag gegenseitig ergänzen können. Ich selbst setze je nach Situation häufig sowohl das eine als auch das andere Werkzeug ein. Zudem will sich das Team künftig verstärkt auf Features konzentrieren, die nicht in den integrierten Entwicklerwerkzeugen enthalten sind, und diese ergänzen. Aber gerade weil das Firebug-Team wesentlich kleiner als das bei Mozilla mit den integrierten Entwicklerwerkzeugen vertraute Team ist, benötigt Firebug Unterstützung und hier kommt ihr ins Spiel.
Firebug unterstützen – viele Möglichkeiten, für jeden etwas dabei
Wie bereits angedeutet gibt es viele Möglichkeiten, das Firebug-Projekt zu unterstützen und eine davon ist natürlich das direkte Beitragen zum Programmcode. Im Issue-Tracker finden sich zahlreiche Bugs und Feature-Wünsche, welche auf eine Behebung respektive Umsetzung warten. Patches sind ausdrücklich willkommen. Eine weitere Möglichkeit des direkten Beitragens ist das Schreiben von automatisierten Tests. Offene Bugs, welche einen solchen Testcase benötigen, können ebenfalls über den Issue-Tracker gefunden werden. Natürlich werden auch weitere Add-ons für Firebug begrüßt.
Wer nicht programmieren kann, kann Firebug trotzdem unterstützen. Es ist ebenfalls eine große Hilfe, Probleme, welche im laufenden Einsatz auffallen, in genanntem Issue-Tracker zu melden sowie die automatisierten Tests durchlaufen zu lassen.
Wer gerne schreibt und der englischen Sprache mächtig ist, kann dabei helfen, das Firebug Wiki mit weiteren Inhalten zu versorgen oder die Webseite getfirebug.com zu pflegen. Daran Interessierte melden sich in der Firebug-Newsgroup. Wer gerne schreibt, egal ob auf Englisch, Deutsch oder in einer anderen Sprache, der kann auch einfach auf seiner eigenen Webseite einen Artikel über Firebug veröffentlichen und so helfen, Firebug noch bekannter zu machen. Und wer weniger gerne schreibt: Auch ein Beitrag auf Facebook oder ein 140-Zeichen-Tweet auf Twitter tragen ihren Teil bei.
Und wo bereits verschiedene Sprachen angesprochen werden, so werden natürlich auch Übersetzer gesucht. Wer eine Sprache vermisst oder eine bestehende Sprache verbessern möchte, kann sich hierfür auf BabelZilla registrieren und anfragen, ein offizieller Übersetzer zu werden.
Und schließlich gibt es noch die ganz klassische Form der Unterstützung: Die Spende. Wer täglich Firebug nutzt und am Ende des Tages sogar Geld mit Webentwicklung verdient und dabei regelmäßig Firebug einsetzt, sollte sich überlegen, ob es das nicht ein paar Euro wert ist. Aber auch sonst ist jeder willkommen zu spenden, denn auch ein Projekt wie Firebug muss finanziert werden.
Und nun der interaktive Part – eure Wünsche
Was wünscht ihr euch von Firebug? Wie stellt ihr euch das Add-on in der Zukunft vor, welche Features vermisst ihr, was stört euch? Bitte schreibt in den Kommentaren zu diesem Artikel alles, was euch einfällt. Sei es eine noch so große Idee oder nur eine winzige Kleinigkeit. Alle diese Dinge werden dann nach einiger Zeit gesammelt an das Firebug-Team weitergeleitet, welches bereits auf eure Ideen und Anregungen wartet.
Sören Hentzschel ist Webentwickler aus Salzburg. Auf soeren-hentzschel.at informiert er umfassend über Neuigkeiten zu Mozilla. Außerdem ist er Betreiber von camp-firefox.de, der ersten Anlaufstelle im deutschsprachigen Raum für Firefox-Probleme aller Art. Weitere Projekte sind firefox.agenedia.com, firefoxosdevices.org sowie sozone.de.
Eigentlich sind meine Wünsche schon alle aufgeführt, das Problem ist dass das Meiste JSD2 vorraussetzt und die Umstellung darauf dauert halt , vor allem wenn es so ein kleines Team ist.
Was ich noch gerne hätte ein tool, das meine änderung am HTML aufnimmt und bei aufruf der Webseite jedes mal wieder ausführt.
Ich kenne mich ganz knap mit html aus aber überhaupt nicht mit scripts.
Zwischen durch würde ich gerne einfach bestimmte formularfelder vorausgefüllt haben oder ein bestimmter Wert im Dropdownmenü soll vorausgewählt sein. Auf einer bestimmten Seite würde ich gerne ein bild durch ein eigenes ersetzen etc.
Ich habe mich da mal mit dem Addon Stylish auseinander gesetzt, da ich aber da nur via CSS (z.B. !important;) Änderungen vornehmen kann und zudem die Struktur nicht ändern kann, fehlen mir einige möglichkeiten wie ich eingreiffen kann.
Auch machen Flash objekte ärger wenn ich mit dem Inspektor heraus finden will wo die Elemente im Quelltext sind. häufig lassen sie sich nicht lokalisieren, auch refreshs und andere Dynamische dinge vereiteln das immer wieder.
Firebug ist super! Toll wärs, wenn der Start von Firebug nicht so lange dauern würde und aus irgendeinen Grund ist er in der neusten Version von Firefox recht langsam „Warning: Enabling the Script panel… “ etc. und fein wärs, wenn man das Panel auch vertikal anpinnen könnte. Soweit so gut! 🙂
Firebug ist schon so gut, da weiß man garnicht, was noch verbessert werden soll (außer die üblichen Performance-Verbesserungen). Aber ab und an fällt einem doch mal was ein 😉
Firebug > HTML:
Es wäre schön, wenn Pseudo-Klassen wie :hover bei einem Element immer angezeigt werden (ausgegraut, aber bearbeitbar). Momentan ist es so, dass die Hover-Eigenschaften zwar angezeigt werden, wenn man über das Element fährt. Bearbeiten kann man diese aber nicht, da die Eigenschaften wieder verschwinden, sobald man sich mit dem Cursor vom Element entfernt.
Bei Farbeigenschaften (color, background-color,..) wird praktischerweise ein Tooltip mit der Farbe angezeigt. Noch besser wäre es, wenn ein kleiner Color-Picker dabei wäre, bei der man durch bewegen der Maus über die Farbbereiche auch sofort die Änderungen auf der Website sieht, aber erst durch einen Klick ins temporäre CSS geschrieben wird.
Eine Art Export-Funktion, die trackt, welche CSS Änderungen man (seit dem letzten Reload) vorgenomen hat und in einer Datei/Popup zusammenfügt. Alternativ ein Export der geänderten CSS Dateien und einer für element.style (=Inline-)Angaben mit Zeilennummer des Elements.
@Teleborian
Greasemonkey könnte etwas für Dich sein: https://addons.mozilla.org/de/firefox/addon/greasemonkey/
@Firebug Erweiterung
YSlow
Ich würde mir die Integration der Funktionen von YSlow nativ in Firebug wünschen.
Alle Performancelücken schön grafisch aufbereitet. Werden zu viele HTTP-Requests gemacht? Wäre es sinnvoller ein CDN zu nutzen? Wäre es sinnvoller alle JS/CSS zusammenzufassen und zu komprimieren? Etc. etc. Tools wie JSLint, YUI CSS Compressor, All JS Minified, etc. etc.
Auskoppelung von Tabs in eigene Fenster
Ein WebDeveloper arbeitet zumeist mit mehreren Monitoren. Es wäre schön wenn die einzelnen Tabs wie Konsole HTML CSS Skript … in eigene Fenster ausgekoppelt werden könnten. Oder nebeneinander dargestellt werden könnten. Somit hätte man alles wichtige sofort im Blick ohne durch die Tabs blättern zu müssen.
Weitere Tools
Anstatt weitere Plugins installieren zu müssen sollte Firebug von Haus aus schon ein paar nützliche Funktionen mitbringen. Z. B. Folgende:
ColorPicker
Ein integrierter ColorPicker um eine Farbe von einem beliebigen Objekt/Grafik zu entnehmen. Am besten in der CSS Ansicht wenn man eine Farbeigenschaft auswählt. Dort wird derzeit die aktuelle Farbe als Hover gezeigt. Schön wäre es die Farbe anhand einer Farbpalette oder des ColorPickers festzulegen. Z. B. wie in FirePicker: http://thedarkone.github.io/firepicker/
Seitengröße anpassen
Seite in neuem oder selben Fenster mit frei definierbarer Größe zu öffnen. Um z. B. Mobilansichten zu simulieren.
Lineal
Ein integriertes Lineal mit dem man Entfernungen messen kann. Diese sollten dann wiederum bei dem CSS-Reiter eingefügt werden können.
Firebug soll ein wenig zur eierlegenden Wollmilchsau werden in dem schon eine Menge Zusatzfunktionen direkt unterstützt werden. So bräuchte man nicht noch etliche Plugins installieren und könnte die Funktionalitäten direkt mit Firebug verzahnen.
AddonManager
Einige werden sagen die oben genannten Tools gibt es ja als Plugin für Firebug. Nur finden muss man diese auch. Nützlich wäre ein AddOn Tab in dem die Addons für Firebug schon in verschiedenen Kategorien eingeteilt sind und mit einem Klick installierbar.
Geschwindigkeit Speicherverbrauch
Vor allem aber sollte die Geschwindigkeit und der Speicherverbrauch optimiert werden. Am besten einmal eine Version rausbringen in der nur Bugs gefixt werden und keine neuen Funktionen hinzugefügt werden.
Schade dass sich so wenige hier beteiligen 🙂
@Sören
<Lobhudelei>Ein klasse Blog den ich echt super finde. Weiter so. </Lobhudelei>
Hallo in die Runde und vielen Dank bis hierhin für alle Vorschläge. Weitere Vorschläge sind nach wie vor willkommen!
Ich möchte nur zwischendrin mal zu ein paar Dingen etwas anmerke, zu denen ich etwas sagen kann.
Das klingt nach dem hier:
http://code.google.com/p/fbug/issues/detail?id=6136
Das klingt jetzt weniger nach der Zuständigkeit von Firebug. Wegen der Formularfelder, schau dir mal Autofill Forms an. Und das andere klingt, als wolltest du dauerhafte Änderungen machen, Firebug ist ja viel mehr ein Werkzeug für temporäre Änderungen. Da solltest du also in Richtung Stylish und GreaseMonkey gehen.
Klicke mal auf den Pfeil im HTML-Reiter und deaktiviere Änderungen hervorheben, Änderungen aufklappen sowie Änderungen im Sichbereich anzeigen. Besser?
Der Start sollte mit dem Wechsel auf JSD2 spürbar schneller sein. Außerdem hab ich mir sagen lassen, dass man sich innerhalb des Teams bereits Gedanken zu weiteren Optimierungen der Startzeit macht.
Das geht sogar bereits, wusste ich bis gerade auch nicht. Klicke das Firebug-Symbol und dort Position der Firebug Benutzeroberfläche.
Wenn du ein Element ausgewählt hast, klicke rechts im Style-Panel mal auf den Pfeil des Reiters, dort kannst du die entsprechenden Pseudoklassen auswählen. 🙂
Zu den restlichen Sachen aus den letzten beiden Kommentaren kann ich jetzt noch nichts sagen, ich muss mir erstmal wieder ein paar Hinweise zuflüstern lassen, ich meld mich in den nächsten Tagen nochmal. 😀
Dankeschön! 🙂
@Marco:
Wie bereits von Sören erwähnt, geht das bereits. Ist auch in unserer Doku beschrieben. Ich geb mir auch große Mühe, die Beschreibungen aktuell zu halten. Aber wie gesagt, helfende Hände kann das Team gut gebrauchen. 🙂
Das sollte (bis auf den Teil mit element.style) bereits mit Firediff möglich sein.
@Thomas:
Nehm ich gerne als Verbesserungsvorschlag entgegen.
Siehe Issue 4547.
Immer wieder gewünscht. FirePicker macht hier einen tollen Job, aber wahrscheinlich wird es doch noch irgendwann eine integrierte Farbauswahl geben.
Das erlauben schon die integrierten Entwicklerwerkzeuge über den Punkt Bildschirmgrößen testen.
Also sowas wie MeasureIt oder die Lineal-Option unter Sonstiges in Web Developer.
Siehe Issue 3701.
Wie bereits von Sören erwähnt, wird das mit der Integration von JSD2 (neue Debugger API) merklich besser. Durch diese Umstellung werden zudem einige Bugs behoben, die im Zusammenhang mit der alten JSD API stehen. Daher liegt der Hauptaugenmerk des Teams darauf.
Wird bereits in den Dot-Releases gemacht. Jede Hauptversion enthält außerdem viele Bugfixes. Nachdem aber Firebug Open Source ist, kann man den Mitwirkenden nicht vorschreiben, sich nur auf Fehlerbehebung zu konzentrieren.
Um all diese Funktionalitäten einzubauen braucht’s aber mehr Entwickler. Siehe dazu den Titel dieses Blog Eintrags. 🙂
Sebastian
@Sebastian
Danke für das Feedback auf meinen Post 🙂
Eventuell schaffe ich es über Weihnachten mich mal mit der Addon-Entwicklung für Firefox auseinanderzusetzen. Danach ist es glaube ich ein kleiner Schritt für einen Fork auf GitHub und Beiträgen zu Firebug.
„Just do it“ kann ich nur allen zurufen die sich bisher noch nicht an solche Sachen rangewagt haben.
Entweder werde ich einen kleinen Bug beheben oder ein Tool (z. B. Lineal oder Colorpicker) beitragen.
Wir werden sehen ob meinen Worten hier auch Taten folgen 😉
@Sören
Wie wäre es wenn ich einen Beitrag über die Entwicklung eines Addons schreibe? Nimmst Du Gastbeiträge an?
Grundsätzlich bin ich Gastbeiträgen gegenüber offen, sofern es zum Thema des Blogs passt – was ja auf jeden Fall gegeben wäre. 🙂
@Thomas:
Das wäre fantastisch!
Ganz genau. Und so schwer ist das ganze gar nicht. Und bei Fragen steht das Team natürlich gerne zur Seite.
Falls wir uns nicht mehr vorher lesen, schonmal frohe Weihnachten und einen guten Rutsch an alle!
Sebastian
Getestet und als absolut unbrauchbar befunden. Würde mich freuen, wenn Firebug sowas in gut implementieren könnte. Für den Diff-Export reicht Firediff übrigens nicht, dafür braucht man noch ein weiteres Add-on, Fireformat.