10 outils de développement des navigateurs pour développeurs front-end

En tant que développeur front-end, vous pouvez vous appuyer sur un très grand nombre d’outils pour votre travail de développement Web : des éditeurs de texte, des gestionnaires de paquets, des systèmes de contrôle de version, et bien d’autres. Mais aussi élémentaire qu’il puisse paraître, l’outil que nous utilisons tous est le navigateur. Les navigateurs ne servent pas qu’à consulter des sites Web, ils possèdent également des outils de développement extrêmement performants.

Comme pour vos autres outils, vous ne connaissez probablement pas toutes leurs fonctionnalités. De plus, tous les outils de développement sont différents. Chacun possède des fonctionnalités qui lui sont propres et sont utiles dans des circonstances bien particulières.

« Tous les outils de développement sont différents. Chacun possède des fonctionnalités qui lui sont propres et sont utiles dans des circonstances bien particulières. »

Dans cet article, nous parlerons de plusieurs outils de développement qui intéresseront certainement notre communauté de développeurs front-end. Ces outils vous aideront à façonner les sites de vos clients, à améliorer leur accessibilité, et à détecter les problèmes.

Certains sont présents dans n’importe quel navigateur, tandis que d’autres s’utilisent seulement avec Firefox ou Chrome. L’ouverture des outils de développement peut varier légèrement d’un navigateur à un autre, mais généralement, il suffit de faire un clic droit quelque part dans la page puis de cliquer sur « Inspecter » (ou « Examiner l’élément »).

C’est parti !

1. Le designMode (tous les navigateurs)

Vous êtes-vous déjà demandé à quoi ressemblera un bouton lorsque vous modifiez son texte, ou une partie de contenu avant de faire une capture d’écran ? Avec document.designMode, vous pouvez rendre l’ensemble des éléments d’une page modifiable. Rendez-vous dans l’onglet « Console » de l’ensemble d’outils de développement de votre navigateur et écrivez :

document.designMode = "on"

Et voilà ! Tous les éléments de votre page sont désormais modifiables, et vous pouvez vous amuser avec ses contenus. Vous pouvez même copier et coller des contenus stylisés depuis Word ou Google Docs, et le style sera également copié.

2. Les propriétés d’accessibilité (Firefox)

Aujourd’hui encore, l’accessibilité est un aspect peu apprécié par les développeurs Web. Cela s’explique en partie par le fait qu’il est difficile d’être performant dans ce domaine. Mais Firefox propose de nous aider avec son onglet « Accessibilité ». Dans cet onglet, nous pouvons parcourir l’arbre de la page, qui ressemble à ce que l’on peut voir dans l’onglet « Elements » ou « Inspecteur » (en fonction du navigateur que vous utilisez). Cela montre le rôle de chaque élément, son nom, et les éventuels problèmes le concernant. Il peut être difficile de naviguer dans cet onglet, c’est pourquoi vous pouvez aussi faire un clic droit sur un élément de la page et cliquer sur « Inspecter les propriétés d’accessibilité ». Cela vous conduira directement à l’élément sélectionné dans l’onglet « Accessibilité ».

Pour identifier plus facilement les problèmes de votre page, vous trouverez un menu déroulant en haut de cet onglet à côté de « Recherche de problèmes pour : ». Dans ce menu, vous pouvez choisir le type de problèmes que vous voulez voir. Vous pouvez ensuite survoler une ligne, et l’élément apparaîtra en surbrillance dans la fenêtre de votre navigateur.

Cela devrait vous aider à améliorer l’accessibilité de votre site en minimisant vos efforts.

3. Le rapport Lighthouse (Chrome)

Lighthouse est un outil conçu par Google dans le but de mesurer la qualité des pages. Lighthouse était initialement un outil indépendant, mais il est désormais intégré aux outils de développement Google Chrome.

Rendez-vous dans l’onglet « Lighthouse », sélectionnez le type d’appareils que vous voulez tester, et cliquez sur « Generate report ». Lighthouse effectue alors un audit de la page sur laquelle vous vous trouvez. Vous obtiendrez des conseils pour améliorer la performance, l’accessibilité, la protection et le référencement naturel de cette page. L’outil vous montrera également ce qu’il vous reste à faire pour pouvoir créer une application Web progressive à partir de votre site.

4. Enregistrer le film du chargement d’une page dans l’onglet « Network » (Chrome)

Dans l’onglet « Network » de l’ensemble d’outils de développement Google Chrome, vous pouvez voir les fichiers qui ont été chargés et le temps de chargement de chacun d’eux. C’est très utile si vous voulez identifier les fichiers dont le chargement prend beaucoup de temps, ou savoir pourquoi un fichier ne s’est pas chargé. Vous pouvez également prendre des captures d’écran pendant le chargement de votre page.

Pour cela, cliquez sur l’icône « Network settings » en haut à droite de l’onglet « Network », puis cochez la case « Capture screenshots ». Actualisez votre page pour enregistrer le film du chargement de votre page. Il vous suffit ensuite de double-cliquer sur l’une des captures pour l’agrandir, puis vous pourrez passer librement d’une capture à une autre.

C’est un excellent outil pour voir l’aspect de votre site lorsque son chargement demande un certain temps. Cela peut vous aider à repérer des problèmes de design, ou le déplacement de certains contenus après le chargement d’une image par exemple. Cela vous aide également à déterminer le temps nécessaire pour arriver au first meaningful paint, c’est-à-dire le moment où un utilisateur voit le contenu principal d’une page.

5. Le tiroir de la console et les simulations visuelles (Chrome)

Le tiroir de la console est un petit outil très utile et présent dans la plupart des onglets. Il s’affiche généralement en bas de l’ensemble d’outils de développement comme une fenêtre de la console. S’il ne s’affiche pas, vous pouvez l’ouvrir en appuyant sur « Echap », ou en cliquant sur les trois points situés en haut à droite puis sur « Show console drawer ».

Par défaut, vous ne verrez que l’onglet qui concerne la console. En cliquant sur les trois points en haut à gauche du tiroir de la console, beaucoup d’autres onglets vous seront proposés. L’onglet « Rendering » fait partie des plus utiles. Il vous aidera à détecter différents types de problèmes concernant l’affichage de votre site. L’une des fonctionnalités les plus intéressantes se trouve en bas de cet onglet : « Emulate vision deficiencies ». Elle permet de simuler l’expérience des utilisateurs souffrant de troubles de la vue ou de daltonisme.

6. L’inspecteur de grille et flexbox (Firefox)

En matière de CSS, les outils de développement Firefox sont bien plus performants que ceux de Google Chrome. L’une des fonctionnalités les plus intéressantes est l’inspecteur d’éléments flexibles et de grille. Avec cette fonctionnalité, vous pouvez visualiser les éléments flexibles ou de grilles pour faciliter leur compréhension et leur débogage si nécessaire. Vous pouvez la trouver en allant dans l’onglet « Inspecteur », puis en ouvrant l’onglet « Mise en page » situé dans la partie droite.

Si vous souhaitez inspecter un élément flexible, sélectionnez-le, et les détails s’afficheront dans la partie droite. Dans cette fenêtre, vous obtenez une représentation visuelle de votre élément et le mode de calcul des différentes tailles. Par exemple, vous pourriez voir que la taille d’un élément a été réduite en raison de la propriété flex-shrink.

L’inspection d’un conteneur en grille est encore plus intéressante. Ouvrez le tiroir « Grilles » situé dans l’onglet « Mise en page », puis sélectionnez l’élément qui vous intéresse. Dans la fenêtre de votre navigateur, vous verrez apparaître les lignes de la grille ainsi que leurs numéros ou leurs noms, les zones de la grille, et les écarts entre les éléments. Cela vous permet de voir rapidement les éventuels problèmes d’alignement.

7. Les animations (Firefox)

L’inspecteur d’animations est une autre fonctionnalité très pratique. Il se trouve également dans la partie droite de l’onglet « Inspecteur ». Sélectionnez un élément qui contient une animation CSS (ou un de ses parents), et l’outil vous montrera la frise chronologique de cette animation. Si vous cliquez sur cette frise, une nouvelle fenêtre s’ouvre et vous obtenez une frise pour chaque attribut CSS qui change dans votre animation. Vous pouvez vous déplacer tout au long de la frise de l’animation pour examiner les problèmes de votre animation.

8. Les commandes de la console (tous les navigateurs)

Vous avez probablement déjà utilisé l’onglet « Console » avant d’écrire et de tester une expression JavaScript. Mais les outils de développement des navigateurs possèdent leur propre API pour vous aider.

Attention toutefois, l’API répondra seulement si vous utilisez le langage de l’outil de développement en question, et non votre propre code. Voici quelques fonctions intégrées à tous les navigateurs :

• $ et $$ : équivalents de document.querySelector et document.querySelectorAll. Par exemple, $(‘div’) permet de sélectionner le premier div de la page.
• $_ : renvoie le résultat de la dernière expression exécutée. Par exemple, si vous avez écrit 10+10, alors $_ renverra 20. Si l’on continue, $_ + 10 renverra donc 30.
• $0 : désigne l’élément actuellement sélectionné dans l’onglet « Elements » ou « Inspecteur ». Dans les outils de développement de Google Chrome, vous pouvez écrire entre $1 et $5 pour désigner plusieurs des derniers éléments inspectés.
• clear() : efface tous les messages de la console.
• copy(object) : copie un élément en tant que chaîne de caractères. Par exemple, copy($0) permet de copier le code HTML de l’élément actuellement sélectionné.

Ce n’est qu’une petite liste des fonctions et expressions intégrées aux navigateurs. Google propose une liste plus complète dans sa page concernant les outils de développement, comme Firefox dans sa page de ressources pour développeurs (MDN).

9. Les expressions dynamiques (Chrome)

Si vous avez déjà écrit de nombreuses fois la même expression JavaScript dans votre console, vous serez probablement ravi de découvrir les expressions dynamiques. Dans l’onglet « Console » de l’ensemble d’outils de développement Google Chrome, vous verrez une icône en forme d’œil. Cliquez dessus pour créer une nouvelle expression dynamique (live expression) qui s’actualisera automatiquement.

Ainsi, vous pourrez non seulement observer les changements de certaines variables, mais vous pourrez aussi ajouter des expressions comme $0.

10. Activer les pseudo-classes : l’exemple de « hover » (tous les navigateurs)

Dans l’onglet « Elements » ou « Inspecteur » de l’ensemble d’outils de développement de votre navigateur, vous pouvez consulter le code HTML de la page sur laquelle vous vous trouvez et le code CSS de ses éléments. En revanche, cela ne montre que ce qui est affiché. Que faire si vous voulez voir, et modifier, le code CSS lorsque vous survolez un élément ?

C’est là que notre pseudo-classe entre en jeu. Sélectionnez l’élément pour lequel vous souhaitez activer cette fonction, et cliquez sur le bouton :hov qui se trouve en haut à droite de la fenêtre « Styles ». Vous pouvez alors définir vous-même l’état de l’élément sélectionné, et même lui attribuer plusieurs états à la fois.

Et la liste est encore longue…

Dans cet article, nous n’avons parlé que d’une petite partie des merveilleux outils de développement des navigateurs pour développeurs et designers Web. Comme vous pouvez le voir, les outils de développement peuvent vous aider dans un grand nombre de vos tâches. Ils peuvent vous aider à résoudre les bugs de performance, à améliorer l’accessibilité, ou encore à concevoir un site. De plus, nous n’avons pas abordé toutes les fonctionnalités des outils que nous avons évoqués. Pour approfondir, rendez-vous sur les sites de documentation des outils de développement Google Chrome et des outils de développement Firefox. Vous pouvez aussi suivre les astuces de développement d’Umar Hansa, qui partage généralement de petites astuces amusantes pour les outils Google Chrome.

---

Publié par Maud Leuenberger. Maud est la rédactrice en chef du blog français de Shopify.

Texte original par Jayne Mast. Traduction par Nicolas Bruno