12 Reaktionen

Unterstütze das Firebug-Projekt / Deine Ideen für Firebug

Geschätzte Lesedauer:

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.

Dieser Artikel wurde von Sören Hentzschel verfasst.

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, mozilla.de, firefoxosdevices.org sowie sozone.de.

11 Kommentare - bis jetzt!

Eigenen Kommentar verfassen
  1. sina
    schrieb am :

    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.

     

  2. teleborian
    schrieb am :

    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.

  3. Lukas Wanko
    schrieb am :

    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! 🙂

  4. Marco
    schrieb am :

    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.

     

  5. Thomas Große
    schrieb am :

    @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>

     

  6. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    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.

    Was ich noch gerne hätte ein tool, das meine änderung am HTML aufnimmt und bei aufruf der Webseite jedes mal wieder ausführt.

    Das klingt nach dem hier:
    http://code.google.com/p/fbug/issues/detail?id=6136

    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.

    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.

    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.

    Klicke mal auf den Pfeil im HTML-Reiter und deaktiviere Änderungen hervorheben, Änderungen aufklappen sowie Änderungen im Sichbereich anzeigen. Besser?

    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.

    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.

    und fein wärs, wenn man das Panel auch vertikal anpinnen könnte.

    Das geht sogar bereits, wusste ich bis gerade auch nicht. Klicke das Firebug-Symbol und dort Position der Firebug Benutzeroberfläche.

    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.

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

    @Sören

    <Lobhudelei>Ein klasse Blog den ich echt super finde. Weiter so. </Lobhudelei>

    Dankeschön! 🙂

  7. Sebastian Zartner
    schrieb am :

    @Marco:

    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.

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

    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.

    Das sollte (bis auf den Teil mit element.style) bereits mit Firediff möglich sein.

    @Thomas:

    YSlow

    Ich würde mir die Integration der Funktionen von YSlow nativ in Firebug wünschen.

    Nehm ich gerne als Verbesserungsvorschlag entgegen.

    Auskoppelung von Tabs in eigene Fenster

    Siehe Issue 4547.

    ColorPicker

    Immer wieder gewünscht. FirePicker macht hier einen tollen Job, aber wahrscheinlich wird es doch noch irgendwann eine integrierte Farbauswahl geben.

    Seitengröße anpassen

    Das erlauben schon die integrierten Entwicklerwerkzeuge über den Punkt Bildschirmgrößen testen.

    Lineal

    Also sowas wie MeasureIt oder die Lineal-Option unter Sonstiges in Web Developer.

    AddonManager

    Siehe Issue 3701.

    Geschwindigkeit Speicherverbrauch

    Vor allem aber sollte die Geschwindigkeit und der Speicherverbrauch optimiert werden.

    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.

    Am besten einmal eine Version rausbringen in der nur Bugs gefixt werden und keine neuen Funktionen hinzugefügt werden.

    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.

    Firebug soll ein wenig zur eierlegenden Wollmilchsau werden in dem schon eine Menge Zusatzfunktionen direkt unterstützt werden.

    Um all diese Funktionalitäten einzubauen braucht’s aber mehr Entwickler. Siehe dazu den Titel dieses Blog Eintrags. 🙂

    Sebastian

  8. schrieb am :

    @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?

     

  9. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Grundsätzlich bin ich Gastbeiträgen gegenüber offen, sofern es zum Thema des Blogs passt – was ja auf jeden Fall gegeben wäre. 🙂

  10. schrieb am :

    @Thomas:

    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.

    Entweder werde ich einen kleinen Bug beheben oder ein Tool (z. B. Lineal oder Colorpicker) beitragen.

    Wie wäre es wenn ich einen Beitrag über die Entwicklung eines Addons schreibe?

    Das wäre fantastisch!

    “Just do it” kann ich nur allen zurufen die sich bisher noch nicht an solche Sachen rangewagt haben.

    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

  11. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    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.

    Das sollte (bis auf den Teil mit element.style) bereits mit Firediff möglich sein.

    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.

Und jetzt du! Deine Meinung?

Erforderliche Felder sind mit einem Asterisk (*) gekennzeichnet. Die E-Mail-Adresse wird nicht veröffentlicht.
  1. Nach Absenden des Kommentar-Formulars erfolgt eine Verarbeitung der von Ihnen eingegebenen personenbezogenen Daten durch den datenschutzrechtlich Verantwortlichen zum Zweck der Bearbeitung Ihrer Anfrage auf Grundlage Ihrer durch das Absenden des Formulars erteilten Einwilligung.
    Weitere Informationen