Les bons outils pour développer en HTML5 Firefox, IE, Chrome, Safari et Opera : les outils de développement proposés
Mozilla Firefox
Navigateur alternatif par excellence, Mozilla Firefox est souvent le premier choix des développeurs, car c'est celui qui comporte le plus d'extensions.
La plus célèbre d'entre elles est Firebug. Il s'agit d'un inspecteur de document très complet qui regroupe sous différents onglets les outils de consultation et d'analyse du code HTML, JavaScript, CSS. Il est possible d'agir en direct sur le contenu de la page et ses propriétés de style pour constater le résultat visuel.
Au moins deux extensions peuvent se greffer aux onglets de Firebug : YSlow (par Yahoo) et Page Speed (par Google). Ces deux protagonistes visent à effectuer des audits de performance avec des recommandations d'améliorations, suivant les critères communiqués par les deux géants du Web.
Historiquement, Web Developper fut la première extension orientée pour les développeurs, très prisée pour ses accès rapides aux outils de diagnostic regroupés par thématiques (cookies, images, formulaires, structure du document, mise en valeur de certains types d'éléments, redimensionnement de la fenêtre du navigateur, validation en ligne, etc.).
À partir des versions 15 et 16, Firefox se dote de ses propres outils de développement intégrés, entre autres une ligne de commande bien pratique accessible avec la combinaison de touches Shift+F2.
RESSOURCE Extensions pour Mozilla Firefox
Mozilla Firefox – le navigateur
http://www.getfirefox.com/
Firebug
http://getfirebug.com/
Yslow (Yahoo)
http://developer.yahoo.com/yslow/
Page Speed (Google)
http://code.google.com/intl/fr/speed/page-speed/download.html
Web Developper
https://addons.mozilla.org/fr/firefox/addon/60/
Google Chrome
Dernier venu dans la cour des grands navigateurs, déjà leader dans la course aux performances, Chrome embarque un inspecteur très évolué, accessible via le clic droit de la souris puis l'option Inspecter l'élément ou dans le menu général, sous-menu Outils > Outils de développement (raccourci Ctrl + Maj + I sous Windows).
On y retrouve toutes les fonctionnalités de base relatives à l'inspection du document, des scripts, des ressources et du stockage. Celui-ci met par ailleurs l'accent sur les performances, car il comporte des outils de monitoring réseau, moteur de rendu, et une console très puissante.
Firebug Lite est également disponible dans une version spécifique à Google Chrome.
RESSOURCE Extensions pour Google Chrome
Google Chrome – le navigateur
http://www.google.com/chrome?hl=fr
Chrome Developer Tools
https://developers.google.com/chrome-developer-tools/
Firebug Lite
http://getfirebug.com/releases/lite/chrome/
Safari
Navigateur de prédilection sous Mac OS X, édité par Apple, Safari doit figurer parmi les agents utilisateurs essentiels lors de la vérification des pages web, car il touche un public croissant.
Le menu des outils de développement devient disponible après activation dans le menu des Préférences (onglet Avancées, case à cocher Afficher le menu de développement dans la barre de menus). Étant basé sur le même moteur que celui de Google Chrome, WebKit, celui-ci comporte globalement les mêmes types de ressources et peut être atteint par les mêmes moyens.
Firebug Lite (version JavaScript) est disponible pour Safari.
RESSOURCE Extensions pour Safari
Safari – le navigateur
http://www.apple.com/fr/safari/
Firebug Lite
http://getfirebug.com/firebuglite
Opera
Le moteur du navigateur d'Opera a une excellente réputation. Bien qu'outsider, il affiche d'excellentes performances et un respect des standards du Web en constante évolution.
Inclus dans Opera (moteur Presto), Dragonfly est un ensemble d'outils équivalent à Firebug. Tous les onglets d'inspection sont présents, notamment DOM, CSS, Scripts, Réseau, Console. Dragonfly peut être activé en cliquant avec le bouton droit de la souris sur l'élément que vous souhaitez inspecter puis en sélectionnant Inspecter l'élément. On le retrouve dans le menu Outils de développeur sous Windows et Linux
ou le menu Éditer sous Mac.
Firebug Lite (version JavaScript) est disponible pour Opera.
RESSOURCE Extensions pour Opera
Opera – le navigateur
http://www.opera.com/
Firebug Lite
http://getfirebug.com/firebuglite
Internet Explorer
Les outils de développement d'Internet Explorer sont disponibles à partir de la version 8 dans le menu Outils et accessibles avec la touche de raccourci F12. On y retrouve dans une fenêtre indépendante ou fusionnée au navigateur les outils les plus courants pour la visualisation HTML, CSS, JScript ( JavaScript), l'audit de code et quelques compléments.
Firebug Lite (version JavaScript) est disponible pour Internet Explorer à partir de sa version 6. C'est un bon complément, surtout pour les anciennes versions qui ne disposent à l'origine d'aucun outil d'inspection et de diagnostic.
RESSOURCE Extensions pour Internet Explorer
Internet Explorer – le navigateur
http://www.microsoft.com/france/windows/internet-explorer/
Firebug Lite
http://getfirebug.com/firebuglite