begin process at 2010 03 22 06:03:16
  Trouver un code source :
 
dans
 
Accueil > 

Tutoriels

 > 

Tutoriaux

 > DÉBOGUEUR AVEC FIREBUG

DÉBOGUEUR AVEC FIREBUG


 Information sur le tutoriel

Note :
Aucune note

 Description

Ce tutorial présente l'outil de débogage qu'est Firebug. Il montre les principales fonctionnalités qui sont très utile pour débogueur le Javascript, CSS, AJAX et HTML.

Tutorial

Déboguer Avec Firebug


Qu’est-ce que Firebug ?


Firebug est un extension de Firefox qui permet de déboguer le javascript, le css, la structure HTML et les requêtes AJAX d’une page.


Comment l’installer ?


Télécharger l’extension à l’adresse suivante : https://addons.mozilla.org/fr/firefox/addon/1843


Présentation du débogueur


L’ouvrir


Pour ceux qui sont comme moi et qui ont un tas d’extension, voici où se trouve le bouton pour ouvrir le débogueur.




La console



Javascript


1 – Ligne où il y a l’erreur.

2 – Fichier et numéro de ligne où il y a l’erreur.

3 – Détail de l’erreur.

4 – Stack Trace (Chemin qu’il y a eu avant de se rendre jusqu’à l’erreur).


AJAX

5 – Nom du fichier dans la requête.

6 – Fichier javascript qui a fait la requête.

7 – Réponse reçue.

8 – Paramètre POST envoyé.


Console


9 – Quand la fenêtre de Firebug est fermé ce message nous identique qu’il y a eu une erreur.

10 – Console javascript standard. Il suffit de taper le code que l’on veut faire exécuter et de cliquer sur « Run ».


Comment changer l’affichage de la console


En bas à droite, il y a une flèche qui est soit vers le haut, soit vers le bas. Cette flèche permet de changer la disposition de la console.


Explorateur HTML



Explorateur DOM


1 – Indique où dans le DOM l’élément sélectionné se trouve.


CSS


2 – Indique le code CSS qui affecte l’élément.

3 – Quand un attribut est rayé, cela signifie qu’il n’a plus d’effet.

4 – Indique de quel fichier css le code provient.

5 – Indique (si tel est le cas) les attributs qui sont hérités et de où ils sont hérités.


Comment modifier une propriété d’une balise HTML rapidement


Double-cliquer sur le nom de l’attribut ou sur sa valeur pour modifier soi le nom de l’attribut ou sa valeur


Comment enlever un attribut CSS


Quand vous passer la souris au-dessus du nom de l’attribut CSS, vous voyez un cercle avec une barre qui apparaît à côté de celle-ci. Cliquer dessus et l’attribut n’aura plus d’effet sur la page.


Comment se rendre rapidement jusqu’à un élément dans la page


En haut à gauche, il y a le bouton « Inspect ». Cliquez dessus et promenez votre curseur dans la page jusqu’à ce que vous soyez sur votre élément.


Les onglets Layout et DOM


L’onglet layout permet de voir les différentes marges, bordures, etc. Il permet aussi des les modifier.


L’onglet DOM permet de voir tout les attributs DOM que cet objet a.


Explorateur des fichiers CSS


L’explorateur des fichiers CSS permet d’explorer tous les fichiers CSS utiliser par la page. On peut comme dans l’explorateur HTML temporairement enlever des attributs CSS.


Débogueur Javascript



Javascript


1 – Les points rouges représentent les points d’arrêt dans le code

2 – Un point rouge avec une flèche représente la ligne où les débogueur est rendu.

3 – Cette fenêtre permet de voir les variables utilisés par la fonction et permet de facilement suivre leur changement.

4 – Les boutons servent à Continuer, Avancer pas à pas, Avancer vers l’avant, Retourner en arrière

5 – Montre les fonctions qui ont été appelé avant de se rendre jusque là.


Comment rajouter des points d’arrêt


Il suffit de cliquer sur le numéro de la ligne de code et un point rouge apparaît.


Comment voir tous les points d’arrêt dans le code


Il suffit d’aller dans l’onglet « Breakpoints » qui est tout juste à côté du numéro 3.


Explorateur des propriétés DOM


La seule chose qui est intéressante à mentionner pour cette section est que l’on peut modifier les propriétés en double-cliquant sur la valeur.


Chargement des fichiers


Dans le dernier onglet (Net), on peut voir la liste des fichiers chargés ainsi que le temps nécessaire pour les télécharger.


On peut utiliser les filtres pour ne voir que les fichiers HTML, CSS, JS, Images , XHR ou Flash.


Liens


FAQ de Firebug (anglais) : http://getfirebug.com/faq.html

Site officiel (anglais) : http://www.getfirebug.com/

 Historique

05 novembre 2007 17:23:53 :
Je dois mettre un détail de modification quand je n'ai même pas encore soumis le tutorial.
05 novembre 2007 17:30:58 :
Image trop grande.

Commentaires

Commentaire de Arto_8000 le 07/01/2008 01:48:27

À noter qu'il existe une extension à Firebug qui s'appele YSlow qui permet de vérifier si une page est optimisé pour être chargé le plus rapidement. C'est très bien fait.

Lien :
http://developer.yahoo.com/yslow/

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,094 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales