Développement web grâce à Firefox
Développement et ergonomie
Par djib le dimanche 10 décembre 2006, 18:30 - Lien permanent
Alors que je viens de lire dans les Echos que Firefox avait conquis plus de 20% des français, je réalise pour ma part que j'en suis devenu complètement dépendant pour le développement d'application sur la toile. Pourquoi ? Pour les raisons suivantes :
Web Developer Extension
Cette extension permet d'ajouter un nombre impressionnant d'outils pour faciliter le développement d'un site. En quelques clics on peut :
- désactiver le cache du navigateur,
- désactiver le javascript,
- désactiver la feuille de style,
- valider le code source de la page[1],
- modifier la feuille de style (CSS) et la page (HTML) à la volée !!!,
- afficher la structure d'un formulaire,
- ne pas afficher les images, afficher leur dimension,
- afficher les classes ou identifiant de chaque élément,
- afficher des guides pour pouvoir placer facilement des éléments,
- encadrer les éléments survolés pas la souris,
- afficher les site dans les tailles personnalisées (800x600, etc.)...
Voilà, ce n'est qu'un petit aperçu de quelques fonctionnalités qui sont très bien agencées donc on ne croule pas non plus sous les menus à rallonge. Évidemment il est possible de personnaliser tout ça dans les options de l'extension... bref le bonheur.
Aardvak
Cette extension est moins essentielle mais néanmoins très pratique. Elle permet de voir les éléments (divs, tables, forms, ...) sur une page et de les supprimer à la volée. Elle est aussi pratique pour naviguer dans la structure du document (cet élément est inclus dans tel autre, etc.)
Elle n'est pas officiellement disponible sur Firefox 2.0 mais il existe plusieurs port. Moi j'ai utilisé cette version de Aardvak.
ColorZilla
Un peu plus gadget, cet outil permet de récupérer facilement les codes couleurs d'images ou d'éléments sur un site.
Voilà, j'espère que cela vous sera utile.
Notes
[1] L'extension permet même de valider à partir du code source et non de l'adresse de la page. Cela permet de valider des pages qui sont protégées par mot de passe par exemple.
Commentaires
Il y a une nouvelle extension miracle pour le développement web : Firebug : www.getfirebug.com
J'ai pas encore eu le temps de tout bien prendre en main, mais c'est franchement bluffant. Un aperçu de la chose sur le blog de Baptiste : www.aozeo.com/blog/55-fir...
Je confirme, firebug vaut le coup d'etre essaye, vraiment.
Pouvoir desactiver une regle css d'un clic pour voir l'effet qu'elle a sur le site, ou pouvoir ajoutr des regles a la volee, sans toucher aux css en dur...
Hyper commode.
C'est vrai que parler de développement avec Firefox sans mentionner FireBug est un peu une hérésie de nos jours. La nouvelles mouture est L'extension qui change la vie !!!
Le temps qu'elle va me faire gagner dans mon métier. Finies toutes les merdes avec les layouts, avec l'héritage de classes mères en css.
même du point de vue utilisateur, Aardvak vaut le coup.
Il devrait être intégré dans Firefox dans les fonctions de l'aperçu avant impression, ça serait vachement utile pour n'imprimer que ce que l'on souhaite. Parcequ'un aperçu avant impression sans fonction d'édition comme aujourd'hui, ça sert à rien DU TOUT.
antistress c'est une très bonne idée le coup d'intégrer Aardvak pour pouvoir supprimer ce que l'on ne veut pas à l'impression. Tu devrais suggérer ça à l'équipe de dev.
Bast, j'espère qu'il y a de l'humour derrière ta première phrase. Si je publie sur mon blogue c'est justement pour partager et découvrir... J'explique les raisons pour lesquelles je développe avec Firefox, je ne prétends pas à une lise exhaustive de tous les meilleurs outils !
Colar et Ju, merci de m'avoir fait découvrir cette extension. Je vais regarder tout ça et effectivement elle va sûrement me faire gagner bien du temps... surtout pour ce qui est javascript.
je sais que c'est une bonne idée, mais je sais pas comment la suggérer!
j'avais posté sur le blog de Pascal Chevrel mais c'est la démarche "officielle" www.chevrel.org/fr/carnet...
Si t'as moyen de le faire, je t'en remercie par avance
manque le mot "pas" dans "c'est pas la démarche..."
Suite à ce que j'ai lu plus haut, j'ai installé firebug il y a quelques heures.
Il est tout simplement génial et permet de faire gagner un temps fou au développeur WEB !
Merci à Think Underground pour nous faire découvrir tant de choses intéressantes !
antistress, le plus simple je pense est de passer par le wiki de brainstorming pour Firefox 3 (wiki.mozilla.org./Firefox... ). Je ne sais pas si il existe en Français. Il y a peut-être aussi un site pour Firefox 2 mais je ne sais pas.
Sinon je suis tout à fait de ton avis nicosgc. Firebug est magique et permet vraiment de gagner du temps. Il rend même Aardvak obsolète. Je trouve par contre qu'il est bien complémentaire (en se marchant un peu sur les pieds) avec Web Dev. Pour le JavaScript c'est tout simplement GÉNIAL.
Merci aussi pour tes compliments nicosgc.
Moi j'utilise aussi HTML Validator qui me permet de voir tout de suite si il y a des erreurs sur mes pages : users.skynet.be/mgueury/m...
Djib, bien sûr il y avait de l'humour ce n'était absolument pas une critique.
Mais il n'empêche que c'est vraiment l'extension qui fait fureur en ce moment.
Bast, ok, cool. Tu m'avais fait peur
Je trouve l'extension effectivement énorme.
3po -> c'est installé
Je trouve dommage de parler du devloppement web avec FF sans parler d'X-ray, de Fangs, du DOM Inspector, de Firebug, Measurelt, Mozilla Xforms, XHTML Ruby Support, Document Map, voire Longdesc éventuellement ...
(oui, j'ai fait la liste de tout ce que j'utilisais :P) Par contre je suis content de découvrir Aardvak ! Auras-t-on droit à une deuxième version de ce billet ?
TamperData permet aussi de sniffer le traffic entrant / sortant du naviguateur.
Un must pour débugger certaines requêtes obscures !
lyüstcl a priori non il n'y aura pas de seconde version. Cette version n'est pas comme je l'ai dit plus haut une liste exhaustive, mais plutôt ce que j'utilise moi.
yanns je ne connaissais pas. Je vais tester.
3po c'est effectivement super ton outil. En un coup d'oeil on voit si la page est valide !!!
lyüstcl, tiens regarde ce site : www.framasoft.net/IMG/htm...
Y'a aussi
* "View Formated source" qui est fabuleuse pour débugger les problèmes de CSS
* "HTML Validator", pour voir rapidement les problèmes dans le html,
* "Measure It", pour mesurer la tailles des éléments d'une page.
* "Search Status", qui affiche le page rank google du site visité.
Je pensais que tu essayais de faire un billet sur tout ce qui peut être utilisé, dans ce cas c'est pas grave
Merci à djib pour son lien, très instructif !
Oui, c'est effectivement un très bon lien.
Colorzilla marche sous Ubuntu ? je n'en suis pas sur .
Cakeman, elle marche mais il faut installer Mozilla à partir des fichiers du site officiel et non les dépôts d'Ubuntu. Je ne sais pas ce qui explique ce comportement :'(
djib : j'ai fait la suggestion ici mais je sais pas si j'ai bien respecté le protocole, je suis pas un expert en wikis...
wiki.mozilla.org./index.p...
The "print preview" option is useless unless you can do some edition : add the ability to delete some elements on the page (like with the Aardvark extension) before printing/saving/exporting in pdf.
Super. Peut-être pour Firefox 3.0 alors