L’outil de développement Web le plus populaire et le plus puissant.
Firebug a connu un succès phénoménal. Au cours de ses 12 ans d’existence, l’outil open source a développé un quasi-culte parmi les développeurs web. Lorsqu’il est sorti en 2005, Firebug a été le premier outil à permettre aux programmeurs d’inspecter, de modifier et de déboguer le code directement dans le navigateur Firefox. Il vous permettait également de surveiller le CSS, le HTML et le JavaScript en direct dans n’importe quelle page web, ce qui était un énorme pas en avant.
Firebug a attiré l’attention des gens – et plus d’un million de fans fidèles l’utilisent encore aujourd’hui.
Il est donc triste que Firebug arrive maintenant en fin de vie dans le navigateur Firefox, avec la sortie de Firefox Quantum (version 57) le mois prochain. La bonne nouvelle est que toutes les capacités de Firebug sont désormais présentes dans les outils de développement actuels de Firefox.
L’histoire de Firefox et de Firebug est synonyme de l’essor du web. Nous avons mené le bon combat et changé la façon dont les développeurs inspectent le HTML et déboguent le JS dans le navigateur. Firebug a inauguré l’ère du Web 2.0. Aujourd’hui, le travail mené par la communauté Firebug au cours des 12 dernières années vit dans Firefox Developer Tools.
Looking Forward, Looking Back
Mais avant de passer à autre chose, prenons quelques instants pour nous rappeler toutes les grandes étapes du projet Firebug, et partageons quelques histoires des premiers membres de la communauté.
- Janvier 2006, Firebug 0.2 Joe publie la console à onglet unique avec journalisation AJAX.
- Mai 2006, Firebug 0.4 Il y a un nouvel onglet de niveau supérieur pour le débogage JavaScript.
- Déc 2006 Firebug est open-source.
- Jan 2007, Firebug 1.0 Le début du Web 2.0 !
- Août 2008, Firebug 1.2 Première version du FWG (Firebug Working Group).
- Oct 2009, HTTP Archive (HAR) Une archive pour les performances du Web et au-delà.
- février 2010, Firebug Lite pour Google Chrome publié (bookmarklet).
- avril 2010, les points d’arrêt dynamiques et graphiques des pages Web inventés (pdf).
- 2011Boom des extensions Firebug.
- Juin 2014, Firebug 2.0 Nouvelle interface utilisateur fraîche compatible avec Firefox Australis.
- Juin 2016, Unification de Firebug & Firefox DevTools.
- Oct 2017, Adieu Firebug !
Firebug 0.2, panneau Console
J’aimerais partager certains de mes propres bons souvenirs de Firebug et des moments historiques, en commençant par la façon dont tout a commencé.
La toute première version publiée en janvier 2006 sur AMO est Firebug 0.2 avec un court commentaire de Joe Hewitt:
C’est une version très précoce – le code n’a que quelques jours. Méfiez-vous du léopard.
Plus tard en décembre 2006, Joe prend la décision importante d’ouvrir le code source de Firebug :
La première annonce concerne la licence de Firebug. Alors que je développais Firebug 1.0, j’ai commencé à me demander si je devais essayer de faire passer le projet du statut de hobby à celui d’entreprise. Lorsque j’ai proposé cette idée sur mon blog, la réponse a été très positive et a réaffirmé ma conviction que Firebug pourrait bien fonctionner en tant que produit commercial.
Pourtant, au final, je n’ai tout simplement pas l’impression que c’est la bonne chose à faire. J’aime travailler sur Firebug parce que je sais que je rends beaucoup de gens heureux et que je contribue à faire avancer l’état de l’art. C’est beaucoup plus significatif pour moi que n’importe quoi d’autre, et donc, j’ai décidé que Firebug restera gratuit et open source.
Après avoir publié la v1.0, Joe Hewitt est passé à sa prochaine aventure chez Facebook et John J. Barton (IBM) s’est rapidement intéressé à ressusciter le projet…
Oh Firebug ! Une époque amusante. J’ai commencé en tant qu’utilisateur et contributeur (d’obscures fonctionnalités de débogage de l’aval). Lorsque Joe Hewitt a décidé de passer à autre chose, j’ai fait le tour d’IBM pour mesurer l’intérêt de poursuivre son travail. À l’époque, les applications Web d’entreprise commençaient tout juste à se développer sans autre chose que le débogage par ‘window.alert()’. Une fois que Jan ‘Honza’ Odvarko a rejoint les efforts de Firebug, l’équipe Rational IDE d’IBM a accepté de soutenir mon travail sur Firebug et j’ai créé un plugin Eclipse pour intégrer Firebug au produit. Honza et moi avons complété l’excellent cadre de Joe, en adaptant l’outil à des applications plus grandes et plus complexes. Nous avons ajouté des tests et amélioré le contrôle des versions, puis corrigé les bogues et répondu aux rapports de bogues pour créer une communauté. Bientôt, nous avons eu d’autres contributeurs et une collection croissante d’extensions Firebug. Mike Collins m’a rejoint pour aider du côté des produits et j’ai collaboré avec Salman Mirghasemi à l’EPFL sur des projets de recherche tirant parti de la technologie Firebug.
Je suis fier de nos efforts collectifs pour maintenir Firebug pendant la phase de croissance critique de la technologie Web. Cet outil a aidé d’innombrables développeurs à construire des sites utilisés par des millions de personnes dans le monde. Maintenant, chaque navigateur dispose d’un débogueur inspiré de notre travail. Bien que le travail d’équipe autonome et décousu du développement de Firebug me manque, nous partons en sachant que nous avons eu un grand impact positif.
Firebug 1.2, panneau Net
Le succès d’un projet dépend toujours du dévouement des développeurs, des contributeurs et des utilisateurs impliqués. Mais, il y a aussi eu des moments où il n’était pas simple de suivre l’évolution rapide du navigateur Firefox et où nous avons dû travailler dur.
Un extrait du billet de John J. Barton (mars 2010):
Nous avons fait du chemin depuis que Joe Hewitt a lâché Firebug 1.0. Arrivé au début de la révolution du Web 2.0, Firebug a aidé les gens à passer de l’idée que le Web 2.0 était une mode à la réalisation que les applications Web peuvent être réelles. Firebug a dû grandir en vitesse alors que nous ne comprenions toujours pas bien le code et certainement pas Firefox.
Firebug 1.1 n’était pas vraiment destiné à l’être, bien qu’il ait été utilisé par quelques personnes dévouées et utiles. Firebug 1.2 a donc été notre première vraie version au-delà de la source originale de Joe. Dans les coulisses, nous avons eu beaucoup de travail supplémentaire pour combler une faille de sécurité dans Firebug. À l’époque, nous ne pouvions le dire à personne : trop d’utilisateurs étaient exposés.
Firebug a toujours été un projet très populaire et de nombreux développeurs ont commencé à travailler sur les fonctionnalités de Firebug, à corriger les bugs et à construire des extensions. Oui, beaucoup de nouvelles extensions pour étendre une extension. Nous utilisions tous la même technologie. Le bonheur de la communauté.
Il y a un post que j’ai fait sur les extensions de Firebug, juillet 2008:
Vous êtes-vous déjà intéressé aux extensions disponibles pour Firebug ? Si oui, jetez un coup d’œil à ce que j’ai trouvé. Franchement, j’ai été assez surpris du nombre d’extensions Firebug déjà existantes.
Il y avait environ 10 extensions Firebug en 2008 et plus de 60 en 2011. Pas facile de faire évoluer une base de code qui doit supporter autant d’extensions, croyez-moi !
J’ai commencé à travailler sur Firebug en 2007 et j’ai rejoint John J. Barton lorsqu’il travaillait sur la v1.2. À cette époque, le groupe de travail Firebug a démarré et nous nous sommes tous concentrés sur la construction de Firebug ainsi que sur la communauté qui l’entoure. C’était une époque passionnante. Nous étions un groupe relativement petit et chaque nouvelle fonctionnalité que nous introduisions était utilisée par des millions de personnes le jour suivant. Nous avions reçu une grande quantité de commentaires et appris beaucoup sur la façon de construire des outils visuels pour les développeurs web.
La première pièce de Firebug sur laquelle j’ai travaillé était le panneau Net. La surveillance HTTP a toujours été ma tasse de thé et nous avons rapidement remarqué un grand nombre de demandes d’utilisateurs pour exporter les données collectées par le panneau. L’implémentation d’une telle fonctionnalité n’a pas été difficile, le plus beau travail a été l’introduction d’un nouveau format pour les données exportées. Quelques années plus tard, vers octobre 2009, nous avons introduit le nouveau format HTTP Archive (HAR) avec Steve Souders (gourou des performances de chargement des pages et auteur de YSlow, souvent considéré comme la première extension de Firebug) et Simon Perkins. Ce format a connu un grand succès et de nombreux outils le supportent désormais.
D’après le post de Steve Souders:
J’ai suggéré que, plutôt que de créer un énième format propriétaire, Firebug fasse équipe avec HttpWatch pour développer un format commun, et le faire avancer comme une proposition de norme industrielle. J’ai présenté Simon Perkins (HttpWatch) et Jan « Honza » Odvarko (principal développeur de Net Panel), puis je me suis retiré pendant qu’ils travaillaient ensemble pour produire l’annonce d’aujourd’hui.
J’ai passé de bons moments à travailler avec John et les autres sur le projet. Comme Firebug était bien écrit et bien architecturé, c’était un plaisir de construire par-dessus. Joe a fait un excellent travail en posant les bases pour supporter des dizaines et des dizaines d’extensions construites au dessus de Firebug. John J. était un excellent manager et un pair avec qui travailler. L’un des concepts que nous avons inventés et mis en œuvre dans Firebug était lié à un nouveau type de point d’arrêt. Nous l’avons appelé Dynamic and Graphical Web Page Breakpoints. Oui, vous connaissez peut-être ces fonctionnalités comme Break on XHR, Break on Next, Break on DOM mutation, etc.
Dans le blog de Firebug:
Jan « Honza » Odvarko et moi avons soumis « Dynamic and Graphical Web Page Breakpoints » sur les points d’arrêt 1.5 à WWW 2010. Il motive les différents points d’arrêt, décrit l’expérience utilisateur et la mise en œuvre, puis relie ce travail sur les points d’arrêt à des articles universitaires.
Si vous voulez la version Cliff Notes, nous avons également une page de démonstration.
Firebug 2.0 est sorti en juin 2014. Il s’agissait d’une réécriture majeure de l’interface utilisateur afin de la rendre compatible avec le nouveau thème Firefox Australis. Nous avons livré dans les temps et nous en étions fiers, une véritable réussite de la communauté. Depuis cette version, nous sommes en mode maintenance. La dernière version de Firebug sur AMO est la 2.0.19.
Officiellement, nous avons commencé à unifier Firebug avec les outils intégrés de Firefox vers 2016, mais en fait le processus a commencé plus tôt. La stratégie de Mozilla consistait à introduire de nouveaux outils de développement intégrés proposés par défaut dans Firefox. Des outils de développement modernes écrits à partir de zéro. La décision a été prise de ne pas utiliser Firebug comme plateforme sur laquelle construire. Certains utilisateurs et contributeurs de Firebug ont été déçus par cette décision, mais l’infrastructure et les besoins de Mozilla étaient différents à l’époque. Parfois, il vaut mieux repartir de zéro, ce qui est particulièrement vrai pour le développement de logiciels.
Plus important encore, les DevTools Firefox d’aujourd’hui sont en pleine forme et plus rapides que jamais, basés sur des technologies web comme React/Redux/Webpack, des choses cool. L’architecture est prête à supporter les extensions. L’équipe est formidable, avec des développeurs d’outils expérimentés. C’est mon équipe 🙂
Le processus d’unification de Firebug avec les devtools reconstruits a été achevé avec la sortie de Firebug 3 (aka Firebug.next) en 2015. Ce prototype a été construit comme une extension des devtools intégrés de Firefox et finalement intégré directement dans devtools. Vous pouvez vous renseigner sur la manière de migrer depuis Firebug. Vous pouvez essayer Firefox Developer Tools en mettant à jour votre navigateur de version ou en téléchargeant Developer Edition.
La prise en charge de chaque extension old-school* s’arrête dans Firefox Quantum (alias 57). Oui, y compris Firebug et c’est pourquoi il y avait une grande opportunité d’écrire ce post.
Le roi est mort, vive le roi !
Jan ‘Honza’ Odvarko
- XUL & Add-on SDK based
Liste des contributeurs : 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 des traducteurs : 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), …
À propos de Jan Honza Odvarko
Honza travaille sur Firefox Developer Tools
- WWh.softwareishard.com/
- @janodvarko
Plus d’articles par Jan Honza Odvarko…
Plus d’articles par Jan Honza Odvarko…