Dorénavant, l'inspecteur affiche l'ensemble des propriétés CSS qui s'appliquent à l'objet sélectionné. Y compris donc les propriétés héritées (en précisant d'où elles viennent), ce qui est très utile pour comprendre ce qui provoque tel ou tel comportement. Les règles qui ne sont pas appliquées car écrasées par d'autres sont barrées, et il est possible avec un clic sur l'icône qui s'affiche à gauche des lignes de suspendre une instruction. Un double clic permet d'éditer les propriétés, avec, comble du luxe, l'intégration de l'auto-complétion ! Petit gadget, le survol d'une couleur ou d'une image de fond spécifiée avec background-url permet de la prévisualiser. En haut est affiché le "fil d'Ariane" du DOM, et le survol d'un élément permet de le mettre en évidence, en différenciant même marges externes et internes.
Le nouvel onglet "Layout", dans le panneau d'édition des CSS, est une merveille. Il permet de modifier et de visualiser toutes les marges et dimensions de l'élément. On obtient des repères qui les délimitent, et même une petite règle pour voir où on se situe.
L'édition en direct est bien sur disponible directement dans la source HTML, ce qui se révèle très pratique à l'usage. Petite nouveauté ô combien importante : le texte fait maintenant partie des nœuds affichés, et peut donc être édité ! Un clic droit sur un élément permet de copier le code (modifié), ce qui manquait cruellement, puisque rien n'était sauvegardable.
Un nouvel onglet apparaît, "Net". Il recense tous les éléments que Firefox a du charger pour afficher la page, et le temps qu'il a fallu, à la miliseconde, pour le faire. On dispose donc de :
- la taille complète de la page
- du temps de chargement précis
- de la liste des éléments les plus longs à charger
Cet onglet peut même fonctionner en direct et au fur et à mesure du téléchargement de la page, et c'est réellement impressionnant. Quelques filtres sont disponibles en haut pour choisir les éléments à afficher. Idéal pour repérer les "fuites de débit" et les images mal optimisées !
Pas mal de nouveautés également du côté du déboggage JavaScript, mais je n'en parlerai pas, un seul moyen de les découvrir donc, tester FireBug 1...
Cerise sur la gâteau, un script simulant la console de FireBug est disponible et utilisable sur Opera, Safari, et Internet Explorer, pour comprendre les comportements différents entre navigateurs.
La nouvelle version de FireBug va donc rapidement s'imposer comme l'outil ultime d'aide aux développeurs de sites Internet et même comme éditeur CSS, étant donné qu'elle permet de visualiser en direct et en offrant une auto-complétion peformante les modifications apportées au fichier de style. C'est une petite révolution, car cette extension permet... tout, et fait, à mon avis, plus qu'améliorer les capacités de Firefox en le transformant en l'outil indispensable (plus que jamais) à tous les concepteurs de sites. FireBug 1 est d'une qualité professionnelle et pourrait être un logiciel indépendant signé par une boîte de développement privée et vendu quelques dizaines de dollars ; il justifie la migration vers Firefox de tous les développeurs de sites mêmes les plus conservateurs. Web Developer était présentée en son temps comme l'extension par excellence, FireBug 1 lui donne un sévère coup de vieux, et ne risque pas de se faire mettre de côté de si tôt.
