Les outils du développeur Web

Les développeurs Web ont à leur disposition une foule d'outils pour faciliter leur travail. Il suffit de les connaître pour ne plus pouvoir s'en passer.

En voici quelques-uns.

▼Publicité

Validateurs W3C

Le W3C permet de valider votre code HTML et CSS pour assurer qu'il respecte les normes. Ceci aidera à faire en sorte que le site sorte bien sur les différents navigateurs actuels et futurs.

Les validateurs W3C sont disponibles ici : http://www.w3.org/QA/Tools/

Outils d'analyse HTML/CSS

Outil intégré à Chrome

Chrome vous offre un outil intégré permettant d'analyser le HTML et le CSS d'une page Web. Lorsque vous aurez utilisé cet outil, vous ne voudrez plus vous en passer ! Aucune extension à installer, tout est là nativement.

On obtient cet outil en cliquant sur l'icône Outils puis en choississant Outils / Outils de développement ou en appuyant sur Ctrl + Maj + i. Il est également possible de faire un clic droit sur un élément de la page et de choisir « Inspecter l'élément ».

Cet outil contient plusieurs fonctionnalités intéressantes, notamment le repérage des divisions (mise en surbrillance pour en voir les limites) et l'affichage du code HTML et du CSS associé à un élément donné de la page. On verra le CSS asisgné directement à cet élément de même que les attributs hérités de ses parents.

Autre fonctionnalité intéressante : en double-cliquant sur une règle CSS dans la zone de droite, il est possible de lui apporter des modifications. Les modifications resteront en mémoire, le temps de tester la bonne valeur à utiliser. Le fichier CSS original ne sera pas modifié.

Outil intégré à Internet Explorer

IE offre un outil intégré très semblable à celui de Chrome. Vous pouvez y accéder en cliquant sur l'icône Outils puis en choisissant « Outils de développement » ou en appuyant sur F12.

Extension « FireBug »

Cette extension n'est disponible que pour FireFox. Il s'agit d'un outil puissant permettant d'analyser le code HTML et CSS d'une page Web. Il offre les mêmes possibilités que l'outils intégré de Chrome... et même plus !

On peut télécharger FireBug ici : https://addons.mozilla.org/fr/firefox/addon/firebug/

Extension « Web developer »

Les fonctionnalités que cet outil vous offre sont différentes selon le navigateur. Parmi les plus intéressantes, notons le repérage des divisions, l'affichage des attributs CSS affectant différents éléments, le redimensionnement de la page pour simuler différentes résolutions d'écran, etc.

Console JavaScript

Cet outil est loin d'être aussi puissant et convivial qu'un débogueur mais il s'agit tout de même d'une aide précieuse.

  • Sous Chrome : La console JavaScript sera obtenue en cliquant sur l'icône Outils puis en choississant Outils / Console JavaScript.
  • Sous Firefox : Il faut aller dans le menu Outils / Console d'erreurs pour voir la console JavaScript.
  • Sous IE : Lorsqu'une page Web affichée dans Internet Explorer comporte des erreurs JavaScript, l'icône « Erreur sur la page » () apparaît sur la barre d'état. Un double-clic sur cette icône fera apparaître la console JavaScript.

Outil pour simuler les anciennes versions d'Internet Explorer

Tout développeur Web se doit de tester son site Web sur les différents navigateurs. Bien que le besoin de supporter les anciennes versions d'Internet Explorer soient de plus en plus rares, il peut arriver qu'un projet particulier nécessite un tel support. Plutôt que de vous battre pour installer une ancienne version d'IE sur votre poste de travail, vous pouvez utiliser IETester pour faire le travail.

IETester est disponible ici : http://www.my-debugbar.com/wiki/IETester

Pour plus d'information

« 25 SECRETS DES OUTILS DE DÉVELOPPEMENT DE NAVIGATEUR ». RDSign. http://beta.rdsign.net/article_46

« 15 Google Chrome Extensions for People Who Build Websites ». Six Revisions. http://sixrevisions.com/tools/chrome-extensions-developers-designers/

« Top 20 Essential Firefox Add-ons for Web Designers ». Six Revisions. http://sixrevisions.com/tools/top-20-essential-firefox-add-ons-web-designers/

« 20 Useful Tools to Make Web Development More Efficient ». Six Revisions. http://sixrevisions.com/tools/20_web_development_tools/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories