1 Sujet de 20100 Dernière modification par 20100 (04-12-2008 17:07:40)

  • 20100
  • 20100
  • Cigale
  • Déconnecté
  • Inscrit : 26-11-2008
  • Messages : 15

Sujet : Extension FireFox pour le développement Web

Juste pour faire partager à la communauté des Cigales les extensions de Mozilla Firefox pour le développement Web.

Pour ceux qui ne connaisse pas, une petite piqure de rappel s'impose. Mozilla Firefox en plus d'être un des navigateurs des plus "stables" propose un concept dans l'air du temps, à savoir la personnalisation de son navigateur par l'ajout d'extensions. L'ajout d'extension est très simple : vous cliquez sur le lien de l’extension, Firefox vous demande la permission de l’installer, la télécharge, l’installe et redémarre. Vous pouvez désinstaller l'extension en 2 clics par le menu Outils > Modules complémentaires. Et enfin, les extensions vous préviennent si une nouvelle version est disponible. Bref, c'est du easyToInstall, easyToUse ...

Un petit bémol quand même avec ces extensions, si vous en installer trop d'extensions ou bien des extensions très lourdes, comme par exemple Firebug, attendez vous à des ralentissements notables dans la navigation ou encore à des erreurs internes. Utilisez deux browsers, un pour le développement charger avec vos extensions, et un autre pour la navigation.

Voici ci-dessous, une sélection (à étoffer) des extensions que je vous recommande pour le développement web.

- Firebug
- ColorZilla
- HtmlValidator
- Yslow
- iMacros

Citer Message 1

2 Réponse de 20100

  • 20100
  • 20100
  • Cigale
  • Déconnecté
  • Inscrit : 26-11-2008
  • Messages : 15

Re: Extension FireFox pour le développement Web

Firebug

Extension ultime pour le développement web, elle permet d'inspecter le code d'une page web simplement en parcourant le DOM, on peut y modifier les CSS à la volée, vérifier ce qui transite dans les en-têtes HTTP, voir les parametères passés en POST ou en GET, comparés les temps de chargement des divers éléments de la page.

... une fois testé, une fois pour toute adopté ...

Installer Firebug

http://www.gnucitizen.org/images/391953301_2101c534f2.jpg

Citer Message 2

3 Réponse de 20100

  • 20100
  • 20100
  • Cigale
  • Déconnecté
  • Inscrit : 26-11-2008
  • Messages : 15

Re: Extension FireFox pour le développement Web

ColorZilla

Comment recuperé le code couleur (RVB, CMYK, ect...) sur une page web, tout simplement en un click avec cette extension.

http://www.bram.us/wordpress/wp-content/uploads/2006/12/fx_colorzilla.jpg

Comme vous voyez dans l'image ci-dessus, vous pointez avec votre souris un pixel de couleur et ColorZilla vous donne instantanément le code couleur correspondant. De plus, il est fourni une palette browser, vous permettant de moduler à loisir sur le choix d'une couleur pour le fond de votre site.

Installer Colorzilla

Citer Message 3

4 Réponse de 20100

  • 20100
  • 20100
  • Cigale
  • Déconnecté
  • Inscrit : 26-11-2008
  • Messages : 15

Re: Extension FireFox pour le développement Web

Html Validator

Voila comment contrôler la validité de votre code HTML/XHTML selon les normes préconisés par le W3C. Des outils vous permettent de "nettoyer" votre code, ou de vous conseiller sur les erreurs rencontrées.

Installer Html Validator

http://html.nhndesign.com/guidelines/html/validation/img/validatorInterface1.png

Citer Message 4

5 Réponse de 20100

  • 20100
  • 20100
  • Cigale
  • Déconnecté
  • Inscrit : 26-11-2008
  • Messages : 15

Re: Extension FireFox pour le développement Web

YSlow

Extension pour analyser le temps de chargement de vos pages. Il donne les éléments peu performants qui ralentisse la navigation ainsi que quelques conseils pour améliorer le temps de chargement.

Yslow nécessite l’extension Firebug pour fonctionner.

Installer YSlow

http://www.cobolian.com/wp-content/uploads/yslow6.png

Citer Message 5

6 Réponse de 20100

  • 20100
  • 20100
  • Cigale
  • Déconnecté
  • Inscrit : 26-11-2008
  • Messages : 15

Re: Extension FireFox pour le développement Web

Tamper Data

Certainement incorporée dans une prochaine mise à jour de Firebug, mais pour l'instant il faut passer par lui. Il s'agit d'un outil d'analyse et de modification très complet des requêtes HTTP. Son principal intérêt réside dans la possibilité de modifier à la volée les en-têtes, comme par exemple changer des paramètres POST/GET d'une requête sans modification du code.

Installer Tamper Data

http://www.derekallard.com/img/post_resources/tamper_data_getting_data.jpg

Citer Message 6

7 Réponse de 20100

  • 20100
  • 20100
  • Cigale
  • Déconnecté
  • Inscrit : 26-11-2008
  • Messages : 15

Re: Extension FireFox pour le développement Web

iMacros
Ce qu'AutoIt est à Windows, Imacros l'est pour Firefox.

iMacros permet d'automatiser les taches répétives effectués dans votre navigateur.Avec iMacros, vous pouvez remplir, rapidement et facilement, les formulaires sur Internet, vous rappeler des mots de passe, télécharger les informations d’autres sites, « scraper » le Web (récupérer les données de plusieurs sites), et beaucoup plus. Vous pouvez sauver les macros sur votre ordinateur pour votre usage personnel, ou les partager avec d’autres en les diffusant.

Une des principales utilités dans le contexte du développement web est d'enregistrer des macros pour simuler une visite sur votre site afin d'en tester la fonctionnalité et détecter les bugs éventuelles.

Installer iMacros

http://www.linternaute.com/0_newsletter/high-tech/217/images/imacros.png

Citer Message 7

8 Réponse de toad

  • toad
  • toad
  • Equipe lesCigales.ORG
  • Déconnecté
  • Inscrit : 11-07-2005
  • Messages : 2.394

Re: Extension FireFox pour le développement Web

Merci pour toutes ces belles extensions, on peut aussi noter Web Developper, assez pratique.

lesCigales.ORG sysadm1n
L'hébergeur qui sent bon la lavande - Un control panel qu'il est chouette - Viendez nous parler!
"All that is necessary for evil to triumph is for good men to do nothing."

de toad le site Web

Citer Message 8

  • Inscrit : 15-01-2009
  • Messages : 13

Re: Extension FireFox pour le développement Web

Tamper Data n'a pas de réelle utilité dans le développement mais plutot dans le test de vulnerabilités, les deux meilleures extensions orienté développement restent webdevolper https://addons.mozilla.org/fr/firefox/addon/60 qui permet la validation w3c, le monitoring du code et firebug qui permet facilement de localiser et changer les elements graphiques.

Citer Message 9

  • De : Suisse
  • Inscrit : 24-06-2010
  • Messages : 13

Re: Extension FireFox pour le développement Web

Je profite de rajouté un petit utilitaire mozilla aussi qui n'est pas cité pourtant tellement pratique.

Web Developper (Je viens de voir que Toad l'avais cité mais pas mis le lien je le mets pour vous monsieur smile)

Web developper

D.L.C Production | CH&DS - Communauté de joueurs

de Rouletamix le site Web

Citer Message 10