Home-theater-designers
Chrome DevTools est un atout essentiel pour les développeurs. Alors que d'autres navigateurs offrent des outils de dépannage assez pratiques, 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 est simple, mais vous devez comprendre son fonctionnement pour en tirer le meilleur parti.
Comment fonctionnent les outils de développement Chrome
Chrome DevTools vous permet de résoudre les problèmes sur un site Web via sa console d'erreur et d'autres outils de débogage et de surveillance. L'utilisation de DevTools expose les failles frontales et vous permet de surveiller l'apparence de votre site Web sur les appareils mobiles et les tablettes.
Avec DevTools, vous pouvez effectuer des modifications en temps réel sur le code d'un site Web, comme JavaScript, HTML et CSS, et obtenir des résultats instantanés de vos modifications.
Les modifications que vous apportez via les DevTools n'affectent pas le site Web de manière permanente. Ils n'affichent que temporairement le résultat attendu comme si vous les aviez appliqués au code source réel. Cela vous permet de trouver des moyens de charger votre site Web beaucoup plus rapidement et de corriger plus facilement les bogues.
Comment accéder aux outils de développement Chrome
Vous pouvez accéder à Chrome DevTools de plusieurs manières. Pour ouvrir les outils de développement avec la méthode de raccourci sur Mac OS, appuyez sur Cmd + Opt + I . Si vous utilisez le système d'exploitation Windows, appuyez sur le Ctrl + Maj + I touches de votre clavier.
Vous pouvez également accéder aux outils de développement Chrome en cliquant sur les trois points dans le coin supérieur droit de l'écran. Se diriger vers Plus d'outils et sélectionnez Outils de développement . Une autre option consiste à cliquer avec le bouton droit sur la page Web et à cliquer sur le Inspecter option.
Utilisation des outils de développement Chrome pour le diagnostic de sites Web
Chrome DevTools offre plusieurs façons de modifier et de dépanner une page Web. Jetons un coup d'œil à certaines des façons dont DevTools peut vous aider.
Voyez à quoi ressemble votre site Web sur un smartphone
Une fois que vous avez basculé votre navigateur Chrome en mode développeur, il affiche une version demi-taille de votre page Web. Cependant, cela ne vous donnera pas une vue réelle de ce à quoi cela ressemblerait 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'écran mobile.
Pour accéder à cette option, activez le Inspecter mode. Ensuite, cliquez sur le Sensible dans le coin supérieur gauche des DevTools et sélectionnez votre appareil mobile préféré. La page Web s'affiche ensuite et s'ajuste pour s'adapter à la taille de l'appareil mobile que vous avez sélectionné.
comment désactiver les données cellulaires pour des applications spécifiques dans Android
Accéder aux fichiers sources d'une page Web
Vous pouvez accéder aux fichiers qui composent une page Web via Chrome DevTools. Pour accéder à ces fichiers, cliquez sur le Sources dans la partie supérieure du menu DevTools. Cela expose le système de fichiers du site Web et vous permet également de l'éditer.
Vous pouvez également rechercher des fichiers source, ce qui peut être utile lorsque vous avez affaire à une page Web contenant de nombreuses ressources. Pour rechercher un fichier source via DevTools, cliquez sur le Chercher option juste au-dessus de la console.
Cependant, si vous ne trouvez pas le Chercher option, une meilleure alternative consiste à utiliser des raccourcis clavier. Sous Mac OS, appuyez sur le Cmd + Opt + F touches pour rechercher un fichier source. Si vous utilisez le système d'exploitation Windows, appuyez sur le Ctrl + Maj + F pour accéder à la barre de recherche du fichier source.
Effectuer des modifications en direct sur une page Web
L'un des principaux objectifs de l'utilisation des DevTools est d'effectuer un fausse modification instantanée des éléments sur une page Web . Une fois que vous êtes passé aux outils de développement, vous pouvez modifier le contenu HTML d'un site Web en cliquant sur le bouton Éléments option. Ensuite, cliquez avec le bouton droit sur n'importe quel point auquel vous souhaitez appliquer des modifications dans l'éditeur de code et sélectionnez Modifier en HTML .
Pour modifier les propriétés CSS qui ne sont pas en ligne, sélectionnez Sources . Ensuite, sélectionnez le fichier CSS que vous souhaitez modifier. Placez votre curseur sur la ligne de votre choix dans la console de code pour effectuer une modification en direct. Cela vous donne un retour instantané sur tous les changements de style que vous appliquez à la page Web.
Notez que lorsque vous modifiez une page via les 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. L'édition via DevTools n'affecte ni le bon fonctionnement ni l'utilisation de ce site Web pour les autres utilisateurs.
Déboguer le code JavaScript avec la console DevTools
L'un des meilleurs moyens de déboguer JavaScript consiste à utiliser les outils de développement de Chrome. Il vous donne un rapport direct sur les scripts invalides ainsi que l'emplacement exact du bogue.
Il est recommandé de toujours garder DevTools ouvert lors de la conception d'un site Web avec JavaScript. Par exemple, exécuter le console.log() La commande de JavaScript sur un ensemble d'instructions affiche le résultat de ce journal dans la console DevTools si le programme s'exécute avec succès.
Par défaut, la console signale tout problème JavaScript sur votre site Web. Vous pouvez trouver la console dans la partie inférieure des DevTools ou y accéder en cliquant sur le Console en haut de la fenêtre Chrome DevTools.
Surveiller le chargement des ressources à partir d'une base de données
En plus de déboguer JavaScript, la console peut également vous donner un détail des 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 déboguer les problèmes de backend, il vous indique toujours quelles ressources renvoient un 404 erreur après avoir exécuté une requête de base de données de ces éléments.
En relation: Erreurs de site Web courantes et ce qu'elles signifient
Changer l'orientation des outils de développement Chrome
Pour modifier la position des outils de développement Chrome, cliquez sur les trois points de menu dans les DevTools (pas le principal sur le navigateur). Sélectionnez ensuite votre position préférée dans le Côté quai option.
Installer les extensions Chrome DevTools
Vous pouvez également installer des extensions spécifiques à la langue ou au framework qui fonctionnent avec Chrome DevTools. L'installation de ces extensions vous permet de déboguer votre page Web plus efficacement.
Vous pouvez accéder à une liste des extensions disponibles pour Chrome DevTools dans Chrome Extensions DevTools en vedette Galerie.
Vérifier les problèmes de sécurité sur un site Web
Chrome DevTools vous permet d'évaluer le niveau de sécurité de votre site Web, en fonction de paramètres tels que la disponibilité de certificats de sécurité Web et à quel point la connexion est sécurisée, entre autres. Pour vérifier si votre site Web est sécurisé, cliquez sur le bouton Sécurité option en haut des DevTools.
Les Sécurité L'onglet vous donne un aperçu des détails de sécurité de votre site Web et vous indique les menaces potentielles.
Auditez votre site Web
Chrome DevTools dispose d'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 fonction, sélectionnez le Phare en haut de la fenêtre DevTools. Ensuite, sélectionnez les paramètres que vous souhaitez vérifier, puis cochez soit le Mobile ou Bureau options pour voir comment votre page Web fonctionne sur différentes plates-formes.
Ensuite, cliquez sur Générer un rapport pour exécuter une analyse de votre page Web en fonction des paramètres que vous avez sélectionnés précédemment.
Vous pouvez également évaluer le temps d'exécution ou les performances de chargement d'un site Web en cliquant sur le bouton Performance option. Pour lancer un test, cliquez sur l'icône à côté du Cliquez sur le bouton d'enregistrement option pour effectuer une analyse d'exécution. Vous pouvez également cliquer sur le bouton de rechargement situé en dessous pour évaluer les performances du temps de chargement. Cliquer sur Arrêter pour arrêter l'analyseur et afficher les résultats.
Tirez parti des outils de développement Chrome
En fonction de vos besoins, Chrome DevTools vous permet de faire plus qu'un simple débogage de site Web. Heureusement, DevTools est facile à utiliser pour les programmeurs de tous niveaux. Vous pouvez même apprendre quelques bases du développement de sites Web en recherchant le code source des sites Web que vous visitez.
pourquoi le chrome prend-il autant de mémoire
Vous pourriez également découvrir d'autres options dont nous n'avons pas parlé dans cet article. Alors, n'hésitez pas à jouer avec les fonctionnalités disponibles. En outre, peaufiner ces fonctionnalités ne nuit pas du tout à un site Web.
Partager Partager Tweeter E-mail Comment utiliser Chrome OS sur un Raspberry PiVous n'avez pas les moyens d'acheter un Chromebook ? Vous cherchez une alternative à Raspbian ? Voici comment installer une version de Chrome OS sur votre Raspberry Pi.
Lire la suite Rubriques connexes- l'Internet
- La programmation
- HTML
- Développement web
- JavaScript
- Google Chrome
Idowu est passionné par tout ce qui concerne les technologies intelligentes et la productivité. Pendant son temps libre, il s'amuse avec le codage et passe à l'échiquier quand il s'ennuie, mais il aime aussi de temps en temps rompre avec la routine. Sa passion pour montrer aux gens la voie à suivre avec la technologie moderne le motive à écrire davantage.
Plus de Idowu OmisolaAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner