10 astuces de console Chrome que vous devez savoir

Tester un site Web ou une application Web et son interface utilisateur peut être délicat et prendre du temps, surtout si vous n'utilisez pas les outils de débogage appropriés tels que la console Chrome, également appelée outils de développement Chrome.

Presque tous les navigateurs Web prennent désormais en charge les outils de développement, mais Google semble plus déterminé à fournir le meilleur environnement pour un processus de débogage rapide.

Google a vraiment travaillé dur pour rendre Chrome DevTools aussi convivial que possible pour les développeurs. À tel point que la question n'est plus de savoir ce que vous pouvez faire en utilisant ces outils de développement intégrés directement dans le navigateur Google Chrome. Il s'agit maintenant de savoir ce que vous savez sur la console chromée.

Certaines fonctionnalités spécifiques de la console Chrome ont tendance à fasciner tous les développeurs. Certains pensent que c'est le meilleur outil de développement pour rechercher comment une partie d'un site Web est créée, y compris les scripts et le style. D'autres développeurs le trouvent plus utile pour suivre les balises de lien, le rendu du navigateur, les requêtes et réponses HTTP, les points de rupture de page, tester de nouvelles fonctionnalités ou de nouveaux scripts, etc.

Cet article effleurera à peine la surface de ce qui peut être fait avec la console. Pour un aperçu complet des fonctionnalités et du manuel, rendez-vous sur la page officielle des développeurs Google.

Comment ouvrir la console Chrome

Le moyen conventionnel d'accéder à Chrome DevTools consiste à cliquer sur le bouton Personnaliser et contrôler Google Chrome (les trois points verticaux dans le coin supérieur droit de la barre de menus du navigateur Chrome), à ​​faire défiler vers le bas jusqu'à plus d'outils et à sélectionner les outils de développement .

Raccourci clavier : Ctrl + Maj + I pour Windows et Cmd + Options + I pour Macintosh.

Vous pouvez également accéder à la console Chrome en cliquant avec le bouton droit sur n'importe quel élément d'un site Web et en sélectionnant l'option Inspecter l'élément.

Le panneau de la console Chrome apparaîtra sur le côté ou en bas de la fenêtre du navigateur si vous utilisez l'une des méthodes mentionnées ci-dessus. Vous pouvez déverrouiller le panneau de la console chromée dans une fenêtre séparée ou modifier la position du dock en cliquant sur le bouton Personnaliser et contrôler Devtools (les trois points verticaux dans le coin supérieur droit du panneau DevTools) et en sélectionnant votre position préférée à côté de l'option côté Dock . .

10 astuces pour la console Chrome que tout développeur devrait connaître

1. Simulez des appareils mobiles

L'un des aspects les plus importants des tests de sites Web consiste à déterminer la réactivité de la conception de vos pages et leurs points de rupture par rapport aux différents appareils. Vous pouvez utiliser Chrome DevTools pour tester les requêtes multimédias ou connaître la résolution à laquelle un site Web se briserait afin de pouvoir définir où appliquer une requête multimédia en simulant différents appareils mobiles.

Pour accéder au mode appareil de la console Chrome, où vous pouvez simuler différents appareils mobiles, cliquez sur la barre d'outils basculer l'appareil (la petite icône de téléphone et de tablette) dans le coin supérieur gauche du panneau de la console Chrome. Cela changerait la fenêtre du site Web en mode réactif.

Raccourci clavier : Ctrl + Maj + M (Cmd + Maj + M).

Un ensemble d'outils qui apparaîtraient dans la fenêtre du site Web vous permettraient de choisir les appareils et la résolution que vous souhaitez simuler, ainsi que d'ajouter des appareils mobiles non disponibles dans la liste.

2. Inspectez l'activité du réseau

À l'aide de la console Chrome, vous pouvez inspecter l'activité réseau d'un site Web pour vous assurer que toutes les ressources sont téléchargées et téléchargées avec précision. Et aussi pour inspecter les propriétés de chaque ressource, telles que la taille de l'image, le contenu, les en-têtes HTTP, etc.

Cliquez sur l'onglet réseau dans la fenêtre DevTools. Cela ouvrira le panneau réseau avec un journal vide car l'outil n'enregistre l'activité du réseau que lorsqu'il est ouvert. Appuyez sur Ctrl + R (Cmd + R) ou rechargez le site Web pour afficher l'activité du journal réseau de votre page.

Vous devriez voir un tableau en bas de la page montrant un journal chronologique de l'activité réseau de votre page. Pour afficher plus d'informations sur chaque ressource, cliquez sur les paramètres réseau (l'icône d'engrenage à droite) et cochez la case à côté pour utiliser les grandes lignes de demande d'icône.

Vous pouvez améliorer les performances de chargement de la page en déboguant les erreurs dans les journaux réseau pour résoudre des problèmes tels que la compression des fichiers.

3. Limitation du réseau

Semblable à la simulation d'appareils mobiles, vous pouvez utiliser la console Chrome pour simuler différentes vitesses Internet. Cette fonctionnalité peut être utile si vous souhaitez tester les performances du site Web à une vitesse spécifique, par exemple sur un appareil mobile 3G.

Dans la barre de menu du panneau Réseau, cliquez sur en ligne (limitation) et sélectionnez la vitesse Internet de votre choix. Pour ajouter un profil réseau personnalisé, cliquez sur l'option d' ajout dans le menu déroulant et entrez votre vitesse de téléchargement et de téléchargement préférée.

4. Ajouter un extrait de script

Vous pouvez ajouter votre code aléatoire préféré n'importe où sur votre site Web à l'aide de la fonction d'extraits. Au lieu d'avoir à écrire le même code encore et encore, cette fonctionnalité vous permettra d'enregistrer un extrait et d'accéder au code à tout moment.

Cliquez sur l'onglet sources >> extraits >> nouveaux extraits. Cela créera un nouveau fichier dans le volet des extraits. Renommez votre extrait et écrivez votre petit bloc de code JavaScript dans la fenêtre à côté du volet. Pour enregistrer l'extrait, cliquez avec le bouton droit sur le fichier d'extrait, cliquez sur enregistrer sous et choisissez votre répertoire préféré. Vous pouvez également accéder à cette fonctionnalité via le menu de commandes.

Utilisez Ctrl + Maj + P ou Cmd + Maj + P (Mac) pour ouvrir le menu de commandes, tapez des extraits et cliquez sur créer de nouveaux extraits .

Utilisez Ctrl + Entrée ou Cmd + Entrée pour exécuter le code ou cliquez sur l'icône Exécuter l'extrait sous la fenêtre de texte.

5. Prendre des captures d'écran d'un site Web

Chrome DevTools vous permet de prendre des captures d'écran de différentes parties d'un site Web. Ouvrez le menu de commandes en utilisant Ctrl + Maj + P ou Cmd + Maj + P (Mac) et tapez capture d'écran . Sélectionnez le type de capture d'écran que vous souhaitez. DevTool fera automatiquement une capture d'écran et téléchargera l'image en tant que fichier .png dans votre répertoire de téléchargements par défaut.

6. Activez le mode d'édition de texte de contenu

Vous pouvez modifier le contenu de votre page directement dans la fenêtre du navigateur à l'aide de la console Chrome. Cliquez sur l'onglet de la console et activez la fonctionnalité à l'aide du code suivant.

document.body.contentEditable = 'true';

Ou

document.designMode='on' ;

Appuyez sur la touche Entrée pour activer la fonction.

7. Sélecteur de couleurs

Il est plus facile de manipuler les couleurs sur votre site Web à l'aide du sélecteur de couleurs qui dispose d'une gamme d'outils. La pipette vous permet de choisir directement les couleurs des pages Web et de les définir sur vos propriétés de couleur. Vous pouvez ajuster la teinte et l'opacité de vos couleurs à l'aide du sélecteur de couleurs et convertir entre RGBA, HEX et HSLA en quelques clics.

Pour accéder au sélecteur de couleurs, sélectionnez l'élément dont vous souhaitez changer la couleur. Cela devrait ouvrir l'onglet de l'élément et le volet de la feuille de style à droite. Recherchez la propriété CSS de l'élément et cliquez sur la case de couleur appropriée pour ouvrir le sélecteur de couleurs.

8. Modifier la propriété CSS

La console Chrome offre un accès facile pour ajuster la propriété CSS de n'importe quel élément sur un site Web. Cliquez sur le bouton de sélection (Ctrl + Maj + C ou Cmd + Options + C), passez votre curseur sur l'élément que vous souhaitez modifier pour un aperçu des propriétés de l'élément, cliquez sur l'élément.

Cela devrait mettre en évidence la racine HTML de l'élément sous le volet Élément et les propriétés CSS sur le côté droit du panneau DevTools. Accédez au volet Styles et faites défiler jusqu'aux propriétés que vous souhaitez modifier pour les modifications en temps réel. Vous pouvez afficher toutes les propriétés de n'importe quel style en appuyant sur Ctrl + clic (Cmd + clic) sur la propriété.

9. Point de rupture JavaScript

Il est largement plus facile de trouver et de corriger les erreurs JavaScript à l'aide des points d'arrêt qu'avec la méthode console.log (). En effet, dans cette dernière méthode, vous devez accéder manuellement au code source et insérer les console.log() dans le code correspondant avant de recharger la page pour consulter les journaux. Les points d'arrêt ne vous obligent pas nécessairement à comprendre la structure du code avant de pouvoir vous arrêter sur le code pertinent.

Cliquez sur l'onglet Source > page et sélectionnez le script que vous souhaitez déboguer dans le dossier spécifique. Vous pouvez définir des points d'arrêt dans Chrome DevTools en cliquant simplement sur le numéro de ligne sur lequel vous souhaitez mettre le script en pause dès qu'il s'exécute sur cette ligne.

Vous pouvez également utiliser l'écouteur d'événement dans le volet du débogueur pour définir un point de rupture en référence à l'événement spécifique que vous ciblez dans le script, tel qu'un clic de souris ou une lecture multimédia. Actualisez la page à l'aide de Ctrl + R (Cmd + R) et utilisez les outils du volet du débogueur pour déplacer les étapes.

10. Stocker l'élément HTML en tant que variable JS globale

Que vous inspectiez un objet complexe connecté à la console ou un élément DOM sur un site, vous pouvez automatiquement stocker une référence à ceux-ci globalement. Ceci est très pratique lors du débogage car vous pouvez simplement les inspecter en tant que variable globale.

Cliquez avec le bouton droit de la souris sur l'objet dans la console ou sur le bloc HTML d'un élément dans l'onglet Élément et sélectionnez "stocker en tant que variable globale" dans le menu déroulant. La console Chrome stockera automatiquement l'élément en tant que variable globale et le rendra disponible dans la console. Le nom de la variable sera "tempN", où N représente le nombre de fois que vous avez stocké des variables en utilisant cette méthode. La première variable sera évidemment nommée « temp1 » et la seconde « temp2 ».

Conclusion

La compétence et la rapidité sont des attributs de la familiarité avec leurs outils, et cela est profondément ancré dans Chrome DevTools. Plus vous avez d'informations, mieux et plus vite vous utiliserez les outils, ce qui, à son tour, réduira le temps passé à déboguer.

Cela pourrait valoir plus de créditer un petit pourcentage de votre temps cette semaine et la suivante pour lire la documentation, en commençant par les aspects de débogage qui vous prennent souvent le plus de temps. Nous ne serons pas surpris si les conseils de console chromés mentionnés ci-dessus ne mentionnent pas votre fonctionnalité préférée. Veuillez nous en informer dans le commentaire ci-dessous.