Outils De Développement, Firebug, webdeveloper, etc...

Dans un autre sujet, il a été fait le commentaire suivant:

J'ai donc cru bon de démarrer un sujet concernant les différents outils pour firefox qui vous aideront dans votre développement.
Utilisant personnellement FireBug, j'en ferais donc son éloge en le comparant à webdeveloper, que j'avoue connaitre bien moins.

Ce n'est pas un appel au Troll, votre participation est la bienvenu (comme toujours) à condition de demeurer constructif et de laisser vos préférences personelles subjectives de coté.


Sans doute moins intuitif, firebug m'est extrèment utile car il me permet:
- De débugger des requêtes AJAX
- D'entourer un élément (comme mentionné dans ce sujet), mais de voir directement le code qui s'y rattache dans la source
- De modifier dynamiquement des éléments de style sur des éléments et de voir les résultats
- De calculer le temps de chargement de plusieurs objets ( voir ce qui est lourd dans une page )
- Effectuer des débuggage Javascript ( break points, afficher la valeur d'une expression )

Autre petit bémol: Comme firebug va jouer en profondeur dans ses analyses, il est bon de ne pas l'activer en tout temps (par exemple dans GMail), ou vous pourriez soudainement éprouver des problèmes qui s'apparenteront à des fuites de mémoires (Firebug qui log tout, après 3-4 jours, mon Firefox pèse 300mo en RAM) Pensez donc à le désactiver lorsque vous ne vous en servez pas.


Bref, il est vrai que Webdevelopper fait certains trucs que FireBug ne fait pas, rapidement:
- désactiver des trucs comme le CSS, Javascript
- etc... (dsl la mémoire viens de me flancher...)


Donc personellement j'en ai tiré les conclusions suivantes:
- Firebug est bon pour développer et débugger en profondeur.
- Webdeveloper est bon pour tester un site au cas ou ils n'aurais pas tel ou tel truc de supporté ou d'activé dans le navigateur qui le visitera.

La barre d'outils webdeveloppeur en gros :
- Désactiver : java, javascript, balise de redirection, le bloqueur de popup etc...
- Cookies : désactiver, ajouter, supprimer etc...
- CSS : désactiver, voir, éditer en temps reel etc...
- Form : afficher mdp, voir information détaillées sur les éléments, prérenseigner des champs, enlever des contraintes, inverser post/get etc...
- Images : Afficher des tonnes d'info sur tout, desactivation des images etc...
- Information : Trop de chose, tu peux afficher tous les éléments de ta page (titre, acceskey, ancre, ordre des div, profondeur...)
- Divers : Effacer les traces (histo, cache etc...), edition du html temps reele, plein d'autre truc...
- Entourer : le top, entourer les table, les blocs, les frames, l'element survolé avec chemin exacte de pointage.
- Redimensionner : redim la fenetre dans la résolution que l'on veut.
- Outils : Toutes les validations W3C de son choix en un clic, valisation du code local également.

Bred, pour moi encore une fois, indispensable. Bien que c'est vrai que je me sert à 80% de l'entourage des éléments avec chemin class/id, de l'entourage des éléments bloc et de l'édition et visu de formulaire. Le reste n'est utile que ponctuelement.
Maintenant c'est vrai que pour le suivi de l'ajax, il faudra autre chose. C'est pas fait pour.

Ce sont deux outils extrèmement complémentaires, et je ne m'imagine pas travailler avec l'un sans l'autre. Le troisième outil que je citerais, pour rester dans le domaine des extensions firefox, c'est Live HTTP Headers qui permet de surveiller les requêtes HTTP complètes (quand on a un doute sur un formulaire ou sur une requête AJAX, c'est diablement efficace).

Un autre outil sympatique (à condition d'activer le mode "Toujours envoyer la page" ) est Total Validator, qui permet de valider les pages aux normes W3C.

Dans mon cas, c'est un peu la seule solution "simple à mettre en place" qui semble fonctionner sous linux (firefox) et être en mesure de valider des pages derrière un système d'authentification.

Voilà, j'espère que ca aidera 2-3 personnes,

Pour la validation, j'ai plutôt choisi HTML Validator... qui valide le code html en cache (en gros c'est ça) dans Firefox, et il permet d'être un peu plus strict sur certains point. J'ai trouvé pour ma part TotalValidator un peu too much pour faire ça, surtout que le valideur est une site tiers... Et j'aime pas. En plus je crois que TotalValidator ne va pas aussi loin que HTML Validator... mais c'est de mémoire...
Pour ce qui est de WebDevelopper, elle sert beaucoup à tester la solidité d'un site.
Exemple : un utilisateur peut changer comme il le souhaite les valeurs d'une liste déroulante, et les envoyer au serveur... Ainsi, on voir si le site est "sécurisé" un minimum ou pas... Règle fondamentale : ne jamais faire confiance dans les données qu'on reçoit, même les plus fiable. Avant de les traiter, il faut les vérifier (si j'attends un nombre, il faut que ce soit numérique, si j'attends A ou B, alors je teste si c'est bien A ou .
Et enfin, Firebug est L'Extension à avoir :
- pour débugger du javascript pas à pas, espion des variables, etc...
- pour débugger les programmes d'apparence d'une page (changer le style d'un élément pointé à la souris par ex)
- voir quelle page prend du temps à charger
Ca fait peu, mais ça fait beaucoup quand on veut faire qqch qui fonctionne.