Création site Web 100% Gratuit

Chez nous, vous ne payez que nos abonnements de maintenance, la création de votre site est offerte.
*Offre valable jusqu’à fin novembre 2022

Comment utiliser les outils de développement de Google Chrome

Sep 15, 2022

article de blog

Qu’est-ce que les outils pour développeurs de Google Chrome ?

Chrome fournit un certain nombre d’outils à utiliser dans le navigateur, grâce auxquels vous pouvez effectuer une analyse de n’importe quelle page web.
Vous pouvez également apporter des modifications au code et voir le résultat immédiatement.
La grande opportunité qui vous est offerte est donc de repérer à la volée tout problème sur votre site et d’essayer de le résoudre rapidement.
Vous pouvez alors corriger votre site en toute sécurité.
De plus, les outils de développement de Chrome peuvent être utilisés sur n’importe quel site web, pas seulement le vôtre. Vous pouvez donc essayer d’apporter des modifications à vos sites préférés pour voir ce que vous pouvez réaliser.
Oui, vous pouvez même le faire sur le site de SOS WP !
Et maintenant, laissez-moi vous montrer comment ça marche.

Comment accéder aux outils de développement de Chrome

Il existe plusieurs façons d’accéder à cet outil.
Cliquez avec le bouton droit de la souris sur le point de la page que vous souhaitez analyser, puis cliquez sur Inspecter;Utilisez la combinaison de touches CTRL + Shift + C (Windows) ou Command + Option + C (Mac);Cliquez sur le menu formé par les trois points dans le coin supérieur droit (Personnaliser et vérifier Google Chrome) puis allez dans Autres outils > Outils du développeur. ; .
Vous pouvez utiliser la méthode qui vous convient le mieux.
L’écran qui s’ouvre ressemble à ceci :

Comme vous pouvez le constater, il y a plusieurs sections et de nombreuses options. Dans ce guide, nous allons passer en revue les parties les plus utiles pour le développement de votre site.
Si vous souhaitez étudier l’outil plus en détail, je vous renvoie au guide officiel des outils de développement de Chrome.

Les fonctions des outils de développement de Chrome

Voici les panneaux que vous trouverez dans les outils de développement :
Mode appareil, à gauche, avec l’aperçu de votre page ; Éléments, pour analyser et corriger votre code ; Console, pour afficher les messages JavaScript ; Sources, pour déboguer JavaScript ; Réseau, pour déboguer le réseau ; Performances, pour analyser le temps de chargement ; Mémoire, pour savoir combien de mémoire est occupée ; Application, pour analyser les applications web progressives, le cache, les cookies, etc. ; Sécurité, pour détecter les problèmes de sécurité tels que ceux liés au certificat ; Audits, pour lancer une analyse avec LightHouse .
Je ne vais pas expliquer chaque fonction en détail, comme je l’ai déjà mentionné, mais voyons quelles sont celles qui pourraient être les plus utiles pour le développement de votre site Web.

La fonction la plus pratique des outils de développement de Chrome et celle à laquelle vous aurez certainement le plus souvent recours est le mode appareil. .
En effet, dans la partie gauche de l’écran, vous verrez votre site en format mobile.
Dans cette section, vous pouvez interagir avec votre site : vous pouvez cliquer sur des liens, faire défiler la page, remplir des formulaires, etc.
La première option du menu situé au-dessus de l’aperçu vous permet de choisir entre différents dispositifs.
De cette façon, votre site sera mis à l’échelle pour s’adapter à l’écran de l’appareil choisi, comme l’iPhone X, le Galaxy S5, l’iPad et d’autres. En cliquant sur Modifier, vous pouvez choisir parmi de nombreux autres modèles de smartphones.
En sélectionnant Responsive, en revanche, vous pouvez faire glisser le côté droit pour redimensionner la largeur et voir ainsi si votre site est réellement « fluide », c’est-à-dire s’il s’adapte à tout type d’écran. c’est-à-dire s’il s’adapte sans problème à tout type d’écran.

À côté du premier élément, vous aurez plutôt des chiffres indiquant respectivement la largeur et la hauteur, de sorte que vous pouvez définir la valeur que vous souhaitez.
Le dernier symbole de cette section vous permet de passer du mode portrait au mode paysage, afin que vous puissiez tester vos pages en utilisant n’importe quelle orientation du dispositif.

Le panneau Éléments vous permet d’intervenir dans le code de votre site.
En haut, vous verrez le code HTML, et en bas, vous verrez le code CSS, car l’onglet Styles est sélectionné par défaut.
Ces sections sont modifiables, vous pouvez donc apporter toutes les modifications que vous souhaitez et après avoir appuyé sur Entrée, vous verrez le résultat dans l’aperçu.
Dans l’image ci-dessous, par exemple, j’ai changé notre bouton « Go to Guides » d’orange à vert et j’ai changé le texte en « Read Guides ».

Dans le panneau Console des outils de développement de Chrome, vous pourrez entrer du code JavaScript.
Double-cliquez sur la ligne vide, indiquée par le symbole >, pour activer le curseur et commencer à taper.
Les développeurs seront également facilités dans leur tâche par les suggestions automatiques qui apparaîtront dès que vous commencerez à taper.

Dans l’aperçu, vous verrez immédiatement le résultat de ce que vous avez saisi.
En outre, en sélectionnant le bouton Afficher la barre latérale de la console, vous pourrez voir tous les messages et les éventuelles erreurs.
En sélectionnant tous les messages, vous aurez alors une vue complète de ce qui se passe sur votre page.
Supposons que vous ayez des problèmes avec un plugin.
Si vous contactez le support, il est probable qu’il vous demande de lui envoyer le contenu de cette section.
Il suffit de le copier et de le coller dans un simple fichier texte et de le leur envoyer. Dans tous les cas, respectez leurs instructions.

Le panneau Sources est utile pour déboguer les problèmes de JavaScript.
Pour comprendre comment cela fonctionne, vous pouvez utiliser la démo de débogage simple et utile fournie par Google.
Il existe deux champs dans lesquels vous pouvez saisir des chiffres. Le bouton ci-dessous devrait effectuer une addition entre les deux nombres que vous avez saisis, mais quelque chose ne fonctionne pas.
Utilisez le panneau « Sources » pour trouver où se trouve l’erreur et la corriger.

Le panneau Réseau vous permet également d’effectuer un débogage, par exemple pour vérifier que vos ressources sont chargées ou téléchargées correctement.
Cet outil vous permet également de vérifier les en-têtes HTTP, le contenu, la taille de vos fichiers.

De là, vous pouvez analyser en détail tout ce qui se passe, milliseconde par milliseconde, sur votre page.
Je vous suggère d’utiliser la fonction Performance en mode incognito, afin d’obtenir des résultats plus fiables.
Appuyez sur le bouton d’enregistrement (le point gris) et naviguez sur votre site pendant quelques secondes, puis appuyez sur Stop.
La première partie du panneau vous montrera des graphiques très détaillés des heures de chaque action qui a eu lieu sur votre site.
Si la case Capture d’écran a été activée, elle vous montrera également la capture d’écran correspondant à chaque moment.
En dessous, cependant, vous trouverez un graphique montrant combien de temps le test a duré, dans mon cas environ 33 secondes, et combien de temps il a fallu aux scripts pour se charger et s’exécuter.

Avec le panneau Mémoire, vous pouvez connaître la quantité de mémoire occupée par votre page, ce qui vous permet de comprendre les raisons pour lesquelles, par exemple, elle perd en performance après un certain temps d’ouverture ou se plante complètement.

La fonction Application vous permet d’inspecter toutes les ressources qui sont chargées, telles que les informations de session, les cookies, les images, les feuilles de style, etc. Dans cette section, la fonction Manifest est intéressante, avec laquelle vous pouvez vérifier ce qui se passe lorsqu’un utilisateur ajoute votre site à la page d’accueil de son smartphone.
C’est un bon moyen de tester votre application créée avec des systèmes tels que Super Progressive Web Apps .

Grâce à la fonction d’analyse de la sécurité que vous trouverez dans les outils de développement de Chrome, vous pouvez vérifier les éventuels problèmes liés à votre certificat SSL ou au contenu mixte (ressources https contenant des ressources http).
En fait, vous serez en mesure de déterminer exactement quelles ressources http sont à l’origine du problème et de le résoudre facilement.
Par exemple, il peut arriver que vous ayez correctement configuré votre site en https, mais que vous ayez ajouté une image en utilisant son URL http.
Avec cet outil, vous saurez en un rien de temps ce qu’est l’image http et il vous suffira d’ajouter un s au code.

La plupart des panneaux que nous avons vus jusqu’à présent sont certainement très techniques et vous ne les utiliserez probablement pas tous si vous n’avez pas de connaissances particulières en programmation.
Mais voyons maintenant quelque chose d’intéressant et qui pourrait être utile à tous.
Le panneau Audits est l’une des fonctions les plus utiles des outils de développement de Chrome pour quiconque souhaite analyser son site Web, même sans être un grand expert.
Il s’agit, en fait, d’une version simplifiée de l’outil PageSpeed, que vous utilisez probablement déjà pour analyser les performances de vos pages.
Voici comment le mettre en place :
Périphérique : choisissez d’analyser les performances du mobile ou du bureau ; Audits : choisissez les catégories à analyser ; Throttling : choisissez de simuler la 4G, d’appliquer réellement les performances de la 4G (le CPU est réellement ralenti et pas seulement une simulation), ou de laisser tout en l’état ; Clear storage : si actif, vous obtiendrez les performances d’un nouveau visiteur, si inactif, vous obtiendrez les résultats d’un visiteur qui revient.
Attendez que le rapport soit généré et vous trouverez des valeurs indiquant le niveau de performance de chacune des catégories que vous aviez précédemment sélectionnées.
En faisant défiler le panneau, vous verrez également toutes les suggestions pour améliorer les performances de votre page.

Outils du développeur Chrome : astuces

Les panneaux sur le côté droit de la fenêtre vous dérangent-ils ? Déplacez-les vers une autre fenêtre !
Allez dans le panneau Console ; Appuyez sur CTRL (ou Commande sur un Mac) + Shift + P ; Tapez undock et sélectionnez Undock into separate window ; ; Les panneaux s’ouvriront dans une fenêtre séparée.
Comment restaurer les panneaux dans la même fenêtre ?
Dans la fenêtre des panneaux, appuyez à nouveau sur CTRL (ou Commande sur un Mac) + Shift + P ; tapez dock ; ; choisissez le mode que vous préférez : en bas, à droite ou rétablir la dernière position utilisée.

Vous voulez analyser un élément particulier de la page, mais vous ne le trouvez pas dans le code ?
Cliquez sur le symbole représentant un carré avec une flèche, puis sélectionnez l’élément que vous voulez analyser.
Le panneau vous montrera immédiatement le point de code exact de cet élément.

La même chose se produit lorsque vous visitez une page Web, que vous cliquez avec le bouton droit de la souris sur un point précis et que vous sélectionnez Inspecter l’élément. .
Enfin, pour une meilleure lisibilité, essayez le thème sombre des outils de développement de Chrome. .
Accédez aux paramètres en appuyant sur la touche F1 et sous Préférences > Apparence > Thème, sélectionnez Sombre. .
Conclusion
Que pensez-vous de cet outil ?
Comme vous l’avez deviné, il s’agit de quelque chose de très complet pour les développeurs les plus exigeants, et vous avez peut-être été un peu effrayé d’entendre parler de fonctions aussi complexes.
En réalité, il contient aussi ces fonctions simples qui peuvent être utiles à tous, qu’il s’agisse de vérifier si le site est réellement réactif ou d’analyser les performances.
Avez-vous déjà utilisé des outils de développement ?
Pensez-vous que d’autres navigateurs disposent d’outils plus utiles ?
Laissez-nous votre avis dans un commentaire !

29 des meilleurs outils SEO pour auditer et surveiller votre site Web en 2022

L’objectif du marketing est de générer du trafic et des prospects qualifiés via le site Web de l’entreprise. C’est pourquoi, en tant que spécialistes du marketing, nous devons comprendre exactement ce que nous pouvons …

Besoin de plus de visiteurs sur votre site Web ? Revenez à l’essentiel

Lorsque vous entendez le terme « SEO » ou « optimisation pour les moteurs de recherche », pour qui pensez-vous que cela implique que vous devriez optimiser votre site ? Eh bien, je vais vous donner un indice : ce n’est pas pour les moteurs …

Demander l’indexation Google pour être trouvé plus rapidement

Lors de l’indexation, les moteurs de recherche comme Google enregistrent les pages web dans leur répertoire. Seul ce qui se trouve dans ce répertoire est affiché aux utilisateurs dans dans la recherche Google. …

Votre site 100% Gratuit

Profitez de votre création de site gratuite 👍
* Offre limitée jusqu’à fin Novembre

Vous souhaitez poster un commentaire ?

0 commentaires