Firebug et ses extensions

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
Firebug Code Coverage

FireQuery

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

FireQuery
FireQuery

FireUnit

Cette extension permet d'effectuer des tests unitaires Javascript

FireUnit
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
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
CSS Usage

FireFile

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

FireFile
FireFile

FireFontFamily

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

FireFontFamily
FireFontFamily

FirePalette

Cette extension fournit un color picker dans le panneau CSS.

FirePalette
FirePalette

Firepicker

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

Firepicker
Firepicker

Firequark

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

Firequark
Firequark

Performances

Hammerhead

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

Hammerhead
Hammerhead

Jiffy

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

Jiffy
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
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
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
YSlow

Aide graphique

Firediff

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

Firediff
Firediff

FireFocus

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

FireFocus
FireFocus

FireLinkReport

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

FireLinkReport
FireLinkReport

FireRainbow

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

FireRainbow
FireRainbow

Pixel Perfect

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

Pixel Perfect
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
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
Chromebug

ColdFire

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

ColdFire
ColdFire

Drupal For Firebug

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

Drupal For Firebug
Drupal For Firebug

FireAtlas

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

FireAtlas
FireAtlas

FirePHP

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

FirePHP
FirePHP

FirePython

Cette extension est une console de log pour Python

FirePython
FirePython

Firesymfony

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

Firesymfony
Firesymfony

Flashbug

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

Flashbug
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
LiveCoder

Divers

CodeBurner

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

CodeBurner
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 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
Firebug Net Panel History Overlay

Firecookie

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

Firecookie
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
Firefinder

FireSpider

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

FireSpider
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
FireXPath

FormBug

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

FormBug
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
Log to Net panel

NetExport

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

NetExport
NetExport

Omnibug

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

Omnibug
Omnibug

XRefresh

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

XRefresh
XRefresh

Widerbug

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

Widerbug
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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.