Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web

Chrome DevTools est un atout essentiel pour les développeurs. Alors que d'autres navigateurs offrent des outils de dépannage très utiles, Chrome DevTools mérite votre attention en raison de son interface multifonctionnelle et de sa popularité.

Chrome est le navigateur le plus populaire pour les développeurs en raison de sa puissante suite d'outils de débogage. L'utilisation de Chrome DevTools C'est facile, mais vous devez comprendre comment cela fonctionne pour en tirer le meilleur parti.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Comment fonctionne Chrome DevTools

Chrome DevTools vous permet de résoudre les problèmes sur le site Web via un contrôleur d'erreur et d'autres outils de débogage et de surveillance. L'utilisation de DevTools détecte les vulnérabilités frontales et vous permet de surveiller l'apparence de votre site Web sur les appareils mobiles et les tablettes.

Avec DevTools, vous pouvez apporter des modifications en temps réel au code de votre site Web, comme JavaScript, HTML et CSS, et obtenir des résultats instantanés pour vos modifications.

Les modifications que vous effectuez via DevTools n'affectent pas de manière permanente le site Web. Il affiche uniquement le résultat attendu temporairement comme si vous l'aviez appliqué au code source réel. Cela vous permet de travailler de la manière dont vous pouvez Accélérez le chargement de votre site Web Et il est facile d'éliminer les erreurs sans affecter l'expérience réelle des visiteurs.

Comment accéder à Chrome DevTools

Vous pouvez accéder à Chrome DevTools de plusieurs manières. Pour ouvrir les outils de développement à l'aide de la méthode de raccourci Mac OS, appuyez sur Cmd + Opt + I. Si vous utilisez Windows, appuyez sur les touches Ctrl + Maj + I Sur votre clavier tout en vous concentrant sur la fenêtre Chrome.

Vous pouvez également accéder à Chrome DevTools en cliquant sur le bouton Plus Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro En haut à droite de l'écran. Aller à Plus d'outils Et sélectionnez Outils de développement. Une autre option consiste à faire un clic droit sur la page Web et à cliquer sur une option Vérifier.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Utilisez Chrome DevTools pour diagnostiquer le site Web

Chrome DevTools propose plusieurs méthodes pour modifier et dépanner une page Web. Jetons un coup d'œil à certaines des façons dont DevTools peut vous aider.

Découvrez à quoi ressemble votre site Web sur un smartphone

Une fois que vous passez le navigateur Chrome en mode développeur, il affiche une version demi-taille de votre page Web. Cependant, cela ne vous donnera pas une vision réelle de ce à quoi ressemblera le site Web sur un smartphone ou une tablette.

Heureusement, en plus de définir la taille de l'écran d'une page Web, Chrome DevTools vous permet également de basculer entre différents types et versions d'écrans mobiles.

Pour accéder à cette option, passez en mode Inspecter. Après cela, cliquez sur le menu déroulant Réagir En haut à gauche de l'écran de DevTools (en supposant que vous utilisez l'écran partagé vertical) et sélectionnez votre appareil mobile préféré. Ensuite, la page Web sera affichée et ajustée pour s'adapter à la taille de l'appareil mobile que vous avez sélectionné.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Accéder aux fichiers source de la page Web

Vous pouvez accéder aux fichiers qui composent la page Web via Chrome DevTools. Pour accéder à ces fichiers, cliquez sur une option Sources En haut du menu DevTools. Cela affiche le système de fichiers du site Web et vous donne également la possibilité de le modifier.

Vous pouvez également rechercher des fichiers source, ce qui peut être utile lorsque vous travaillez avec une page Web contenant de nombreuses ressources. Pour rechercher un fichier source via DevTools, cliquez sur l'option de recherche juste au-dessus de la console.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Cependant, si vous ne trouvez pas l'option de recherche, une meilleure alternative consiste à utiliser des raccourcis clavier. Sous Mac OS, appuyez sur les touches Cmd + Opt + F Pour rechercher un fichier source. Si vous utilisez Windows, appuyez sur la touche Ctrl + Maj + F Pour accéder à la barre de recherche pour trouver le fichier source.

Apportez des modifications directement à la page Web

L'un des principaux objectifs de l'utilisation de DevTools est de simuler la modification en temps réel d'éléments sur une page Web. Une fois que vous êtes passé aux outils de développement, vous pouvez modifier le contenu HTML du site Web en cliquant sur l'option Éléments. Ensuite, cliquez avec le bouton droit de la souris sur n'importe quel point auquel vous souhaitez appliquer les modifications dans l'éditeur de code et sélectionnez Modifier au format HTML.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Pour modifier les propriétés CSS non incorporées, sélectionnez Sources. Ensuite, sélectionnez le fichier CSS que vous souhaitez modifier. Placez le curseur sur la ligne de votre choix dans la console de code pour une modification directe. Cela vous donne un retour instantané sur les changements de style que vous appliquez à la page Web.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Notez que lorsque vous modifiez une page via DevTools, le rechargement de la page sur votre navigateur la ramène à sa forme d'origine, et la modification n'est visible que par vous. La modification via DevTools n'affecte pas le bon fonctionnement du site Web ou son utilisation par d'autres utilisateurs. reconnait moi Comment modifier du texte sur un site Web à l'aide de Google Chrome pour modifier son contenu.

Corrigez les erreurs de code JavaScript à l'aide de la console DevTools

L'un des meilleurs moyens de déboguer les erreurs JavaScript consiste à utiliser les outils de développement de Chrome. Il vous donne un rapport en direct du script invalide ainsi que l'emplacement exact de l'erreur.

C'est une bonne pratique de toujours garder DevTools ouverts lors de la conception d'un site Web avec JavaScript. Par exemple, il exécute la commande console.log () Le JavaScript contient un ensemble d'instructions pour afficher le résultat de ce journal dans la console DevTools s'il s'exécute correctement.

Par défaut, la console signale tous les problèmes JavaScript sur votre site Web. Vous pouvez trouver la console en bas de DevTools ou y accéder en cliquant sur l'option Console en haut de la fenêtre Chrome DevTools.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Surveiller le chargement des ressources à partir de la base de données

En plus de corriger les erreurs JavaScript, la console peut également vous fournir des détails sur les ressources qui ne se chargent pas correctement à partir de la base de données du site Web.

Bien que ce ne soit pas toujours le meilleur moyen de corriger les erreurs de backend, il vous indique toujours quelles ressources renvoient une erreur 404 après avoir exécuté une requête de base de données pour ces éléments.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Changer de direction pour Chrome DevTools

Pour modifier la position des outils de développement Chrome, cliquez sur Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro Dans DevTools (pas le bouton Plus Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro Navigateur principal). Sélectionnez ensuite l'emplacement préféré dans une option Côté quai.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Installer les extensions Chrome DevTools

Vous pouvez également installer des plugins de langage ou de framework qui fonctionnent avec Chrome DevTools. L'installation de ces plugins vous permet de déboguer votre page Web plus efficacement.

Vous pouvez accéder à la liste des plugins Chrome DevTools disponibles dans une galerie Plugins DevTools Présenté dans Chrome.

Vérifiez les problèmes de sécurité sur le site Web

Chrome DevTools vous permet d'évaluer une gamme de La sécurité de votre site Web , Sur la base de paramètres tels que la disponibilité des certificats de sécurité Web et la sécurité de la connexion, entre autres. Pour vérifier si votre site Web est sécurisé, cliquez sur une option Sécurité En haut de DevTools.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

L'onglet Sécurité vous donne un aperçu des détails de sécurité de votre site Web et vous informe de toute menace potentielle.

Vérifiez votre site Web

Chrome DevTools inclut une fonctionnalité qui vous permet de vérifier les performances globales de votre site Web en fonction de paramètres spécifiques.

Pour accéder à cette fonctionnalité, sélectionnez une option Lighthouse En haut de la fenêtre DevTools. Ensuite, sélectionnez les paramètres que vous souhaitez vérifier, puis sélectionnez les options Mobile ou Desktop pour voir comment votre page Web fonctionne sur les différentes plates-formes.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Ensuite, cliquez sur Générer un rapport pour effectuer une analyse de votre page Web en fonction des paramètres que vous avez précédemment sélectionnés.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Vous pouvez également évaluer la disponibilité d'un site Web ou les performances de téléchargement en cliquant sur une option Performance. Pour faire un test, cliquez sur l'icône à côté d'une option Cliquez sur le bouton d'enregistrement Pour effectuer une analyse d'exécution. Vous pouvez également cliquer sur le bouton Recharger en dessous pour évaluer les performances de temps de téléchargement. Cliquez sur Arrêter pour arrêter l'analyseur et afficher les résultats.

Comment utiliser Chrome DevTools pour résoudre les problèmes de site Web - WordPress Pro

Profitez de Chrome DevTools

En fonction de vos besoins, Chrome DevTools vous permet de faire plus que de corriger les erreurs de site Web. Heureusement, DevTools est facile à utiliser pour les programmeurs de tous niveaux. Vous pouvez également apprendre certaines des bases du développement de sites Web frontaux en recherchant le code source des sites Web que vous visitez.

Vous pouvez également découvrir d'autres options dont nous n'avons pas parlé dans cet article. Alors, n'hésitez pas à modifier les fonctionnalités disponibles. De plus, la modification de ces fonctionnalités ne nuit même pas un peu au site Web.

source
Aller au bouton supérieur