Sortie de Firebug 2.0 !

Sun, 15 Jun 2014 00:00:00 +0200

Ca y est. Voici la concrétisation d’un travail de long labeur que voici. Firebug 2.0 est sorti !

Tout d’abord, rappelons que Firebug est un projet open-source, maintenu par des développeurs du monde entier. Voici la liste de ceux ayant participé à la version 2.0 :

Jan ‘Honza’ Odvarko
Sebastian Zartner
Simon Lindholm
Florent Fayolle
Farshid Beheshti
Steven Roussey
Markus Staab
Sören Hentzel

Belakhdar Abdeldjalil
Thomas Andersen
Jakob Kaltenbrunner
David Gomez
Leif Dreizler
Luca Greco
Benediktas Knispelis

Il y a aussi de nombreux traducteurs de Firebug qui traduisent dans 35 langues ! J’en profite pour grandement remercier Jojaba pour son implication consciencieuse dans la traduction en français.

Cette version annonce de nombreuses nouveautés, dont en voici les plus importantes :

Nouveau design

Avant d’entrer dans le détail, regardons les changements apportés au niveau de l’interface de Firebug. L’outil s’est doté d’un nouvel aspect le rendant plus propre, plus épuré, et plus intuitif, et ce grâce à une équipe de designers de talent.

Nouvelle bibliothèque de débogage

Pour proposer le débogage de script et l’évaluation d’expression depuis sa Console, Firebug repose sur la bibliothèque de débogage appelée Javascript Debugger API.

Jusqu’alors, Firebug utilisait la première implémentation, qui a mal vieilli. Entre autre, elle posait problème lorsqu’on changeait d’onglet alors que le panneau Script de Firebug était actif (une latence de 10s!). Ce désagrément est résolu dans cette version.

Mais c’est aussi grâce à l’utilisation de cette bibliothèque de débogage que de nouvelles fonctionnalités ont émergées (dont Pretty-Print ou la visualisation de valeurs retournées) et de nouvelles apparaîtront à l’avenir.

Coloration syntaxique

L’une des améliorations les plus notables apparues dans cette version est sans doute le support de la coloration syntaxique du JavaScript.

La coloration syntaxique est aussi présente quand vous éditez du code HTML, le source du CSS…

Je pense qu’on est tous d’accord pour dire que c’est plus agréable ainsi ;-).

L’auto-indentation (Pretty Print)

Le panneau Script supporte également l’indentation automatique du code JavaScript minifié. Cette fonctionnalité vous sera utile dans de nombreuses circonstances, que ce soit pour aider à la lecture du code ou pour déboguer pas à pas.

L’inspecteur d’évènements DOM

Firebug 2 intègre l’extension EventBug et ajoute le panneau latéral “Events” au panneau HTML.

Ce panneau est très pratique : il vous liste tous les écouteurs d’évènements (event listeners) pour un élément donné et ses parents, et de voir leur code en un clic. Et en bonus : il vous permet de les activer / désactiver. Elle est pas belle la vie :-).

Recherche par sélecteur dans le panneau HTML

La recherche dans le panneau HTML a été améliorée pour intégrer le support des sélecteurs CSS ou XPath, ainsi que les expressions régulières.

Auto-complétion de code

L’auto-complétion a été améliorée à plusieurs endroits dans Firebug, notamment dans l’éditeur de commandes (dans le panneau Console), où il est désormais possible de presser la touche <Tab> ou la combinaison <Ctrl-Espace> pour ouvrir la popup d’auto-complétion:

Mais l’auto-complétion fonctionne désormais aussi dans l’éditeur de condition des points d’arrêt, en offrant les variables de portée locale.

Vous pouvez aussi profiter de l’auto-complétion en éditant des attributs HTML (ou SVG) et aussi à l’intérieur de l’attribut style. Tous ces petits détails font de Firebug un outil puissant à utiliser.

L’inspecteur d’expressions JavaScript

En déboguant pas à pas votre code, il vous est désormais possible d’inspecter rapidement un bout de code JavaScript et de visualiser son résultat dans une tooltip.

Il est également possible de faire un clic droit sur une expression (ou sur la sélection courante) et de choisir l’option “Utiliser en ligne de commande” ou “Inspecter dans l’onglet DOM”.

Groupement des logs dans la Console

La version 1.12 introduisait le groupement des logs identiques apparaissant consécutivement.

La version 2.0 donne la possibilité d’activer ou de désactiver cette option depuis l’interface des options du panneau Console (option activée par défaut).

Visualiser et modifier une valeur retournée

Cette fonctionnalité permet d’examiner et de modifier une valeur retournée par une fonction JavaScript. Prenons cet exemple :

function myFunction() {
    return foo();
}

Le problème des débogueurs est habituellement qu’il est impossible de visualiser le retour de la fonction foo(). Firebug donne donc la possibilité de passer à l’instruction d’après au moment où le débogueur s’arrête sur une instruction de retour de fonction, et d’en visualiser la valeur retournée. Mieux encore, il vous permet de la modifier !

Afficher/Cacher des panneaux Firebug

Un ajout dans cette version est la possibilité de sélectionner les panneaux à afficher (ou à cacher). Voir la capture d’écran ci-après pour voir comment on procède.

Visualiser la valeur CSS originale d’une couleur

Une autre fonctionnalité bienvenue est l’affichage de la valeur CSS originale d’une couleur. Pour ce faire, la nouvelle option Colors as Authored (pas encore traduite en Français) a été introduite dans le panneau CSS. Elle permet d’afficher les couleur CSS comme définies à l’origine. Cela rend plus facile la comparaison des styles interprétée par le navigateur de celles définies dans la feuille de style originale.

Cette option est sélectionnée par défaut, mais il vous est possible de changer pour le format hexadecimal, RGB ou HSL.

Créer rapidement un nouvel attribut HTML

Cette version introduit une nouvelle méthode pour créer de nouveaux attributs HTML. Pour ce faire, il suffit de passer la souris sur le chevron fermant (>) de votre balise. Voyez, le curseur change de forme en une main.

Cliquez sur le chevron fermant pour ouvrir l’éditeur intégré (inline) et renseignez le nom de l’attribut.

Le reste se fait comme à votre habitude. Appuyez sur la touche <Tab> et renseignez la valeur.

C’est le genre de petite fonctionnalité qui rend l’utilisation de Firebug plus aisée au quotidien.

Inspecter les Mutation Observers renseignés

La commande getEventListeners() existante (voir cet article du blog de Jan Odvarko) a été étendu et affiche maintenant aussi les Mutation Observers pour un élément donné.

Vous pouvez utiliser cette page pour essayer vous-même.

Conclusion

C’est sans doute l’une des versions sorties les plus importantes de Firebug depuis sa création. Firebug en profite pour se mettre au goût du jour et innove.

Firebug est historiquement l’outil qui a révolutionné la façon de déboguer des pages web, et offre une expérience utilisateur qui continue de plaire à ses utilisateurs. Pour ce faire, le projet a toujours compté sur l’appui de ses contributeurs.

Nous recherchons des contributeurs pour continuer dans ce sens. N’hésitez pas à hacker le code du projet et à reporter des bogues ou à demander de nouvelles fonctionnalités. Saviez-vous d’ailleurs que Firebug n’utilisait que des languages Web (JavaScript, HTML, CSS, SVG), et un peu de XUL (pas beaucoup) ?

Mon expérience dans ce projet a commencé vraiment par hasard et je ne pensais pas être autant impliqué par la suite. J’ai énormément appris auprès de développeurs talentueux. Je recommande volontiers à quiconque voulant s’investir dans un projet libre et technique de se joindre à l’aventure.

Sources :

Blog officiel de Firebug [en]

Assertion failure