février
2013
Un article de eric.pommereau
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.
<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.
4 Commentaires + Ajouter un commentaire
Commentaires récents
- dans Firebug 1.11
- dans Firebug 1.11
- dans Firebug 1.11
- dans Firebug 1.11
Bonjour,
Je ne suis pas un spécialiste de l’inspecteur d’élément de chrome. Mais en tant qu’utilisateur régulier je le trouve très complet et performant. J’ai du mal à lui trouver des lacunes en comparaison à Firebug.
Firebug bénéficie d’une meilleure « couverture marketing », la gestion du projet et la valorisation des évolutions est bien plus claire du côté de Firebug.
L’outils de chrome (il n’a même pas de nom !!) mériterait d’être davantage mis en avant il me semble…
Cordialement.
Bonjour,
Réponse un peu tardive, mais je me permets de réagir :).
Firebug ne bénéficie d’***aucune*** couverture marketing (c’est un logiciel libre distribué sans but lucratif).
Firebug est aujourd’hui maintenu par un développeur principal à temps plein, employé par la fondation Mozilla, et par une poignée de développeurs bénévoles (moins d’une dizaine, et dont je fais partie). Nous sommes d’ailleurs à la recherche d’autres bénévoles!
Les Devtools de Chrome bénéficient en revanche de beaucoup plus de ressources à plein temps (et d’une couverture marketing à travers Chrome!).
Nous travaillons de manière intensive pour améliorer Firebug, satisfaire ses utilisateurs, et apporter les fonctionnalités qu’ils attendent.
Cordialement,
Bonjour Florent,
Si j’ai mis des guillemets autour de « couverture marketing » c’est justement pour nuancer l’expression…
Le sens de mon propos était d’expliquer que Firebug faisait l’objet d’une meilleure « publicité » auprès des développeurs en comparaison de chrome, toute l’activité du projet sur https://getfirebug.com/. Ce qui me permet facilement d’accéder à toutes les nouveautés et d’en faire parfois un billet…
Le fait de bien « vendre » un produit fût-il gratuit est essentiel à mon avis (c’est ce que fait la fondation mozilla, canonical…) pour exister face aux mastodontes tel que google.
Je me félicite donc que cela soit le cas pour Firebug.
J’espère avoir clarifié mon propos…
Bonne soirée.
Merci pour ce résumé des améliorations Firebug. Par rapport à l’inspecteur d’élément de chrome que vaut encore Firebug ?
Yves de http://www.pg1.fr