Discussion :

[eric.pommereau]

Bonjour,

Je vous invite à découvrir le nouvel article : Maîtriser Firebug, l'indispensable extension Firefox pour le développement web.
Vous y trouverez une présentation des principales fonctionnalités et des explications sur la manière d'utiliser Firebug. J'espère que vous y trouverez votre bonheur.

N'hésitez surtout pas à remonter dans ce fil de discussion vos commentaires, impressions, remarques...

@+

[Bovino]

Excellent article !
Merci pour cette contribution qui servira sans doute de référence dans le domaine !

[franculo_caoulene]

Très bon article, j'ai découvert le point d'arrêt conditionnel et redécouvert le profiler.

Il manque juste quelques détails sur la partie réseau :
gris foncé = chargement ne provenant pas du cache
gris clair = chargement provenant du cache
marron? = file d'attente des éléments à charger
ligne bleue = symbolise l'évènement propre au moteur Gecko DOMContentLoaded qui est lancé lorsque le document a fini de se charger, sans prendre en compte le chargement des images
ligne rouge = chargement de tous les élément du document

[nicorama]

Bonjour,
J'avais également fait une vidéo de démonstration, que l'on peut mettre en lien dans l'article :
http://www.dailymotion.com/robusta-w...0_firebug_tech

Cependant, de mémoire, je ne crois pas que je parlais du debugger javascript.

[eric.pommereau]

Très bon article, j'ai découvert le point d'arrêt conditionnel et redécouvert le profiler.

Il manque juste quelques détails sur la partie réseau :
gris foncé = chargement ne provenant pas du cache
gris clair = chargement provenant du cache
marron? = file d'attente des éléments à charger
ligne bleue = symbolise l'évènement propre au moteur Gecko DOMContentLoaded qui est lancé lorsque le document a fini de se charger, sans prendre en compte le chargement des images
ligne rouge = chargement de tous les élément du document

Bonjour,

Je tiens compte de ta remarque pour la prochaine modif.

@+

[franculo_caoulene]

Petite précision encore, des temps sont affichés dans l'infobulle:
gris = temps de chargement
marron? = temps passé dans la file d'attente
ligne bleue = délai entre le début du chargement ou de la mise en file d'attente de l'élément et le chargement de la structure du document.
ligne rouge = idem mais par rapport au chargement complet du document (éléments compris).

Les délais peuvent être négatifs ou positifs :
+ : le chargement de l'élément intervient avant celui du document.
- : le chargement de l'élément intervient après celui du document.

Le délai indiqué à coté de la ligne rouge sera donc toujours positif.
Le temps total de chargement d'un élément = temps de mise en file d'attente + temps de chargement.

[eric.pommereau]

Petite mise à jour comprenant quelques corrections orthographiques et un ajout (nature des évènements lors du téléchargement d'une ressource : http://eric-pommereau.developpez.com...irebug/#LV-A-2).

Je souhaite aussi vous informer régulièrement des évolutions de firebug (à ce jour version 1.4.2) sur le blog (developpez.com) que je viens d'ouvrir, billet à venir prochainement sur le sujet.

Comme je l'ai déjà dit, n'hésitez pas à me faire part de vos remarques sur ce fil de discussion.

@+

Eric

[eric.pommereau]

Ah oui et j'ai oublié de mettre le lien de nicorama, une vidéo sur l'utilisation de Firebug... c'est chose faite.

[nicorama]

Ah oui et j'ai oublié de mettre le lien de nicorama, une vidéo sur l'utilisation de Firebug... c'est chose faite.

Thanx

[eric.pommereau]

Bonjour à tous,

Suite à la sortie de la version 1.4.5 de Firebug (début novembre), voici une petite synthése des évolutions ... http://blog.developpez.com/eric-pommereau/p8391/web/firebug/firebug-sortie-de-la-version/

@+

[nickg]

Bonjour
je viens de découvrir firebug trés pratique mais je rencontre un problème dans l'identification du code est ce normal ?
J'ai inspecté un élément et je l'ai édité .Ma modification fonctionne bien dans le navigateur
Sauf que j'ai aucune information pour savoir quel fichier je dois modifier sur la serveur



j'ai ajouté un padding-left , mais firebug ne me dis pas ou la modification doit être fait sur le serveur
Merci pour l'aide

[Bovino]

Et par quel moyen penses-tu que Firebug peut déterminer de quel fichier du serveur provient la portion de code en question ???

[nickg]

par exemple, pour les styles, il affiche bien dans quel fichier css ils se trouvent .A partir de cela je modifie le css adéquate sur le serveur

[eric.pommereau]

Tout dépend de la manière dont tes fichiers sont organisés côté serveur... avec Firebug on se trouve du côté du navigateur, côté client.

Il faut juste identifier la partie qui écrit le code CSS (dans le cas d'une page html qui embarque des CSS ce qui est le cas dans ton exemple).

@+

[nickg]

effectivement le probléme est bien là firebug identifie la ligne à modifier
mais me donne aucune infos

[beekeep]

à noter cette liste d'extensions pour Firebug :
http://speckyboy.com/2010/03/03/exte...15-extensions/

notamment pour JQuery ou Drupal.

[12monkeys]

Bonsoir

Tu parles ici du style 'element.style' ?

Si oui 'element.style' représente le style en ligne, celui se trouvant dans la balise via l'attribut style. Donc logiquement c'est le style qui se trouve dans ton fichier HTML, et comme tu affiches ce fichier HTML tu dois alors savoir quel fichier modifier...

[nickg]

Bonjour,
et bien non, je connais pas le fichier exactement dans la mesure ou j'appelle une page index.php qui fait appel a d'autres codes.
Après recherches, la pages index fait appel a un fichier .js pour faire fonctionner le diaporama et ce .js contient des éléments de style et c'est dans ce fichier que j'ai modifié le style et ca marche nikel
Firebug dans l'onglet "script" m'indique bien tous les fichiers .js mais me dit pas lequel intervient dans ma page pour le diaporama
Merci pour pour aide

[jouneyd]

Merci pour ce tutoriel très bien écrit.
Il y a tellement de chose à dire sur Firebug.

Tutoriel à la fois synthétique et riche, très bel exercice.

Bravo.

[eric.pommereau]

Merci ! :-)