Aucun site Web n’est parfaitement construit. Comme tous les produits fabriqués par des humains, les erreurs de code font partie du processus. C’est pourquoi il est important de tester minutieusement tout nouveau site Web que vous créez pour vous assurer qu’il est aussi exempt d’erreurs que possible afin d’offrir à vos utilisateurs la meilleure expérience possible.
Vous ne devez pas tester un site Web sans avoir d’abord essayé le kit DevTools de Google Chrome. Le mode développeur Chrome vous permet d’essayer et de tester minutieusement un nouveau site (ou un existant) pour trouver et corriger les bogues. Il peut également vous donner un aperçu de la manière dont les autres sites sont exécutés, y compris l’affichage du code source.
Voici tout ce que vous devez savoir sur le mode développeur du navigateur Google Chrome, les outils dont il dispose et comment l’utiliser efficacement.
Qu’est-ce que le mode développeur Chrome?
Lorsque nous parlons du mode développeur Chrome, nous ne parlons pas du même mode développeur que vous verrez sur les Chromebooks. Nous faisons référence aux outils de développement Chrome étendus (appelés Google DevTools) intégrés au navigateur lui-même.
Ce sont des outils conçus pour tester, analyser et casser (si nécessaire) une page Web que vous avez chargée dans le navigateur Google Chrome à des fins de test. À un niveau de base, vous pouvez utiliser DevTools pour afficher le code source d’un site Web, vous permettant de jeter un coup d’œil sous le capot pour voir comment un site a été construit et comment il fonctionne.
Cependant, Google DevTools offre plus que cela. Vous pouvez utiliser le mode développeur Chrome pour modifier une page après son chargement, exécuter les commandes de la console Google Chrome pour contrôler et manipuler la page, ainsi qu’exécuter des tests de vitesse et de réseau pour surveiller le trafic Web.
Vous pouvez également émuler d’autres appareils, y compris différents systèmes d’exploitation et résolutions d’écran, en mode Chrome DevTools. Cela vous permet de voir si un site a une conception Web réactive et où le contenu et les mises en page du site changeront en fonction de la résolution ou du type de l’appareil.
Bien que ces outils s’adressent aux développeurs Web professionnels ou aux testeurs, il est également pratique pour les utilisateurs de Chrome standard de se familiariser avec la suite DevTools. Si vous constatez un problème avec un site que vous ne pouvez pas résoudre, le passage en mode développeur Chrome peut vous aider à voir si le problème provient du site ou de votre navigateur.
Comment accéder au menu DevTools de Google Chrome
Il existe plusieurs façons d’accéder au menu Google Chrome DevTools, en fonction de l’outil que vous souhaitez utiliser.
La méthode la plus simple pour ce faire est à partir du menu Google Chrome. Pour ce faire, cliquez sur le icône de menu à trois points en haut à droite. Dans le menu qui apparaît, cliquez sur Plus d’outils> Outils de développement.
Cela ouvrira le kit DevTools dans un nouveau menu sur le côté droit de votre onglet ou fenêtre Chrome ouvert.
Vous pouvez également le faire en utilisant des raccourcis clavier. Depuis un PC Windows ou Linux, ouvrez le navigateur Chrome et appuyez sur le bouton F12 clé. Vous pouvez également appuyer sur Ctrl + Alt + J ou Ctrl + Alt + I clés dans un onglet ou une fenêtre Chrome ouvert.
Sous macOS, appuyez sur F12 ou appuyez sur Option + Commande + J ou Option + Commande + I touches pour ouvrir le menu Chrome DevTools à la place. Cela ouvrira la console Chrome, avec des options pour passer à d’autres outils Chrome en haut du menu DevTools.
Si vous le souhaitez, vous pouvez afficher le code source d’un site Web (en ouvrant le Éléments du menu DevTools dans le processus) sur n’importe quelle page Web ouverte en cliquant avec le bouton droit sur et en cliquant sur le Inspecter option.
Utilisation de Chrome DevTools
Comme nous l’avons brièvement évoqué, vous pouvez utiliser le kit Chrome DevTools pour voir le code source d’un site Web sous le Éléments languette. Il vous permettra d’analyser le code derrière la page que vous avez chargée, ainsi que d’afficher les messages d’erreur (indiquant des problèmes de chargement du site) dans la console Chrome sous le Console languette.
Vous pouvez également afficher les différentes sources de contenu d’un site Web sous le Sources languette. Par exemple, si un site utilise un réseau de diffusion de contenu (CDN), les médias d’un site seront répertoriés comme une source différente ici.
Le mode développeur Chrome vous permet de télécharger directement ce contenu ou d’effectuer une analyse plus complexe du contenu.
Si vous souhaitez tester les performances d’un site, vous pouvez surveiller et enregistrer votre utilisation du réseau sous le Réseau languette. Cela montrera la vitesse, la taille et le type de requêtes réseau effectuées entre votre navigateur et le site.
Par exemple, lors du premier chargement d’une page, le site chargera le contenu de la page lui-même, mais il pourra également demander des données à des bases de données tierces. Par exemple, lorsque vous vous connectez, cela peut interroger une base de données qui apparaîtra comme une demande réseau ici.
Vous pouvez analyser cela plus en détail sous le Performance onglet, où vous pouvez enregistrer l’utilisation de votre navigateur Chrome de manière plus approfondie, notamment en enregistrant des captures d’écran à différents endroits. Cela enregistrera le temps nécessaire pour charger votre site pour une analyse plus approfondie.
Google Chrome a la réputation de être dur sur la mémoire de votre PC, afin que vous puissiez tester l’utilisation de la mémoire JavaScript de votre site sous le Mémoire languette. Différents profils de test Chrome peuvent être utilisés ici, avec plus d’informations sur ces tests à la Page de documentation Chrome DevTools.
Pour une analyse plus approfondie du contenu de votre site, ainsi que de tout stockage de navigateur qu’il pourrait utiliser (par exemple, pour enregistrer des données), vous pouvez effectuer une recherche dans le Application languette. Vous pouvez consulter les informations sur les cookies du site ici sous le Biscuits ou effacez le stockage utilisé en cliquant sur le Effacer le stockage option.
Si vous vous inquiétez de la sécurité de votre site, vous pouvez vérifier ses performances sous le Sécurité languette. Cela vous donnera un aperçu rapide de l’analyse de sécurité de Chrome pour une page, y compris si la page possède ou non un certificat SSL correct et fiable.
Si vous souhaitez générer un rapport sur les performances de votre site, y compris s’il répond aux normes utilisateur typiques et si les performances du site peuvent affecter l’optimisation des moteurs de recherche, vous pouvez cliquer sur le bouton Phare languette. Cela propose des paramètres que vous pouvez cocher ou décocher pour votre rapport. Cliquez sur Générer un rapport pour créer le rapport à afficher.
Cela efface à peine la surface du potentiel que le mode développeur Chrome peut apporter aux développeurs. Si vous souhaitez en savoir plus, le Documentation Chrome DevTools devrait vous aider avec les outils et les fonctionnalités proposés, y compris comment créer vos propres tests utilisateur avec.
Astuces avancées de Google Chrome
La plupart des utilisateurs de Chrome ne sauront jamais que le kit Google Chrome DevTools existe dans leur navigateur, mais pour les utilisateurs expérimentés, il reste un moyen extrêmement utile de tester et d’analyser des sites Web. Il existe également des tiers Extensions Chrome pour les développeurs Web disponible pour vous aider à tester davantage votre site.
Si vous êtes création d’un site Web de base, le passage en mode développeur Chrome peut vous aider à détecter les erreurs sur votre site qui ne sont pas immédiatement visibles. Vous ne pouvez le faire que si Chrome fonctionne correctement, donc si vous avez des problèmes avec les plantages de Chrome, vous devrez peut-être d’abord réinitialiser ou réinstaller votre navigateur.