Aucun site Web n'est parfaitement conçu. 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 devriez 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 façon 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 Chrome Mode développeur?
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 délibérément interrompre (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.
Google DevTools offre cependant 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.
In_content_1 all: [300x250] / dfp: [640x360]->Vous pouvez également émuler d'autres appareils, y compris différents systèmes d'exploitation et résolutions d'écran, dans le mode Chrome DevTools. Cela vous permet de voir si un site a une conception Web réactive, et où le contenu et la mise en page du site changeront en fonction de la résolution ou du type de l'appareil.
Bien que ces outils soient destinés aux développeurs Web professionnels ou aux testeurs, ils sont également pratiques pour que les utilisateurs de Chrome standard se familiarisent 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 à Google Menu Chrome DevTools
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 provient du menu Google Chrome. Pour ce faire, cliquez sur l 'icône de menu à trois pointsen haut à droite. Dans le menu qui s'affiche, 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 la touche F12. Vous pouvez également appuyer sur les touches Ctrl + Alt + Jou Ctrl + Alt + Idans un onglet ou une fenêtre Chrome ouvert.
Sous macOS, appuyez sur F12ou appuyez sur les touches Option + Commande + Jou Option + Commande + Ipour 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 les élémentsdu menu DevTools dans le processus) sur n'importe quelle page Web ouverte en cliquant avec le bouton droit sur et en cliquant sur l'option Inspecter.
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 l'onglet Éléments. 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 l'onglet Console.
Vous pouvez également afficher les différentes sources de contenu d'un site Web sous l'onglet Sources. Par exemple, si un site est en utilisant un réseau de diffusion de contenu (CDN), le contenu multimédia d'un site sera répertorié comme une source différente ici.
Le mode développeur Chrome vous permet de télécharger ce contenu directement ou d'effectuer plus analyse complexe du contenu.
Si vous souhaitez tester les performances d'un site, vous pouvez surveiller et enregistrer votre utilisation du réseau sous l'onglet Réseau. Cela affichera la vitesse, la taille et le type de requêtes réseau effectuées entre votre navigateur et le site.
Par exemple, lorsqu'une page se charge pour la première fois, le site chargera le contenu de la page lui-même, mais il peut aussi demander des données à partir de bases de données tierces. Par exemple, lorsque vous vous connectez, cela peut interroger une base de données qui apparaîtrait comme une requête réseau ici.
Vous pouvez analyser cela plus en détail sous l'onglet Performance, 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 est réputé pour être dur sur la mémoire de votre PC. Vous pouvez donc tester l'utilisation de la mémoire JavaScript de votre site sous l'onglet Mémoire. Différents profils de test Chrome peuvent être utilisés ici, avec plus d'informations sur ces tests au Page de documentation de Chrome DevTools.
Pour une analyse plus approfondie également du contenu de votre site comme pour tout stockage de navigateur utilisé (par exemple, pour consigner des données), vous pouvez effectuer une recherche dans l'onglet Application. Vous pouvez afficher les informations sur les cookies du site ici dans la section Cookies, ou effacer le stockage utilisé en cliquant sur l'option Effacer le stockage.
Si vous vous inquiétez de la sécurité de votre site, vous pouvez vérifier ses performances dans l'onglet Sécurité. Cela vous donnera un aperçu rapide de l'analyse de sécurité de Chrome pour une page, y compris si la page dispose d'un certificat SSL correct et fiable.
Si vous souhaitez générer un rapport sur votre site les performances, y compris si elles répondent aux normes habituelles des utilisateurs et si les performances du site peuvent affecter l'optimisation des moteurs de recherche, vous pouvez cliquer sur l'onglet Phare. Cela propose des paramètres que vous pouvez cocher ou décocher pour votre rapport. Cliquez sur Générer le rapportpour créer le rapport à afficher.
Cela raye à peine la surface du potentiel que Chrome le mode développeur 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 pour tester et analyser des sites Web. Des tiers Extensions Chrome pour les développeurs Web sont également disponibles pour vous aider à tester davantage votre site.
Si vous êtes création d'un site Web de base, le passage au mode développeur Chrome pourrait vous aider repérez 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 êtes aux prises avec les plantages de Chrome, vous devrez peut-être d'abord réinitialiser ou réinstaller votre navigateur.