Quand on développe des sites web, on utilise toute une palette d'outils pour réaliser différentes étapes du processus de développement. Pour la création de la charte graphique, on va commencer par du papier et un crayon, puis on va passer à des outils informatiques comme Gimp ou Photoshop. Pour le codage, ça va être très varié, on va passer de l'éditeur de texte (personnellement j'utilise Notepad++) à des outils de développement plus poussés comme Eclipse. Au final, on affichera le résultat sur un navigateur web.
Arrivé à cette étape finale, on aura encore des choses à corriger ou à régler. Et là, les navigateurs web vont nous venir en aide en proposant des outils directement intégrés aux navigateurs qui nous permettront de débogueur ce qui ne va pas ou, simplement, d'améliorer certains points.
Les outils de développement de Google Chrome
Pour activer les outils sous Chrome, vous pouvez passer par le menu "Outils/Outils de développement" ou utiliser le raccourci "Ctrl+Shift+I".
On accède directement à une vue du code à gauche et les styles appliqués à l'élément sélectionné à droite. Cette fenêtre dispose d'une barre d'outils permettant d'accéder à d'autres fonctionnalités d'analyse du site (débogage du Javascript, poids des différents éléments de la page, ...). La barre d'outils est facile d'accès, très lisible et très pratique pour le débogage (notamment pour le Javascript).
Une fonctionnalité que j'ai trouvé très intéressante, il s'agit des règles de positionnement.
Dans la partie code, on sélectionne une balise et des règles apparaissent dans la zone d'affichage de la page web. C'est très utile pour récupérer la taille et la position de l'élément sélectionné. Il me semble que c'est une fonctionnalité assez récente parce que je ne l'avais pas remarqué auparavant.
Le débogage de Javascript est vraiment pratique.
On accède à cette partie en cliquant sur le bouton "Sources". La fenêtre se décompose en 3 :
- La liste des fichiers incluant du Javascript,
- Un aperçu du code Javascript (du fichier sélectionné)
- Des informations de Debug
Dans l'aperçu du code, on peut facilement mettre des points d'arrêts en cliquant sur la bande numérotée. Quand le Debogueur s'arrête dessus, on peut voir la valeur des données actuellement utilisées par le Javascript.
La barre de développement Firefox
Pour activer les outils sous Firefox, vous pouvez passer par le menu "Outils/Développeur Web/Barre de développement" ou utiliser le raccourci "Shift+F2".
La barre est discrète. Pour accéder à un aperçu du code HTML, il faut cliquer sur le bouton "Examiner".
On aperçoit le style de l'élément qui est actuellement sélectionné dans la vue de la page. Pour avoir un aperçu du code HTML, il faut cliquer sur le deuxième bouton à partie de la gauche de la barre de développement.
On peut aussi déboguer le code Javascript en cliquant sur le bouton Débogueur. On a les mêmes possibilités que Chrome à ce niveau.
En cliquant sur le bouton Autres outils, on a un choix d'outils complémentaires mais peu utiles dans la pratique (Editeur de styles, Ardoise Javascript, ...). J'aurai bien aimé avoir des informations sur le temps de chargement de la page, le poids des images, ...
Il y avait une fonctionnalité sur laquelle j'avais tiqué, la vue 3D. La première fois que je l'avais vu, je m'étais dit "wouahouu" mais en fin de compte, je me rends compte que c'est plus un gadget qu'autre chose. La vue 3D est assez difficile à aborder pour qu'elle soit lisible et exploitable.
Les outils de développement Internet Explorer
Pour activer les outils sous Firefox, vous pouvez passer par le menu "Outils/Outils de développement" ou utiliser le raccourci "F12".
La fenêtre s'affiche de la même façon que Chrome. On accède tout de suite au code HTML ainsi qu'un aperçu du code CSS de l'élément sélectionné. On accède à toutes les commandes facilement. Pour le Javascript, on débogue de la même façon que sur Chrome par contre j'avais déjà rencontré quelques bugs d'utilisation. Pour sélectionner des éléments dans la page, je trouve le cadre de sélection pas assez visible et ne donne aucune information sur la taille et le positionnement de l'élément sélectionné.
Ce que j'apprécie particulièrement, c'est qu'on peut valider le code HTML, CSS, les liens, ... en passant par le menu Valider.
Conclusion
La plupart des navigateurs propose des outils de développement. Je n'ai abordé ici que les plus utilisés.
Personnellement, j'ai tendance à préférer l'outillage de Chrome qui est facilement accessible, pratique et au design agréable. Ce qu'il manque à mon goût c'est un validateur HTML, CSS. J'utilise celui de IE surtout pour déboguer les problèmes spécifiques à IE.
