Hacks

De populairste en krachtigste web-ontwikkeltool.

Firebug is een fenomenaal succes geweest. In de loop van zijn 12-jarige bestaan, heeft de open source tool een bijna cult-volger onder webontwikkelaars ontwikkeld. Toen Firebug in 2005 uitkwam, was het de eerste tool waarmee programmeurs code direct in de Firefox-browser konden inspecteren, bewerken en debuggen. Ook kon je CSS, HTML en JavaScript live in elke webpagina controleren, wat een enorme stap voorwaarts was.

Firebug trok de aandacht van mensen – en meer dan een miljoen trouwe fans gebruiken het vandaag de dag nog steeds.

Het is dus triest dat Firebug nu het einde van het leven in de Firefox-browser nadert, met de release van Firefox Quantum (versie 57) volgende maand. Het goede nieuws is dat alle mogelijkheden van Firebug nu aanwezig zijn in de huidige Firefox Developer Tools.

Het verhaal van Firefox en Firebug is synoniem met de opkomst van het web. We vochten de goede strijd en veranderden de manier waarop ontwikkelaars HTML inspecteren en JS debuggen in de browser. Firebug luidde het Web 2.0-tijdperk in. Vandaag de dag leeft het werk dat de afgelopen 12 jaar door de Firebug-gemeenschap is verricht voort in Firefox Developer Tools.

Voruitkijken, terugblikken

Maar voordat we verder gaan, nemen we even de tijd om alle grote mijlpalen van het Firebug-project in herinnering te roepen, en enkele verhalen van vroege leden van de gemeenschap te delen.

• Januari 2006, Firebug 0.2 Joe geeft de console met één tabblad en AJAX-logging vrij.
• Mei 2006, Firebug 0.4 Er is een nieuw tabblad op het hoogste niveau voor JavaScript-debugging.
• Dec 2006 Firebug is open-sourced.
• Jan 2007, Firebug 1.0 Het begin van Web 2.0!
• Aug 2008, Firebug 1.2 Eerste FWG (Firebug Working Group) release.
• Okt 2009, HTTP Archive (HAR) Eén archief voor web performance en verder.
• Feb 2010, Firebug Lite voor Google Chrome vrijgegeven (bookmarklet).
• Apr 2010, Dynamische en grafische Web Page Breakpoints uitgevonden (pdf).
• 2011Boom van Firebug extensies.
• Juni 2014, Firebug 2.0 Frisse nieuwe UI compatibel met Firefox Australis.
• Juni 2016, Unifying Firebug & Firefox DevTools.
• Oct 2017, Goodbye Firebug!

Firebug 0.2, Console-paneel

Ik wil graag enkele van mijn eigen dierbare Firebug-herinneringen en historische momenten delen, te beginnen met hoe het allemaal begon.

De allereerste versie die in januari 2006 op AMO werd uitgebracht is Firebug 0.2 met een kort commentaar van Joe Hewitt:

Dit is een zeer vroege release – de code is nog maar een paar dagen oud. Pas op voor het luipaard.

Later in december 2006 neemt Joe de belangrijke beslissing om Firebug open source te maken:

De eerste aankondiging heeft betrekking op de licenties van Firebug. Toen ik Firebug 1.0 aan het ontwikkelen was, begon ik me af te vragen of ik moest proberen het project van een hobby in een bedrijf te veranderen. Toen ik dit idee voorstelde op mijn blog, waren de reacties zeer positief en bevestigden mijn overtuiging dat Firebug het goed zou kunnen doen als commercieel product.
Hoewel, uiteindelijk heb ik gewoon niet het gevoel dat dit het juiste is om te doen. Ik werk graag aan Firebug omdat ik weet dat ik een heleboel mensen blij maak en meehelp aan de vooruitgang van de techniek. Dat is voor mij veel belangrijker dan wat dan ook, en daarom heb ik besloten dat Firebug gratis en open source zal blijven.

Na het uitbrengen van v1.0, ging Joe Hewitt verder met zijn volgende avontuur bij Facebook en John J. Barton (IBM) kreeg al snel interesse om het project nieuw leven in te blazen …

Oh Firebug! Leuke tijden. Ik begon als gebruiker en bijdrager (van obscure debug-of-eval functies). Toen Joe Hewitt besloot verder te gaan, heb ik bij IBM rondgekeken om te zien of er belangstelling was om zijn werk voort te zetten. In die tijd begonnen enterprise Web apps net te groeien zonder veel meer dan ‘window.alert()’ debugging. Toen Jan ‘Honza’ Odvarko zich bij Firebug aansloot, stemde IBM’s Rational IDE-team ermee in mijn werk aan Firebug te ondersteunen en maakte ik een Eclipse-plugin om Firebug met het product te integreren. Honza en ik vulden Joe’s geweldige framework aan, en schaalden de tool naar grotere en meer complexe applicaties. We voegden tests toe en verbeterden de release vetting, dan repareerden we bugs en reageerden op bug rapporten om een gemeenschap op te bouwen. Al snel hadden we andere bijdragers en een groeiende collectie van Firebug extensies. Mike Collins kwam me helpen aan de productkant en ik werkte samen met Salman Mirghasemi bij EPFL aan onderzoeksprojecten die Firebug-technologie gebruikten.

Ik ben trots op onze gezamenlijke inspanningen om Firebug in stand te houden tijdens de kritieke groeifase van webtechnologie. Deze tool heeft talloze ontwikkelaars geholpen sites te bouwen die door miljoenen mensen wereldwijd worden gebruikt. Nu heeft elke browser een debugger die door ons werk is geïnspireerd. Hoewel ik het zelfvoorzienende teamwork van de ontwikkeling van Firebug mis, vertrekken we in de wetenschap dat we een grote positieve impact hebben gehad.

Firebug 1.2, Net paneel

Het succes van een project is altijd afhankelijk van de toewijding van ontwikkelaars, medewerkers en betrokken gebruikers. Maar er waren ook momenten dat het niet eenvoudig was om de snel evoluerende Firefox-browser bij te houden en we hard moesten werken.

Een fragment uit het bericht van John J. Barton (maart 2010):

We zijn een heel eind gekomen sinds Joe Hewitt Firebug 1.0 ontketende. Firebug kwam aan het begin van de Web 2.0-revolutie en hielp mensen om Web 2.0 niet langer als een modegril te zien, maar als echte webapps. Firebug moest snel volwassen worden terwijl we de code nog steeds niet goed begrepen en zeker Firefox niet begrepen.

Firebug 1.1 was niet echt de bedoeling, hoewel het werd gebruikt door een paar toegewijde en behulpzame mensen. Dus Firebug 1.2 was onze eerste echte release buiten Joe’s originele broncode. Achter de schermen hadden we veel extra werk om een veiligheidslek in Firebug te dichten. Destijds konden we dat aan niemand vertellen: te veel gebruikers werden blootgesteld.

Firebug is altijd een erg populair project geweest en veel ontwikkelaars begonnen te werken aan Firebug-functies, bugs te repareren en uitbreidingen te bouwen. Ja, veel nieuwe extensies om een extensie uit te breiden. We gebruikten allemaal dezelfde technologie. Het geluk van de gemeenschap.

Er is een post die ik heb gemaakt over Firebug-extensies, juli 2008:

Heb je ooit interesse gehad in welke extensies er beschikbaar zijn voor Firebug? Zo ja, kijk dan eens naar wat ik heb gevonden. Eerlijk gezegd was ik nogal verbaasd hoeveel Firebug-extensies er al bestaan.

Er waren ongeveer 10 Firebug-extensies in 2008 en meer dan 60 in 2011. Het is niet eenvoudig om een codebase te ontwikkelen die zoveel extensies moet ondersteunen, geloof me!

Ik begon in 2007 aan Firebug te werken en ik sloot me aan bij John J. Barton toen hij met v1.2 bezig was. In die tijd begon de Firebug Working Group en we richtten ons allemaal op het bouwen van Firebug en de gemeenschap eromheen. Dit waren spannende tijden. We waren een relatief kleine groep en elke nieuwe functie die we introduceerden werd de volgende dag door miljoenen mensen gebruikt. We kregen veel feedback en leerden veel over het bouwen van visuele tools voor webontwikkelaars.

Het eerste Firebug-onderdeel waar ik aan werkte was het Net-panel. HTTP-monitoring was altijd al mijn ding en we merkten al snel dat veel gebruikers vroegen om gegevens die door het panel waren verzameld te exporteren. Het implementeren van zo’n feature was niet moeilijk, het leuke stuk werk was de introductie van een nieuw formaat voor geëxporteerde data. Een paar jaar later, rond oktober 2009, introduceerden we het nieuwe HTTP Archive (HAR) formaat met Steve Souders (page-load-performance goeroe en auteur van YSlow, vaak beschouwd als de eerste Firebug extensie) en Simon Perkins. Dit formaat was een groot succes en wordt nu door veel tools ondersteund.

Van Steve Souders post:

Ik stelde voor dat Firebug, in plaats van nog een propriëtair formaat te creëren, zou samenwerken met HttpWatch om een gemeenschappelijk formaat te ontwikkelen, en dat naar voren te brengen als een voorstel voor een industriestandaard. Ik stelde Simon Perkins (HttpWatch) en Jan “Honza” Odvarko (hoofdontwikkelaar van Net Panel) voor, en deed vervolgens een stap terug terwijl zij samenwerkten om de aankondiging van vandaag te produceren.

Ik vond het leuk om met John en anderen aan het project te werken. Firebug was goed geschreven en goed ontworpen, dus het was een plezier om erop voort te bouwen. Joe heeft goed werk verricht door de fundering te leggen voor het ondersteunen van tientallen en tientallen extensies die bovenop Firebug zijn gebouwd. John J. was een uitstekende manager en collega om mee samen te werken. Een van de concepten die we hebben uitgevonden en geïmplementeerd in Firebug was gerelateerd aan een nieuw soort breekpunt. We noemden het Dynamische en Grafische Web Pagina Onderbrekings Punten. Ja, je kent deze functies misschien als Break on XHR, Break on Next, Break on DOM mutation, etc.

Van Firebug blog:

Jan “Honza” Odvarko en ik hebben “Dynamic and Graphical Web Page Breakpoints” ingediend op de 1.5 breakpoints voor WWW 2010. Het motiveert de verschillende breakpoints, beschrijft de gebruikerservaring en de implementatie, en relateert dan dit breakpoint-werk aan academische papers.

Als u de Cliff Notes-versie wilt, hebben we ook een demopagina.

Firebug 2.0 werd uitgebracht in juni 2014. Het was een grote herschrijving van de UI om deze compatibel te maken met het nieuwe Firefox Australis-thema. We leverden op tijd en we waren er trots op, een echte gemeenschapsprestatie. Sinds die release, zijn we in onderhoudsmodus. De nieuwste Firebug-versie op AMO is 2.0.19.

Officieel zijn we rond 2016 begonnen met het verenigen van Firebug met ingebouwde Firefox-tools, maar in feite begon het proces eerder. Mozilla’s strategie was om nieuwe ingebouwde ontwikkelaarstools te introduceren die standaard in Firefox werden aangeboden. Moderne ontwikkelaarstools die vanaf nul zijn geschreven. De beslissing werd genomen om Firebug niet te gebruiken als het platform om op voort te bouwen. Sommige Firebug-gebruikers en -bijdragers waren teleurgesteld door deze beslissing, maar Mozilla’s infrastructuur en vereisten waren op dat moment anders. Soms is het gewoon beter om vanaf nul te beginnen, wat vooral geldt voor software-ontwikkeling.

Het belangrijkste is dat de Firefox DevTools van vandaag in topvorm zijn en sneller dan ooit, gebaseerd op webtechnologieën zoals React/Redux/Webpack, coole dingen. De architectuur is klaar om extensies te ondersteunen. Het team is geweldig, met ervaren tool-ontwikkelaars. Dit is mijn team 🙂

Het proces van het verenigen van Firebug met de herbouwde devtools werd voltooid met de release van Firebug 3 (aka Firebug.next) in 2015. Dit prototype werd gebouwd als een extensie voor ingebouwde Firefox devtools en uiteindelijk direct geïntegreerd in devtools. U kunt meer te weten komen over hoe u van Firebug kunt migreren. U kunt Firefox Developer Tools uitproberen door uw releasebrowser bij te werken of Developer Edition te downloaden.

De ondersteuning voor elke old-school* extensie stopt in Firefox Quantum (aka 57). Ja, inclusief Firebug en daarom was er een mooie gelegenheid om dit bericht te schrijven.

De koning is dood, lang leve de koning!

Jan ‘Honza’ Odvarko

• XUL & Add-on SDK gebaseerd

Lijst van bijdragers: 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, …

Lijst van vertalers: 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), …

Over Jan Honza Odvarko

Honza werkt aan Firefox-ontwikkelaarshulpmiddelen

• www.softwareishard.com/
• @janodvarko

Meer artikelen van Jan Honza Odvarko…

Meer artikelen van Jan Honza Odvarko…