Dans ce tutoriel, vous apprendrez comment définir des points d'arrêt conditionnels dans les Outils de développement Chrome. Avec des points d'arrêt conditionnels, vous pouvez rendre le processus de debugging plus efficace en vous assurant que votre code s'arrête uniquement dans certaines conditions. Cela est particulièrement utile lorsque vous travaillez sur des pages avec de nombreuses interactions et que vous souhaitez vérifier l'exécution du code à des moments spécifiques.
Principales conclusions
- Les points d'arrêt conditionnels vous permettent de définir des conditions spécifiques auxquelles le débogueur doit arrêter le code.
- Vous pouvez utiliser n'importe quelle expression pour augmenter le contrôle sur le processus de debugging.
- Apprenez comment ajouter, modifier et supprimer des points d'arrêt, ainsi que découvrir d'autres types de points d'arrêt.
Guide étape par étape
Pour utiliser efficacement les points d'arrêt conditionnels, suivez ces étapes :
Pour définir un point d'arrêt, il vous suffit de cliquer sur le numéro de ligne à l'endroit où vous souhaitez arrêter le code. En le faisant, un point bleu apparaît, représentant le point d'arrêt.
En faisant un clic droit sur le point d'arrêt que vous venez de définir, un menu s'ouvre dans lequel vous pouvez choisir diverses options. Ici, vous pouvez également désactiver le point d'arrêt. Lorsque vous désactivez le point d'arrêt, il reste dans le code mais n'est plus actif.
Une fonctionnalité utile est l'option "Modifier le point d'arrêt". En la sélectionnant, vous pouvez ajouter une condition. Cela vous permet d'entrer une expression qui détermine quand le point d'arrêt doit être déclenché.
Il pourrait être utile, par exemple, de vérifier une variable comme count. Supposons que vous entrez count == 8. Cela signifie que le point d'arrêt ne sera déclenché que lorsque count atteint la valeur 8.
Pour confirmer la condition, appuyez sur "Entrée". Dans le code, le point d'arrêt est alors affiché en orange, avec un point d'interrogation pour indiquer qu'il s'agit d'un point d'arrêt conditionnel.
Actualisez maintenant la page. À ce stade, le débogueur ne devrait pas s'arrêter car la condition n'a ni été remplie ni vérifiée. Appuyez plusieurs fois sur le compteur pour l'augmenter.
Lorsque le compteur atteint la valeur qui satisfait la condition (dans notre cas, 8), vous verrez que le débogueur s'arrête, comme prévu.
Pour vérifier la condition actuelle, vous pouvez à nouveau cliquer sur "Modifier le point d'arrêt" et voir que la condition "count == 8" est active.
En appuyant à nouveau sur le compteur, le débogueur ne s'arrêtera plus, sauf si vous modifiez la condition.
Vous avez la flexibilité d'entrer n'importe quelle expression dans le champ de la condition. Par exemple, vous pourriez utiliser une condition indiquant que count est supérieur à 8.
Après avoir apporté la modification et actualisé la page, le débogueur s'arrêtera lorsque la condition est vraie.
À chaque appui sur le compteur, le débogueur s'arrêtera également si le compteur est désormais supérieur à 8.
Pour vérifier la condition à tout moment, vous pouvez à nouveau ouvrir "Modifier le point d'arrêt" et voir toutes les conditions actives.
En plus des points d'arrêt conditionnels, il existe également d'autres types tels que les points de log. Un point de log est une autre fonctionnalité utile qui vous permet de définir des conditions, mais au lieu de s'arrêter, une simple message est affiché, par exemple "true" ou "false", selon que la condition est remplie ou non.
Dès que tu recharges et cliques à nouveau, tu remarqueras que tu obtiendras "faux" ou "vrai" en fonction de l'état de la condition.
Il est important de comprendre ces différentes types de breakpoints, car ils peuvent t'aider à optimiser ton travail de débogage.
Pour gérer tous les breakpoints définis, il y a une vue d'ensemble où tu peux supprimer ou éditer des breakpoints existants. En cliquant sur un breakpoint spécifique, tu seras dirigé directement à l'endroit où le breakpoint est défini dans le code.
Résumé
Dans ce tutoriel, tu as appris comment utiliser efficacement les breakpoints conditionnels pour optimiser le processus de débogage dans tes applications web. Tu as vu comment ajouter, modifier et supprimer des breakpoints, ainsi que comment utiliser des types de breakpoints alternatifs.
Questions fréquemment posées
Quels sont les breakpoints conditionnels ?Les breakpoints conditionnels sont des breakpoints qui ne sont activés que lorsque certaines conditions sont remplies.
Comment définir un breakpoint conditionnel ?Clique avec le bouton droit sur un breakpoint et sélectionne "Modifier le breakpoint" pour ajouter une condition.
Que se passe-t-il si la condition du breakpoint n'est pas remplie ?Si la condition n'est pas remplie, le débogueur ne s'arrête pas à ce breakpoint.
Puis-je utiliser des Logpoints dans Chrome Developer Tools ?Oui, les Logpoints sont une alternative aux breakpoints où tu peux définir des conditions qui affichent simplement un message plutôt que de s'arrêter.
Quels autres types de breakpoints existent ?En plus des breakpoints conditionnels, il y a des breakpoints DOM et Fetch, qui définissent des points d'arrêt spécifiques pour les interactions avec le DOM ou les requêtes Fetch.
