FireBug

Extension FireBug Pour FireFox

Introduction

FireBug est un module complémentaire qui s'ajoute à Mozilla FireFox, et qui s'avère très utile en développement de site web. Ce module, une fois installé et lancé (touche F12 ou menu "bug" en haut à droite), permet d'inspecter une page web. Dans le cas du développement d'un site internet, il peut s'avérer très utile pour comprendre d'où viennent certains problèmes d'alignements, d'affichage ou encore de javascript. Cela permet d'analyser les requêtes et réponses et bien plus encore.

De plus, cet outil permet aussi d'analyser un site quelconque, si on est curieux de savoir comment c'est fait :).

Certains diront qu'on peut voir les autres sites web avec un bouton click->View Source. Ok c'est vrai mais avec FireBug on peut se concentrer uniquement sur certaines parties et inspecter par exemple uniquement une barre de titre, une image etc. De plus, dans FireBug on peut directement éditer le html et les css et voir le rendu en direct ce qui est très pratique. Ainsi quand on a trouvé le bon alignement par exemple, il suffit de le copier dans la feuille de style.

FireBug est utilisé par FireFox mais peut aussi être intégré à IE grâce à un bookmark, mais ici nous n’aborderons que la version pour FireFox.

Voici quelques possibilités de FireBug Inspecter et éditer les pages HTML

Firebug permet de trouver n’importe quel élement d’une page html. Une fois l’élèment trouvé on peut changer son contenu en direct.

Débugger du JavaScript en direct

Firebug dispose d’un débuggeur javascript très puissant qui permet de mettre des points d’arrêt et s’arrêter n’importe quand dans n’importe quel script utilisé dans la page afin de vérifier l’état des codes et les erreurs éventuelles.

Console d’erreurs

Lorsque la page contient des erreurs javascript, CSS ou xml, Firebug la détecte et la décrit explicitement afin de permettre au développeur de la corriger le plus rapidement possible.

Ligne de commande Javascript

FireBug dispose d’un outil ligne de commande qui permet d’executer du javascript en direct et ainsi valider le script avant de l’inclure dans un fichier js.

Onglet Script de FireBug

Utilisez l'onglet script pour débugger votre code javascript au lieu de passer par des variables de débuggage ou encore par des alert comme à l'époque.

1.Placez vous dans l’onglet Script

2. à l’aide de la liste déroulante regardez quels sont les fichiers js utilisés dans la page inspectée. Sélectionnez un fichier que vous souhaitez débugger, ici page-13040.html

3. Placez un point d’arrêt à la ligne souhaitée

4. découvrez le contenu des variables à l’aide de l’onglet espion sur la droite. Ici la variable el1 n’as pas encore de valeur. Si vous souhaitez voir le contenu d’autres variables faites un click droit dessus dans le script et cliquez sur Ajouter un espion. La variable sera ajoutée dans la liste de droite

5. Avancez pas-à-pas dans le script jusqu’à obtention du résultat voulu.