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 :
- https://addons.mozilla.org/fr/firefox/
- http://getfirebug.com/
- http://getfirebug.com/wiki/index.php/Firebug_Extensions
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.