Firebug et ses extensions | Le blog Sodifrance

L'un des outils privilégiés lors du développement de pages web est Firebug (utilisable sur Firefox uniquement). Pour ceux qui ne le connaissent pas ou peu, il s'agit d'un outil qui de base lui permet de debugger, éditer de l'HTML, CSS et du Javascript dans une page. Un des grands avantages de Firebug est sa capacité de lui ajouter différentes extensions pour de nouvelles fonctionnalités. Voici les extensions que j'ai pu trouver en surfant un peu partout et mon avis personnel mais j'encourage chacun à compléter la liste et à donner son avis.

Javascript

Firebug Code Coverage

Cette extension permet de déterminer les fonctions Javascript appelées ou non dans une page.

: Firebug Code Coverage

FireQuery

Cette extension permet de développer plus aisément des pages contenants du JQuery.

: FireQuery

FireUnit

Cette extension permet d'effectuer des tests unitaires Javascript

: FireUnit

Inline Code Finder for Firebug

Cette extension permet de "surligner" les éléments suivants :

les évènements Javascript inline
les styles inline
les liens Javascript

Il est recommandé pour bien séparer le contenu du style et des interactions (surtout dans le cas de l'unobtrusive Javascript)

: Inline Code Finder for Firebug

CSS

CSS Usage

Cette extension permet de voir les règles CSS utilisées dans la page et celles qui ne le sont pas.

: CSS Usage

FireFile

Cette extension permet de sauvegarder les modifications de CSS réalisées dans Firebug.

: FireFile

FireFontFamily

Cette extension permet de surligner les "font-family" qui sont utilisés dans le rendu de la page dans le panneau

: FireFontFamily

FirePalette

Cette extension fournit un color picker dans le panneau CSS.

: FirePalette

Firepicker

Cette extension fournit un color picker dans l'éditeur inline de CSS.

: Firepicker

Firequark

Cette extension permet principalement d'extraire les sélecteurs CSS sur un élément de la page courante.

: Firequark

Performances

Hammerhead

Cette extension permet d'ajouter un panneau pour effectuer des mesures de chargement de temps de pages.

: Hammerhead

Jiffy

Cette extension ajoute un onglet à Firebug pour visualiser les mesures de temps fournies par Jiffy-Web.

: Jiffy

Page Speed

Cette extension est proposée par Google pour contrer l'extension de Yahoo ( YSlow ) et qui permet d'évaluer les performances d'affichage de la page. Elle fournit également des conseils pour améliorer celles-ci.

: Page Speed

SenSEO

Cette extension permet d'analyser une page et d'indiquer la manière de bien remplir celle-ci pour un bon référencement dans les moteurs de recherches.

: SenSEO

YSlow

Cette extension analyse les performances de la page et préconise des règles de développement pour améliorer celles-ci.

: YSlow

Aide graphique

Firediff

Cette extension permet de surligner les modifications qui ont eu lieu au sein du DOM et des CSS.

: Firediff

FireFocus

Cette extension permet de suivre l'élement qui a actuellement le focus.

: FireFocus

FireLinkReport

Cette extension permet de visualiser tous les liens présents dans une page (inclus les mailto, ftp, javascript)

: FireLinkReport

FireRainbow

Cette extension permet d'ajouter la coloration syntaxique au javascript. Très pratique pour s'y retrouver dans le code.

: FireRainbow

Pixel Perfect

Cette extension permet d'ajouter un calque image par dessus le HTML développé.

: Pixel Perfect

Autres langages

AMF Explorer

Cette extension permet de visualiser les messages AMF désérialisés dans l'onglet réseau.

: AMF Explorer

Chromebug

Cette extension est utilisée pour le débuggage des applications XUL pour Chrome. Personnellement je ne m'en suis jamais servi et à moins de faire un plugin pour Firefox ou Firebug, je ne pense pas m'en servir

: Chromebug

ColdFire

Cette extension permet d'ajouter les informations de débuggage sur les applications ColdFusion

: ColdFire

Drupal For Firebug

Cette extension permet d'ajouter des fonctionnalités propres à Drupal.

: Drupal For Firebug

FireAtlas

Cette extension permet de débugger des pages en ASP .NET AJAX

: FireAtlas

FirePHP

Cette extension permet d'utiliser la console de Firebug pour une application PHP.

: FirePHP

FirePython

Cette extension est une console de log pour Python

: FirePython

Firesymfony

Cette extension permet d'intégrer le débuggage d'application développé avec le framework PHP Symfony.

: Firesymfony

Flashbug

Cette extension permet d'afficher les sortie des fichiers flash (nécessite Flash Player Debugger)

: Flashbug

LiveCoder

Cette extension permet d'avoir un regard plus avancé sur les fonctionnalités de Firebug, permettant d'éditer des fonctions. Il est utile au développement de plug-in pour Firefox.

: LiveCoder

Divers

CodeBurner

Cette extension permet d'ajouter une fonction d'historique dans l'onglet réseau.

: CodeBurner

Firebug Paints Events

Cette extension permet d'ajouter des références sur les tags HTML et sur les CSS

: Firebug Paints Events

Firebug Net Panel History Overlay

Cette extension permet de connaître et d'afficher les zones de l'écran qui ont subi un "paint" ou un "reflow".

: Firebug Net Panel History Overlay

Firecookie

Cette extension permet des gérer les cookies présents dans le navigateur.

: Firecookie

Fireclipse

Cette extension permet de faire communiquer Firebug et Eclipse.

Firefinder

Cette extension permet de trouver simplement des éléments HTML présents dans la page grâce à des sélecteurs CSS ou des expressions XPath.

: Firefinder

FireSpider

Cette extension permet de trouver les liens brisés et d'optimiser la page courante pour les moteurs de recherches.

: FireSpider

FireXPath

Cette extension permet d'éditer inspecter et générer des expressions XPath dans la page. Très utile dans le cas de l'écriture de tests Selenium par exemple, ou pour de l'analyse de site.

: FireXPath

FormBug

Cette extension permet de développer de manière simplifier les formulaires.

: FormBug

Log to Net panel

Cette extension permet d'ajouter dans l'onglet réseau des logs depuis l'exécution du Javascript

: Log to Net panel

NetExport

Cette extension permet d'exporter les données de l'onglet réseau.

: NetExport

Omnibug

Cette extension permet d'obtenir des détails sur les requêtes effectuées.

: Omnibug

XRefresh

Cette extension permet de rafraîchir automatiquement la page lorsque les fichiers de ressources sont modifiées.

: XRefresh

Widerbug

Cette extension est une optimisation de Firebug pour les écrans widescreen.

: Widerbug

Cette liste est loin d'être exhaustive, de nouvelles extensions sortent jour après jour. Celles-ci peuvent se trouver sur le site des addons de firefox :

Pour les autres navigateurs, il existe une version allégée de Firebug mais sans la possibilité (à ma connaissance) de pouvoir rajouter tous ces plug-ins.