Aller à la recherche

Les outils de développement de Firefox et Firebug

Outils de développement Web dans Firefox 26 AuroraFirebug a longtemps été une extension indisensable pour développer. Ses auteurs ont innové tout en reprenant des leurs aînés comme le rappelle cette histoire de Firebug racontée récemment par Mike Ratcliffe. Depuis, tous les navigateurs y compris Firefox ont développé des outils de développement intégrés très performants. L’article des Mozilla hacks de Dave Camp revient sur la création des actuels outils de développement de Firefox, questionne le repositionnement de Firebug face à cette nouvelle donne et scrute l’avenir des outils de développement de Firefox que vous pouvez aider à écrire.


Si vous n’avez pas essayé les outils de développement de Firefox au cours des 6 derniers mois, vous devez absolument y jeter un nouveau coup d’œil. Procurez-vous le dernier navigateur Aurora et lancez les outils à partir du menu « Développement Web » (un sous-menu d’Outils sur certaines plateformes et NDT : Ctrl + Maj + D depuis Firefox 25 actuellement en bêta).

Les outils ont été beaucoup améliorés ces derniers temps : lorsque vous déboguez, vous pouvez désormais ignorer (boîte noire) des bibliothèques telles que jQuery, afin de rester concentré sur votre code. La fonction Source Map vous permet de déboguer le code généré par des compilateurs ou des compacteurs de code. L’inspecteur a le paint flashing (NDT : affichage incrémental des briques composant la page), un nouveau panneau de polices et un inspecteur de styles considérablement amélioré avec l’autocomplétion avec la touche tabulation et pseudo-éléments. Le moniteur réseau vous aide à déboguer votre activité réseau. La liste est longue et vous pouvez en savoir plus sur les développements récents dans notre série de billets sur Aurora.

Après avoir fait connaissance avec les outils, démarrez le gestionnaire d’applications. Installez Firefox OS Simulator pour voir comment votre application se comportera sur un appareil. Si vous possédez un appareil sous Firefox OS exécutant les dernières nocturnes 1.2, vous pouvez connecter les outils directement au téléphone.

Pourquoi des outils intégrés ?

Le Web doit beaucoup à Firebug. Pendant longtemps, Firebug a été la meilleure solution. Il a présenté pour la première fois la mise en évidence visuelle du DOM, l’édition des styles in situ et l’API de la console.

Avant la sortie de Firefox 4, nous avons décidé que Firefox avait besoin d’un ensemble d’outils intégrés de haute qualité. Les développer dans le navigateur nous permet de tirer profit de la communauté et de l’infrastructure de Mozilla existantes, et développer dans mozilla-central fait une énorme différence quand on travaille avec les développeurs de Gecko et de Spidermonkey. Nous avions des modifications de la plateforme ambitieuses : l’API de JSD utilisée par Firebug pour déboguer le JavaScript avait mal vieilli et nous voulions faire coévoluer les outils aux côtés d’une nouvelle API de débogueur de Spidermonkey.

Nous avons pensé longuement et sérieusement à l’inclusion de Firebug en bloc et avons examiné plusieurs approches pour l’intégrer. Un premier prototype de l’inspecteur a même inclus une partie importante de Firebug. En fin de compte, l’intégration s’est avérée trop difficile et nous aurait obligé à des réécritures qui auraient été équivalentes à tout recommencer.

Comment fait Firebug ?

Firebug n’est pas immobile. Le groupe de travail de Firebug continue à l’améliorer, comme vous pouvez le voir dans leur dernière version 1.12. Firebug s’efforce de passer de JSD à la nouvelle API de débogueur, de récolter les fruits en terme de performance et de stabilité de ce que nous avons ajouté pour les outils de développement de Firefox.

Et après ? Jan Odvarko, chef du projet Firebug, a déclaré :

Firebug a toujours été maintenu de préférence comme un projet indépendant, à l’extérieur des processus existants et de l’environnement de Firefox alors que DevTools est un projet en interne de Mozilla en utilisant les procédures standards. Notez que l’objectif de Firebug est historiquement de compléter les fonctionnalités de Firefox et de ne pas rivaliser avec elles (Firebug est une extension après tout) et nous voulons garder cette direction en faisant de Firebug un outil unique.

Tout le monde veut trouver la meilleure façon pour la communauté des utilisateurs de Firebug, les développeurs et les auteurs d’extensions de façonner et de compléter les outils de développement de Firefox. L’équipe de Firebug discute activement de leur stratégie ici, mais n’a pas décidé comment ils veulent y parvenir.

Suivez le blog de Firebug et le compte @firebugnews pour vous impliquer.

Quelle est la prochaine étape pour les outils de développement de Firefox ?

Nous avons des choses plus enthousiasmantes à sortir des tuyaux. Certaines d’entre elles seront du nouveau travail sur les fonctionnalités, y compris l’analyse des performances et des outils pour WebGL. Une grande partie de celles-ci répondra à vos commentaires, en particulier ceux en provenance des développeurs essayant les outils pour la première fois.

Nous voulons aussi savoir ce que vous pouvez ajouter aux outils. Récemment l’extension Chrome Ember.js a été portée aux outils de développement de Firefox comme un hack du dimanche, mais nous savons qu’il y a d’autres idées là-bas. Comme la plupart du code de Firefox, vous pouvez généralement trouver un moyen de faire ce que vous voulez, mais nous travaillons également à définir et à publier une API outils de développement. Nous voulons aider les développeurs à développer des extensions des outils de développement performantes et de haute qualité. Nous serions ravis d’entendre les développeurs qui écrivent des extensions pour Firebug ou des Devtools de Chrome sur la meilleure façon de mener cela à bien.

Autrement, continuez de suivre le blog Hacks pour en savoir plus sur l’évolution des outils de développement de Firefox. Joignez-vous à la liste de diffusion dev-développeur-tools, au compte Twitter @FirefoxDevTools ou à #devtools sur irc.mozilla.org.


Le document original et cette traduction sont soumis aux conditions de la licence
Creative Commons : « Paternité – Partage des conditions initiales à l’identique 3.0 »
ou toute version postérieure.

License Creative Commons

Merci à Hervé Renault pour la relecture de cette traduction et son expertise.

Source

Mozilla Hacks, Firefox Developer Tools and Firebug, 8 oct. 2013, Dave Camp et Robert Nyman

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

La discussion continue ailleurs

URL de rétrolien : http://blogzinet.free.fr/blog/index.php?trackback/680

Fil des commentaires de ce billet

Page top