Timituto,le site de tutoriaux de A à Z

• Accueil
• Tutoriels
• Téléchargement
• Livre d'or
• Chat (2)
• Se connecter

Débugguer efficacement avec Firebug

Bonjour les n00bs!

Nous allons voir dans ce tutoriel comment débugguer une page web avec le plugin Firebug (pour firefox). En effet, qui n'a jamais eu d'afficages bizarres sur sa page web?
Et bien ce tutoriel va vous apprendre à utiliser cette grosse bête capricieuse appelée Firebug pour débugger vos sites web, et même le javascript!

Ce tutoriel n'est pas valable uniquement pour firefox, il peut l'être aussi pour d'autre navigateurs comme Google Chrome, Opera ou encore Internet Exporer 8 (et oui!). J'indiquerai en conclusion comment activer l'équivalent de firebug sur les autres navigateurs (leur fonctionnement est similaire à celui de firebug).

---

I-Téléchargement et installation de Firebug

Nous allons voir ici comment télécharger et installer ce merveilleux outil qu'est Firebug . Tout d'abord rendez-vous sur le site de Mozilla, ici afin de récupérer notre cher Firebug. Lorsque vous voudrez l'installer, une fenêtre de confirmation apparaîtra, et cliquez sur le bouton "Installer" (il faudra normalement attendre un petit peu).

Pour que Firebug soit actif, il faut redémarrer firefox après l'installation, donc pensez bien à sauvegarder votre travail.

Après un redémarrage de Firefox, nous voici donc devant un firebug fonctionnel.

II-Présentation de l'interface de Firebug

Nous allons donc voir ici l'interface de Firebug.
Alors,attention... : La voici! (je la mets en lien,car elle prend trop de place et on ne peut pas la redimensionner...)
Cliquez sur l'image

Si vous n'avez pas quelque chose ressemblant à ceci, il vous suffit de cliquer sur le petit cafard en bas à droite (j'aime pas les cafards sauf celui-là )

Cette interface peut faire peur au premier abord, mais rassurez-vous, c'est pas si compliqué

L'interface est donc découpée en plusieurs onglets:
- On a donc l'onglet "Console", qui va contenir toutes les erreurs javascript que l'on peut faire
- L'onglet "HTML", lui, sert à modifier directement le code HTML de la page !
- L'onglet "CSS", sert par contre à modifier... bah le CSS
- Enfin le dernier onglet qui va nous intéresser pour nous est l'onglet "Javascript" puisqu'il va nous permettre de voir ce qu'il se passe dans le code javascript, de l'arrêter à certains endroits,voire le modifier!

J'expliquerai bien sûr en détail le fonctionnement de tous ces onglets

---

Ce tutoriel est encore loin d'être fini. Je vous laisse donc suivre son avancement

bas de la page

Pour le bon fonctionnement du site, il est conseillé d'utiliser Mozilla Firefox.

© 2009

Haut de la Page