Das beliebteste und mächtigste Webentwicklungswerkzeug.
Firebug war ein phänomenaler Erfolg. Während seiner 12-jährigen Lebensdauer entwickelte das Open-Source-Tool eine fast kultische Anhängerschaft unter Web-Entwicklern. Als es 2005 auf den Markt kam, war Firebug das erste Tool, mit dem Programmierer Code direkt im Firefox-Browser untersuchen, bearbeiten und debuggen konnten. Es ermöglichte auch die Live-Überwachung von CSS, HTML und JavaScript in jeder Webseite, was ein großer Schritt nach vorne war.
Firebug erregte die Aufmerksamkeit der Leute – und mehr als eine Million treuer Fans nutzen es heute noch.
So ist es traurig, dass Firebug nun das Ende seiner Lebensdauer im Firefox-Browser erreicht, mit der Veröffentlichung von Firefox Quantum (Version 57) nächsten Monat. Die gute Nachricht ist, dass alle Fähigkeiten von Firebug nun in den aktuellen Firefox Developer Tools vorhanden sind.
Die Geschichte von Firefox und Firebug ist ein Synonym für den Aufstieg des Webs. Wir haben den guten Kampf gekämpft und verändert, wie Entwickler HTML inspizieren und JS im Browser debuggen. Firebug läutete die Ära des Web 2.0 ein. Heute lebt die Arbeit, die die Firebug-Community in den letzten 12 Jahren geleistet hat, in den Firefox Developer Tools weiter.
Vorwärtsblick, Rückblick
Aber bevor wir weitermachen, wollen wir uns ein paar Momente Zeit nehmen, um uns an all die großen Meilensteine des Firebug-Projekts zu erinnern und einige Geschichten von frühen Community-Mitgliedern zu erzählen.
- Jan 2006, Firebug 0.2 Joe veröffentlicht die Single-Tab-Konsole mit AJAX-Logging.
- Mai 2006, Firebug 0.4 Es gibt einen neuen Top-Level-Tab für das JavaScript-Debugging.
- Dez 2006 Firebug wird open-sourced.
- Jan 2007, Firebug 1.0 Der Beginn von Web 2.0!
- Aug 2008, Firebug 1.2 Erste FWG (Firebug Working Group) Veröffentlichung.
- Okt 2009, HTTP Archive (HAR) Ein Archiv für Web Performance und darüber hinaus.
- Feb 2010, Firebug Lite für Google Chrome veröffentlicht (Bookmarklet).
- Apr 2010, Dynamische und grafische Webseiten-Breakpoints erfunden (pdf).
- 2011Boom der Firebug-Erweiterungen.
- Juni 2014, Firebug 2.0 Frisches neues UI, kompatibel mit Firefox Australis.
- Juni 2016, Vereinheitlichung von Firebug & Firefox DevTools.
- Okt 2017, Goodbye Firebug!
Firebug 0.2, Konsolen-Bedienfeld
Ich möchte einige meiner eigenen schönen Firebug-Erinnerungen und historischen Momente teilen, beginnend damit, wie alles begann.
Die allererste Version, die im Januar 2006 auf AMO veröffentlicht wurde, ist Firebug 0.2 mit einem kurzen Kommentar von Joe Hewitt:
Dies ist eine sehr frühe Version – der Code ist nur ein paar Tage alt. Hüten Sie sich vor dem Leoparden.
Später im Dezember 2006 trifft Joe die wichtige Entscheidung, Firebug als Open Source zu veröffentlichen:
Die erste Ankündigung bezieht sich auf die Lizenzierung von Firebug. Als ich Firebug 1.0 entwickelte, begann ich mich zu fragen, ob ich versuchen sollte, das Projekt von einem Hobby in ein Geschäft zu verwandeln. Als ich diese Idee in meinem Blog vorschlug, waren die Reaktionen sehr positiv und bestätigten meine Überzeugung, dass Firebug als kommerzielles Produkt gut laufen könnte.
Allerdings habe ich am Ende einfach nicht das Gefühl, dass dies das Richtige ist. Ich liebe es, an Firebug zu arbeiten, weil ich weiß, dass ich eine Menge Leute glücklich mache und dabei helfe, den Stand der Technik voranzutreiben. Das bedeutet mir viel mehr als alles andere, und so habe ich entschieden, dass Firebug frei und quelloffen bleiben wird.
Nach der Veröffentlichung von v1.0 zog Joe Hewitt weiter zu seinem nächsten Abenteuer bei Facebook und John J. Barton (IBM) wurde bald daran interessiert, das Projekt wiederzubeleben …
Oh Firebug! Lustige Zeiten. Ich begann als Benutzer und Mitwirkender (von obskuren Debugging-of-Eval-Funktionen). Als Joe Hewitt sich entschied, weiterzuziehen, habe ich mich bei IBM umgehört, um das Interesse an der Fortsetzung seiner Arbeit zu erkunden. Zu dieser Zeit begannen Enterprise-Web-Anwendungen gerade zu wachsen, ohne viel mehr als ‚window.alert()‘ Debugging. Nachdem Jan ‚Honza‘ Odvarko dem Firebug-Projekt beigetreten war, stimmte das Rational IDE-Team von IBM zu, meine Arbeit an Firebug zu unterstützen und ich erstellte ein Eclipse-Plugin, um Firebug in das Produkt zu integrieren. Honza und ich füllten Joes großartiges Framework aus und skalierten das Tool für größere und komplexere Anwendungen. Wir fügten Tests hinzu und verbesserten die Freigabeprüfung, dann behoben wir Fehler und reagierten auf Fehlerberichte, um eine Community aufzubauen. Bald hatten wir weitere Mitwirkende und eine wachsende Sammlung von Firebug-Erweiterungen. Mike Collins schloss sich mir an, um auf der Produktseite zu helfen, und ich arbeitete mit Salman Mirghasemi an der EPFL an Forschungsprojekten, die die Firebug-Technologie nutzten.
Ich bin stolz auf unsere kollektiven Bemühungen, Firebug während der kritischen Wachstumsphase der Web-Technologie zu unterstützen. Dieses Tool hat zahllosen Entwicklern geholfen, Websites zu erstellen, die von Millionen von Menschen weltweit genutzt werden. Jetzt hat jeder Browser einen Debugger, der von unserer Arbeit inspiriert wurde. Während ich die rauflustige, selbständige Teamarbeit der Firebug-Entwicklung vermisse, gehen wir mit dem Wissen, dass wir einen großen positiven Einfluss hatten.
Firebug 1.2, Net-Panel
Der Erfolg eines Projektes ist immer abhängig vom Engagement der Entwickler, Mitwirkenden und beteiligten Anwender. Aber es gab auch Zeiten, in denen es nicht einfach war, mit dem sich schnell entwickelnden Firefox-Browser Schritt zu halten, und wir mussten hart arbeiten.
Ein Ausschnitt aus John J. Bartons Beitrag (März 2010):
Wir haben einen langen Weg zurückgelegt, seit Joe Hewitt Firebug 1.0 entfesselt hat. Firebug kam zu Beginn der Web 2.0-Revolution auf den Markt und trug dazu bei, dass die Leute nicht mehr dachten, Web 2.0 sei eine Modeerscheinung, sondern erkannten, dass Webanwendungen real sein können. Firebug musste schnell erwachsen werden, während wir den Code noch nicht gut verstanden und schon gar nicht Firefox.
Firebug 1.1 war nicht wirklich dafür gedacht, obwohl es von ein paar engagierten und hilfsbereiten Leuten benutzt wurde. Also war Firebug 1.2 unsere erste richtige Veröffentlichung jenseits von Joes ursprünglichem Quellcode. Hinter den Kulissen hatten wir viel zusätzliche Arbeit, um eine Sicherheitslücke in Firebug zu schließen. Zu der Zeit konnten wir es niemandem sagen: zu viele Benutzer waren gefährdet.
Firebug war schon immer ein sehr beliebtes Projekt und viele Entwickler begannen an Firebug-Features zu arbeiten, Fehler zu beheben und Erweiterungen zu bauen. Ja, viele neue Erweiterungen, um eine Erweiterung zu erweitern. Wir haben alle die gleiche Technologie verwendet. Community-Glück.
Es gibt einen Beitrag von mir über Firebug-Erweiterungen, Juli 2008:
Haben Sie sich schon einmal dafür interessiert, welche Erweiterungen für Firebug verfügbar sind? Wenn ja, werfen Sie einen Blick auf das, was ich gefunden habe. Ehrlich gesagt war ich ziemlich überrascht, wie viele Firebug-Erweiterungen es bereits gibt.
Im Jahr 2008 gab es etwa 10 Firebug-Erweiterungen und im Jahr 2011 mehr als 60. Es ist nicht einfach, eine Code-Basis weiterzuentwickeln, die so viele Erweiterungen unterstützen muss, glauben Sie mir!
Ich habe 2007 angefangen, an Firebug zu arbeiten, und ich habe mich John J. Barton angeschlossen, als er an v1.2 arbeitete. Zu dieser Zeit wurde die Firebug Working Group ins Leben gerufen und wir alle konzentrierten uns auf den Aufbau von Firebug und der Community drum herum. Das waren aufregende Zeiten. Wir waren eine relativ kleine Gruppe und jede einzelne neue Funktion, die wir einführten, wurde am nächsten Tag von Millionen von Menschen genutzt. Wir bekamen eine große Menge an Feedback und lernten eine Menge darüber, wie man visuelle Werkzeuge für Webentwickler baut.
Das erste Firebug-Teil, an dem ich gearbeitet habe, war das Net-Panel. HTTP-Monitoring war schon immer mein Steckenpferd, und wir bemerkten bald, dass es viele Benutzeranfragen gab, die vom Panel gesammelten Daten zu exportieren. Eine solche Funktion zu implementieren war nicht schwer, das schöne Stück Arbeit war die Einführung eines neuen Formats für exportierte Daten. Ein paar Jahre später, etwa im Oktober 2009, führten wir zusammen mit Steve Souders (Page-Load-Performance-Guru und Autor von YSlow, das oft als die erste Firebug-Erweiterung angesehen wird) und Simon Perkins das neue HTTP Archive (HAR)-Format ein. Dieses Format war ein großer Erfolg und viele Tools unterstützen es nun.
Aus Steve Souders Beitrag:
Ich schlug vor, dass Firebug, anstatt ein weiteres proprietäres Format zu erstellen, sich mit HttpWatch zusammentun sollte, um ein gemeinsames Format zu entwickeln und dieses als Vorschlag für einen Industriestandard voranzutreiben. Ich stellte Simon Perkins (HttpWatch) und Jan „Honza“ Odvarko (Hauptentwickler des Net Panels) vor und trat dann zurück, als sie gemeinsam an der heutigen Ankündigung arbeiteten.
Ich hatte viel Spaß bei der Arbeit mit John und anderen an dem Projekt. Da Firebug gut geschrieben und architektonisch gut aufgebaut war, war es ein Vergnügen, darauf aufzubauen. Joe hat großartige Arbeit geleistet, indem er die Grundlage für die Unterstützung von Dutzenden von Erweiterungen gelegt hat, die auf Firebug aufsetzen. John J. war ein ausgezeichneter Manager und Kollege, mit dem man zusammenarbeiten konnte. Eines der Konzepte, die wir erfunden und in Firebug implementiert haben, bezog sich auf eine neue Art von Haltepunkten. Wir nannten sie dynamische und grafische Webseiten-Breakpoints. Ja, Sie kennen diese Features vielleicht als Break on XHR, Break on Next, Break on DOM mutation, etc.
Aus dem Firebug-Blog:
Jan „Honza“ Odvarko und ich haben „Dynamic and Graphical Web Page Breakpoints“ auf der 1.5 Breakpoints zur WWW 2010 eingereicht. Er motiviert die verschiedenen Breakpoints, beschreibt die Benutzererfahrung und die Implementierung und setzt diese Breakpoint-Arbeit dann in Beziehung zu akademischen Arbeiten.
Wenn Sie die Cliff Notes Version wollen, haben wir auch eine Demo-Seite.
Firebug 2.0 wurde im Juni 2014 veröffentlicht. Es war eine große Überarbeitung der Benutzeroberfläche, um sie mit dem neuen Firefox Australis Theme kompatibel zu machen. Wir lieferten pünktlich und waren stolz darauf, eine echte Gemeinschaftsleistung. Seit dieser Veröffentlichung befinden wir uns im Wartungsmodus. Die neueste Firebug-Version auf AMO ist 2.0.19.
Offiziell haben wir mit der Vereinheitlichung von Firebug mit den eingebauten Firefox-Tools um 2016 herum begonnen, aber tatsächlich begann der Prozess schon früher. Mozillas Strategie war es, neue eingebaute Entwickler-Tools einzuführen, die als Standard in Firefox angeboten werden. Moderne Entwicklerwerkzeuge, die von Grund auf neu geschrieben wurden. Die Entscheidung wurde getroffen, Firebug nicht als die Plattform zu verwenden, auf der man aufbauen wollte. Einige Firebug-Benutzer und Mitwirkende waren von dieser Entscheidung enttäuscht, aber Mozillas Infrastruktur und Anforderungen waren zu dieser Zeit anders. Manchmal ist es einfach besser, bei Null anzufangen, was besonders für die Software-Entwicklung gilt.
Am wichtigsten ist, dass die heutigen Firefox DevTools in großartiger Form und schneller als je zuvor sind, basierend auf Web-Technologien wie React/Redux/Webpack, coole Sachen. Die Architektur ist bereit, Erweiterungen zu unterstützen. Das Team ist großartig, mit erfahrenen Tool-Entwicklern. Das ist mein Team 🙂
Der Prozess der Vereinheitlichung von Firebug mit den umgebauten Devtools wurde mit der Veröffentlichung von Firebug 3 (aka Firebug.next) im Jahr 2015 abgeschlossen. Dieser Prototyp wurde als Erweiterung für die eingebauten Firefox Devtools gebaut und schließlich direkt in die Devtools integriert. Sie können erfahren, wie Sie von Firebug migrieren können. Sie können Firefox Developer Tools ausprobieren, indem Sie Ihren Release-Browser aktualisieren oder die Developer Edition herunterladen.
Der Support für alle Old-School*-Erweiterungen endet in Firefox Quantum (aka 57). Ja, auch für Firebug, und das war der Anlass, diesen Beitrag zu schreiben.
Der König ist tot, lang lebe der König!
Jan ‚Honza‘ Odvarko
- XUL & Add-on SDK based
Liste der Mitwirkenden: Joe Hewitt, John J. Barton (IBM Almaden), Jan Odvarko (Mozilla Corp.), Max Stepanov (Aptana Inc.), Rob Campbell (Mozilla Corp.), Hans Hillen (Paciello Group, Mozilla), Curtis Bartley (Mozilla Corp.), Mike Collins (IBM Almaden), Kevin Decker, Mike Ratcliffe (Mozilla Corp.), Hernan Rodriguez Colmeiro, Austin Andrews, Christoph Dorn, Steven Roussey (Illuminations for Developers), Sebastian Zartner, Harutyun Amirjanyan, Simon Lindholm, Stampolidis Anastasios, Joe Walker (Mozilla Corp.), Vladimir Zhuravlev, Farshid Beheshti, Leon Sorokin, Florent Fayolle, Hector Zhao, Bharath Thiruveedula, Nathan Mische, Belakhdar Abdeldjalil, Jakob Kaltenbrunner, …
Liste der Übersetzer: Leszek(teo)Zyczkowski (pl-PL), markh (nl), peter3 (sv-SE), AlleyKat (da-DK), Hector Zhao, lovelywcm (zh-CN), Lukas Kucharczyk, Michal Kec (cs-CZ), Team Erweiterungen.de, ReinekeFux, Benedikt Langens, Sebastian Zartner (de-DE), l0stintranslation, gonzalopirobutirro, Luigi Grilli (it-IT), alexxed (ro-RO), Nicolas Martin, Franck Marcia (fr-FR), gLes (hu-HU), Xavi Ivars – Softcatala (ca), gezmen (tr-TR), eternoendless (es-AR), Dark Preacher (ru), Tiago Oliveira, Diego de Carvalho Zimmermann, Alexandre Rapaki (pt-BR), Juan Botias, Alvaro G. Vicario (es-ES), Andriy Zhouck (uk-UA), Hisateru Tanaka, k2jp (ja-JP), Mohsen Shadroo (fa-IR), Eduard Babayan (hy-AM), Helder Magalhaes (pt-PT), Tomaz Macus (sl-SI), Stoyan Stefanov, Alexander Shopov (bg), Kristjan Bjarni Guomundsson (is-IS), NGUYEN Manh Hung (vi-VN), Bwah (hr-HR), Sonickydon (el), David Gonzales (es), DakSrbija (sr), bootleq (zh-TW), Asier Iturralde Sarasola, Julen Irazoki Oteiza (eu), …
Über Jan Honza Odvarko
Honza arbeitet an Firefox Developer Tools
- www.softwareishard.com/
- @janodvarko
Mehr Artikel von Jan Honza Odvarko…
Mehr Artikel von Jan Honza Odvarko…