Décongestionner votre base de code avec des points de connexion dans Chrome DevTools

Découvrez comment vous pouvez utiliser une nouvelle fonctionnalité de Chrome DevTools pour nettoyer votre base de code et vous débarrasser de nombreux appels à console.log ().

En tant que développeurs, nous avons toujours besoin de connecter certaines parties de notre code à la console. Les raisons pour lesquelles nous nous connectons sont infinies; C’est donc un processus dont nous ne pouvons nous débarrasser facilement. Par conséquent, si nous devons nous connecter, nous devrons trouver un meilleur moyen de le faire. Dans cet article, nous expliquerons et montrerons comment vous pouvez utiliser une nouvelle fonctionnalité de Chrome DevTools pour nettoyer votre base de code en éliminant de nombreux appels console.log () .

Que sont les points de connexion? 19659004] En termes simples, Logpoints est une nouvelle fonctionnalité de Chrome DevTools qui vous permet de consigner des messages sur la console sans encombrer votre code avec de nombreux appels console.log () . Logpoint ne remplace pas console.log () c'est simplement un nouveau moyen plus intelligent de consigner des messages sur la console.

Comment ça marche

Pour consigner quelque chose sur la console à l'aide de la fonction Logpoint , vous cliquez avec le bouton droit de la souris sur sur le numéro de la ligne sur laquelle vous souhaitez enregistrer le message. affiché pour la sélection. Cliquez sur l'option Ajouter un point de journalisation surlignée pour charger l'éditeur de points d'arrêt.

Dans l'éditeur de point d'arrêt, vous définissez votre message de journal. L'éditeur de journal prend des données de tout type afin que vous ne soyez pas limité à l'enregistrement de chaînes et d'entiers. Vous pouvez consigner des objets et des tableaux, ainsi que tout ce que vous consignez avec le modèle console.log () .

Ici, nous enregistrons tout le TodoApp . variable. Vous avez peut-être remarqué que nous avons placé la variable entre accolades sous forme d'objet. Nous pouvons ainsi déconnecter son nom et sa valeur dans la console. Pour en savoir plus sur cette syntaxe, consultez les objets de journal et valeur de propriété d'objet .

Cliquez sur la touche Entrée de votre clavier pour enregistrer le point de connexion.

Le badge orange de la ligne 74 représente ici un point de connexion. Ainsi, lors de l'exécution suivante de la ligne, DevTools enregistrera le résultat de l'expression sur la console. Voici la sortie:

Conclusion

Dans cet article, nous avons montré comment vous pouvez décongestionner votre code en remplaçant tous les appels console.log () par Logpoints sur le navigateur. Cela rend votre code beaucoup plus propre et réduit les tâches liées à la journalisation des données pour votre application. Cet article a été inspiré par la récente annonce de développeurs Google sur Logpoint. N'hésitez pas à consulter la documentation sur pour plus d'informations.

Personnalisation de vos journaux de console

Intéressé par d'autres moyens, vous pouvez améliorer votre utilisation des journaux dans DevTools? Lire ces articles à venir:

Pour plus d'informations sur la création d'excellentes applications Web

Vous souhaitez en savoir plus sur la création d'excellentes interfaces utilisateur? Découvrez Kendo UI – notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux planificateurs et aux cadrans.