On passe à l'horaire d'été...Veuillez prendre note que du 16 juin au 25 août 2017 inclusivement nos bureaux seront fermés les vendredis à compter de midi.
Comment utiliser les outils de développement des navigateurs

Comment utiliser les outils de développement des navigateurs

7 juillet 2014Par Vincent Beaulieu
Catégories :

Saviez-vous que chaque navigateur fournit des outils pour aider le développement des applications Web? Que ce soit Chrome, Firefox ou Internet Explorer, ils possèdent tous l’option « outils de développement ». Même si vous n’êtes peut-être pas développeur Web, il peut s’avérer utile de connaître les outils de développement afin de mieux comprendre ce qui se passe sur vos sites et ceux que vous visitez. Le présent article se limitera aux outils de Chrome et Internet Explorer 11, mais sachez que la plupart des options sont aussi disponibles sur Firefox sous d’autres formes.

Accéder aux outils de développement

Pour Chrome et Internet Explorer, il suffit d’utiliser la touche F12 du clavier dans le navigateur.
Sur chrome, la fenêtre apparaîtra comme suit :

[img]outils-de-developpement-des-navigateurs.png|550||true|Outils de developpement des navigateurs|[/img]

 

Sur Internet Explorer :

[img]outils-developpement-des-navigateurs2.png|550||true|Outils de developpement des navigateurs|[/img]

Exploration du contenu de la page

L’outil d’exploration de DOM (Document Object Model) permet de sélectionner par un simple clic un élément dans la page pour en voir le balisage HTML et les styles appliqués. Cela peut s’avérer très utile pour tester en temps réel des changements au contenu et aux styles de la page. On peut donc s’en servir pour afficher ou cacher des éléments et même pour changer du contenu, que ce soit des images, des textes ou des liens. Notez que les changements ne seront pas conservés si vous rafraîchissez la page.

Sur chrome, on utilise l’icône de loupe [img]loupe.png|40|||Loupe|[/img]. Sur Internet Explorer on utilise l’icône de pointeur [img]pointeur.png|40|||Pointeur|[/img] suivi de l’icône de sélection[img]icone-de-selection.png|40|||Icone de selection|[/img].

Activité réseau

Le suivi de l’activité réseau peut s’avérer très utile pour trouver la raison entourant la lenteur d’une page. On y voit en détail chaque requête faite par le navigateur. S’y retrouvent également des informations telles que le poids de l’élément téléchargé, son type, le temps de téléchargement et le statut de réponse, la liste des différents statuts est disponible ici : http://fr.wikipedia.org/wiki/Liste_des_codes_HTTP. On peut ainsi découvrir si certaines images sont trop lourdes ou si certains appels ne fonctionnent pas.

Pour accéder à l’outil d’activité réseau, on utilise l’option « Network » sur chrome.

Sur Internet Explorer 11, on utilise l’icône [img]icone.png|40|||Icone|[/img] qu’on doit ensuite démarrer l’écoute à l’aide du bouton [img]icone-play.png|40|||Icone play|[/img]. Il suffit ensuite de naviguer sur le site pour voir apparaître différentes statistiques. Voici un exemple sur Internet Explorer.

[img]activite-reseau.png|550||true|Activite reseau|[/img]

Émulation

L’émulation est un outil puissant qui vous permet de voir votre site sous différentes versions de navigateurs ou pour voir l’aspect des pages dans différentes résolutions, par exemple pour simuler un écran de téléphone intelligent.

Comme Chrome et Internet Explorer ont une adaptation bien différente de ces outils, ils seront présentés séparément.

Émulation sur Chrome

Sur Chrome, l’outil sert principalement à simuler un appareil mobile. On peut y accéder en sélectionnant l’onglet « Émulation » au bas de la fenêtre d’outils de développement. On peut ensuite sélectionner dans une liste d’appareils celui qu’on souhaite tester. L’écran sera redimensionné correctement et on pourra naviguer sur le site comme sur l’appareil.

[img]emulation-chrome.png|550||true|Emulation Chrome|[/img]

Émulation sur Internet Explorer

Sur Internet Explorer, on utilise l’icône suivante [img]icone-emulation-internet-explorer.png|40|||Icone Emulation Internet Explorer|[/img] pour accéder aux outils d’émulation. Une fois dans l’interface, il est possible de simuler la navigation du site en changeant le mode de document pour utiliser une version antérieure d’Internet Explorer. On peut aussi simuler des résolutions d’écran au besoin avec la liste déroulante de résolutions. En choisissant une résolution plus petite, on peut recréer le visuel de nos pages sur les appareils mobiles.

Que ce soit en changeant le mode de document ou la résolution, il est important de savoir qu’il s’agit d’une émulation et qu’il arrive à l’occasion que le résultat ne soit pas le même que sur la plateforme visée par la simulation.

Console et « débugger »

Les derniers outils qui peuvent servir sont la console et le « débugger ». Ces outils visent principalement les développeurs avancés, mais peuvent vous permettre de « mettre le doigt sur le bobo » si vous avez un minimum de connaissance.

La plupart du temps la console affichera, s’il y en a, les erreurs javascript survenues lors de la navigation. On peut aussi voir à cet endroit des avertissements relatifs à des styles « css » non supportés ou des éléments qui ne se seraient pas chargés correctement. Bien que les informations contenues dans la console ne vous soient pas nécessairement significatives, elles pourraient s’avérer très utiles à l’équipe de support pour mieux cibler un problème.

Pour ce qui est du déboguer, il permet d’insérer des points d’arrêt lors de l’exécution du code JavaScript permettant ainsi de voir le contexte d’exécution du code et d’en tester les changements en temps réel.

Conclusion

Les outils de développement s’adressent principalement aux développeurs, mais sont des outils relativement simples à utiliser qui permettent de valider et d’augmenter l’efficacité de votre site et de vos changements. Ils peuvent fournir des informations qui vous permettront de mieux comprendre les temps de chargement, les différences visuelles et les étapes d’exécution de vos pages.