Bonjour,

Cela fait un petit moment que je n’ai pas écrit :-/. Depuis mon dernier billet il s’est passé bien des choses du côté de Firebug… nous en sommes à la version 1.11 qui est sortie en décembre 2012.

Comme je le fais habituellement, je vous propose une traduction / explication de la release note 1.11 (nouveautés).

A noter que cette version est valable pour les versions supérieures à Firefox 17.

Support SPDY

SPDY (prononcé « Speedy » pour rapide en anglais) est un protocole réseau expérimental — fonctionnant sur la couche application — créé pour transporter du contenu Web. SPDY est une proposition, conçue par Google, visant à augmenter les capacités du protocole HTTP sans toutefois remplacer ce dernier.

Le net panel vous indique si une page utilise ce nouveau protocole.

Visualisation des performances

Taper « performance.timing » dans la console permet l’affichage d’informations très détaillées sur les performance de chargement de votre page.

Le billet support for performance.timing in Firebug vous permettra d’aller un peu plus loin dans la compréhension et l’utilisation de cette fonctionnalité.

Requêtage des CSS

Un nouveau panneau sur le côté (dans l’onglet CSS) permet l’exécution d’un sélecteur CSS.
Vous n’avez qu’à cliquer (droit) sur la règle CSS et voir les éléments correspondants.

Nouvelle commande include()

Grâce à nouvelle commande include() il es dorénavant possible d’inclure dynamiquement une librairie quelle qu’elle soit.

Un exemple simple : include(« http://code.jquery.com/jquery-latest.min.js »);

Après cette commande la librairie jquery est accessible.

Si vous avez fréquemment recours à l’inclusion d’une librairie en particulier vous pouvez créer un alias qui sera persistant (même après redémarrage de Firefox) et appeler la librairie avec cet alias comme suit :

Et utiliser l’alias tout simplement :

Surveillance window.postMessage()

Les messages window.postMessage() sont désormais pris en charge. Ce type d’événement permet le suivi des échanges en la fenêtre principale et frames/iframes.

Les logs indiquent maintenant :

• L’URL de la fenêtre ou frame d’origine
• Les données qui accompagnent le message
• L’objet qui représente la fenêtre ou frame cible

Pour une explication détaillée :

Amélioration du copier-coller HTML

Il est possible de copier des blocs HTML et de les coller de différentes manières, c’est également possible avec le XML et SVG.

Pour aller plus loin :

<p style="margin:25px 0px 15px 0px;padding:5px;font-size:1.5em;
Du style dans les logs

La fonction de logue des messages dans la console en utilisant des CSS personnalisées a été améliorée. il est maintenant possible d’utiliser plusieurs formats dans un log.

Pour aller plus loin : Firebug Tip Styled Logging.

<p style="margin:25px 0px 15px 0px;padding:5px;font-size:1.5em;
Monitoring des appels de fonction

Vous pouvez « monitorer » n’importe quelle fonction (anonyme ou non) et récupérer un log directement dans la console lorsque cette fonction est appelée. Le log affiche la pile d’appels de la fonction en surveillance.

Pour aller plus loin : Firebug Tip: Log Function Calls .

Autocomplétion pour les propriétés natives de JavaScript

La ligne de commande de la console Firebug permet d’utiliser l’autocomplétion aussi pour les membres natifs (Comme le type String).

Bien d’autres améliorations ont été faites dans cette version, vous pourrez en trouver une liste exhaustive dans la release note.

Vous pouvez suivre le projet Firebug sur twitter.

Voilà, n’hésitez pas à commenter ce billet, à me signaler une erreur ou toute autre remarque bonne ou mauvaise.

Bonne journée.

Firebug a récemment sorti une version apportant quelques fonctionnalités intéressantes.
Voici un complément de la « release note » dans la langue de Molière…

Attachement de l’interface

Il est maintenant possible d’attacher Firebug à une zone de Firefox (haut, bas, droite gauche…).

Réponses JSON dans le presse-papier

C’est du détail mais c’est ce qu’on aime avec FireBug , il est désormais possible de copier une réponse au format JSON dans le presse papier : pratique !!

A noter qu’il est possible de mettre en presse papier n’importe quel noeud et ses descendants

Message d’erreur JS détaillé

Une information vous est fournie pour la localisation exacte d’une erreur JavaScript.

Nouvelle colonne protocol dans le panneau NET

Effacement rapide d’un élément inspecté

Dans l’inspection HTML, vous pouvez avec la touche DEL supprimer un élément après l’avoir pointé.

Fonctions anonyme visibles dans la pile d’appels

Fixer la propriété displayName à une fonction anonyme vous permettra voir cette fonction dans la pile d’appel, ce qui n’était pas possible avant.

Origine exacte des logs dans la console

Là encore un détail qui a son importance, tout ce qui est mis en log dans la console a maintenant une origine clairement identifiée (le nom du fichier).

Rejouer une requête HTTP

Génial…

Info bulle pour les points d’arrêts conditionnels

Une info bulle sur un point d’arrêt vous rappelle quelle condition a été définie pour l’arrêt de l’exécution

En-têtes HTTP du cache du navigateur

Une nouvelle partie en bas de l’onglet en-têtes des ressource du NET panel permet de voir également les en-têtes HTTP retournées par le cache du navigateur

Infobulle pour la valeur d’un élément Array

Très pratique là encore…

Et voilà…

Ce matin, comme certains d’entre vous, j’ai constaté le passage en version 1.6 de Firebug.

Je vous propose un petit éclairage sur les nouveautés de cette version à partir de la release note que vous trouverez ici : http://getfirebug.com/wiki/index.php/Firebug_Release_Notes#Firebug_1.6

Pour mémoire, retrouvez l’article que j’ai rédigé sur Firebug ici : http://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/

• Console et ligne de commande.
  • Il est maintenant possible d’accéder à la console à partir de n’importe quel panneau il faut cliquer sur le bouton suivant :
    
    
    

  • Grâce à l’instruction console.table() vous pourrez afficher des données dans la console sous la forme d’un tableau triable… assez bluffant je dois dire. Pour en savoir plus ; http://www.softwareishard.com/blog/firebug/tabular-logs-in-firebug/
  • Support des filtres de messages : permet de n’afficher que certains messages dans la console (console.log(), warning(), debug() ou error())
  • L’auto-complétion a été considérablement améliorée en particulier une liste des des différentes possibilités apparaît au cours de la saisie.
  • Le copier, coller et couper de texte sont pris en compte lors de la journalisation des événements. Pour être plus précis, si l’on journalise les événements d’une zone qui comprend un input text par exemple, le fait de couper, copier ou coller du texte sera bien notifié dans la console.
  • Les couleurs de fond des messages de log (console.log(‘…’)) sont plus « cohérentes » : error en rouge , warning en jaune et info en bleu

• HTML
  • Lors de l’inspection, la possibilité de tout déplier par menu contextuel ou en tapant * (à partir de l’élément sélectionné)
  • Amélioration du support des Frames
  • Affichage du DOCTYPE
  • On peut maintenant faire défiler le fil d’arianne lorsqu’il sort de la zone d’affichage

• CSS
  • Amélioration de la mise en surbrillance lorsque l’on recherche un élément
  • Possible de Copier/coller les déclarations CSS en différenciant les règles et le style par exemple :
    • RULES : .ext-forced-border-box, .ext-forced-border-box * { -moz-box-sizing: border-box; }
    • STYLE : height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; z-index: 100;
  • Regroupement des règles de style calculé par thématique
    
    
    

• SCRIPT
  • Vous pouvez ajouter un mot clé « debugger; » dans le code source pour que Firebug s’arrête dessus au prochain chargement de la page. Il est alors possible de continuer ou de transformer ce mot clé en point d’arrêt.
  • Le panneau pile d’appels a été amélioré, dorénavant sont affichés noms et contenus des arguments et l’on peut plier/déplier la méthode ou la fonction.
    
    
    
  • La gestion des espions (watch panel) a été améliorée
    
    
    
  • Les points d’arrêts sont sauvegardés et restaurés avec la session de Firefox
  • La liste des fichiers JS permet le filtrage, le filtrage s’applique quand on tape du texte et que la liste des fichiers est dépliée

• DOM
  • Affiche les propriétés prototype, constructor et __proto__ des objets
  • Mise en surbrillance des recherches améliorée

• NET
  • Affichage plus intelligent de SVG
  • Mise en surbrillance des recherches améliorée

• Menus et barres d’outils
  • Des flèches permettent de revenir au panneau précédent / suivant
  • Une zone de défilement permet d’accéder aux onglets cachés quand la fenêtre est trop petite

Voilà… encore du lourd et ça ne va pas s’arrêter…

N’hésitez pas à réagir à ce billet.

Eric Pommereau

Je vous propose une retranscription personnalisée de la « release note » de cette version majeure de Firebug. Le document original est accessible à cette adresse : http://getfirebug.com/wiki/index.php/Firebug_Release_Notes#Overview_of_Firebug_1.5. J’ai volontairement omis certains éléments soit en raison d’un faible intérêt soit que je n’ai pas été en mesure de comprendre leur sens.

L’objectif de ce billet est, au delà de la traduction, d’expliciter certaines fonctionnalités dont le principe de fonctionnement ou l’intérêt ne tombent pas sous le sens.

• Firebug supporte désormais les navigateurs Firefox 3.5 et 3.6.

• Inspection de code
  • L’inspecteur HTML plus solide que jamais
  • Ajout d’une boîte d’information rapide (quick info box). On peut faire apparaître cet info bulle en sélectionnant « Afficher la boîte d’infos » dans le menu de l’onglet HTML.
    
    

  • Ajout d’un inspecteur d’images map (images découpées en coordonnées).

• Console
  • Ajout du bouton « persistant », qui permet le réaffichage du contenu de la console après le rechargement de la même page.
    
    

• HTML
  • Dans la partie de droite du panneau HTML, ajout d’un onglet « calculé » (qui correspond aux feuilles de styles calculées), il s’agissait d’une option de la zone CSS dans la précédente version de Firebug.
    
    

  • Ajout de la propriété z-index dans la zone « apparence ».
  • Inspection et modification de SVG et MathML pris en charge.

• CSS
  • Amélioration de la prise en compte des règles de style « dupliquées ».
  • Prise en compte des styles abrégés. Pour en savoir plus sur les styles dupliqués : http://www.dustindiaz.com/css-shorthand/.
  • Autorise le changement d’état des pseudo-classes :hover et :active dans le panneau style (menu sur l’onglet).
    
    

• Script
  • Possibilité d’activer « point d’arrêt la prochaine fois ». Il s’agit simplement de s’arrêter à la prochaine instruction javascript rencontrée. Le bouton qui permet l’activation de ce mode est le bouton de pause (à droite du bouton d’inspection) lorsque l’on se trouve dans l’onglet Script. Pour plus de détail sur cette fonctionnalité regardez ce tutoriel : http://www.softwareishard.com/blog/firebug/firebug-15-break-on-next/.
    
    

  • Sur point d’arrêt : gel de JavaScript et des gestionnaires d’événements.
  • Nouveaux types de point d’arrêt : je n’ai pas trouvé ce que cela signifie !!

• DOM
  • Arrêt sur la modification d’un élément du DOM, concerne les changements d’attribut, la création et la suppression d’enfants et d’éléments.

• Net
  • Arrêt sur XHR. Même fonctionnalité que celle que l’on a vue pour le JavaScript mais pour les requêtes XMLHttp, c’est là encore le bouton pause qui active ce mode.
  • Davantage de précision dans le calcul des temps affichés dans l’observateur d’activité réseau.
  • Bouton Persist : permet de garder l’historique des ressources chargées.
  • Points d’arrêts sur les requêtes XMLHttp. Permet de mettre un point d’arrêt sur une requête XHR en particulier. Cela se fait en sélectionnant une requête, clic droit et sélection de l’élément « arrêt lors des XHR ».
    
    com

  • Personnalisation des en-têtes de colonne de la zone Réseau. Il est désormais possible de sélectionner les colonnes dont on souhaite disposer.
    
    

  • Explorateur de résultat au format XML, offre une présentation et une colorisation digne de ce nom pour les résultats au format XML.
    
    

  • Info bules détaillés pour l’envoi et la réception de données
  • Une nouvelle option permet la désactivation du cache de firefox

• Menus et barres d’outils
  • Interface et fonctionnalités de recherche.
  • Support de a11y (accessibilité) dans les panneaux CSS, DOM et Script. La définition de a11y : http://en.wikipedia.org/wiki/Computer_accessibility.

Voilà pour l’essentiel, n’oubliez pas que ce billet n’a rien d’exhaustif, n’hésitez pas à consulter le document d’origine dont j’ai fait référence. Bien entendu, je suis preneur de toute remarque.

Eric Pommereau

La version 1.4.5 de Firebug est disponible depuis le début du mois.

Très actif, le projet Firebug est constamment corrigé, amélioré et mis à jour.

Auteur de l’article Maîtriser Firebug, l’indispensable extension Firefox pour le développement web sorti le 2 juin 2009, j’avais alors basé ce tutoriel sur la version 1.3 de Firebug.

Quelques petites choses ont changé depuis. Voici une synthèse de ces changements qui me semblent importants :

• Le changement le plus visible porte sur l’activation et la désactivation de Firebug :
  • Comme avant, Firebug est « éteint » par défaut.
  • Lorsque l’on souhaite activer Firebug il faut ouvrir la fenêtre et, le cas échéant, rejouer (rafraîchir) la page pour que les onglets Console, Script et Réseau affichent l’ensemble de leurs informations respectives.
  • Un bouton « Off » permet de fermer et d’éteindre Firebug.
  • Le bouton « Réduire » ferme le panneau mais Firebug reste « en veille ».
  • La page pour laquelle Firebug est activée est mémorisée, Firebug se remet en fonction lorsque la même page est ouverte.
  • Les onglets Console, Script et Réseau restent activables / désactivables individuellement, ces paramètres sont également mémorisés pour les futures visites.
  • La fonctionnalité « activé pour le domaine » a été supprimée (pour des problèmes de performance je suppose).
• La possibilité de rechercher sur plusieurs fichiers. Par exemple, dans l’onglet javascript, la recherche portera sur l’ensemble des fichiers de cet onglet.
• Un onglet Json a fait son apparition dans le cas de données JSON dans une requête XHR (AJAX). Les données JSON sont présentées sous la forme d’un arbre. Il est nécessaire de passer l’en-tête HTTP application/json pour que cela soit possible.

  
  

• Accessibilité améliorée pour la navigation dans Firebug.
• Firebug supporte maintenant Firefox 3.6
• Enfin, il faut signaler la correction de plus de 150 bugs

Voilà pour les modifications qui m’ont paru les plus importantes, n’hésitez pas à réagir si j’ai oublié des choses ou si j’ai dit des bétises

Les liens utiles sur le sujet :

• Changelog sur softpédia : http://linux.softpedia.com/progChangelog/FireBug-Changelog-21308.html
• Realeases notes de la 1.4 : http://code.google.com/p/fbug/source/browse/branches/firebug1.4/docs/ReleaseNotes_1.4.txt
• Billet de blog sur la modification de la politique d’activation : http://blog.getfirebug.com/2009/03/25/firebug-14-auto-suspend-and-simplified-activation/

Eric Pommereau