Mettre en pause votre code avec des points d'arrêt

Sofia Emelianova
Sofia Emelianova

Utilisez des points d'arrêt pour suspendre votre code JavaScript. Ce guide décrit chaque type de point d'arrêt disponibles dans les outils de développement, et vous saurez quand l'utiliser et comment définir chaque type. Pour accéder à un tutoriel interactif sur le processus de débogage, consultez Premiers pas avec le débogage JavaScript dans les outils pour les développeurs Chrome.

Présentation des cas d'utilisation de chaque type de point d'arrêt

Le type de point d'arrêt le plus connu est la ligne de code. Les points d'arrêt de ligne de code inefficace à définir, surtout si vous ne savez pas exactement où chercher ou si vous travaillez avec un codebase volumineux. Vous pouvez gagner du temps lors du débogage en sachant comment et quand utiliser les autres types de points d'arrêt.

Type de point d'arrêtUtilisez cette option lorsque vous souhaitez ...
Ligne de codeEffectuez une pause sur une région de code exacte.
Ligne de code conditionnelleMettez en veille sur une région exacte du code, mais seulement lorsqu'une autre condition est vraie.
Point de journalisationConsignez un message dans la console sans suspendre l'exécution.
DOMArrêtez-vous sur le code qui modifie ou supprime un nœud DOM spécifique, ou ses enfants.
XHRMettre en pause lorsqu'une URL XHR contient un format de chaîne.
Écouteur d'événementsArrêtez-vous sur le code qui s'exécute après le déclenchement d'un événement, tel que click.
ExceptionFaites une pause sur la ligne de code qui génère une exception capturée ou non interceptée.
FonctionInterrompre chaque fois qu'une fonction spécifique est appelée.
Trusted Type (Type de confiance)Suspendez les cas de non-respect des règles Trusted Type.

Points d'arrêt de ligne de code

Utilisez un point d'arrêt de ligne de code lorsque vous connaissez la région exacte du code que vous devez examiner. Les outils de développement se mettent toujours en veille avant l'exécution de cette ligne de code.

Pour définir un point d'arrêt de ligne de code dans les outils de développement:

  1. Cliquez sur le panneau Sources.
  2. Ouvrez le fichier contenant la ligne de code sur laquelle vous souhaitez interrompre la lecture.
  3. Accédez à la ligne de code.
  4. À gauche de la ligne de code se trouve la colonne du numéro de ligne. Cliquez dessus. Une icône bleue apparaît sur en haut de la colonne des numéros de ligne.

Un point d'arrêt dans la ligne de code.

Cet exemple montre un point d'arrêt de ligne de code défini à la ligne 29.

Points d'arrêt de ligne de code dans votre code

Appelez debugger à partir de votre code pour marquer une pause sur cette ligne. Cela équivaut à une ligne de code point d'arrêt, sauf qu'il est défini dans votre code, et non dans l'interface utilisateur des outils de développement.

console.log('a');
console.log('b');
debugger;
console.log('c');

Points d'arrêt conditionnels de ligne de code

Utilisez un point d'arrêt conditionnel de ligne de code lorsque vous souhaitez arrêter l'exécution, mais uniquement lorsqu'une condition est remplie.

Ces points d'arrêt sont utiles lorsque vous souhaitez ignorer les coupures qui ne sont pas pertinentes dans votre cas, en particulier dans une boucle.

Pour définir un point d'arrêt de ligne de code conditionnel:

  1. Ouvrez le panneau Sources.
  2. Ouvrez le fichier contenant la ligne de code sur laquelle vous souhaitez interrompre la lecture.
  3. Accédez à la ligne de code.
  4. À gauche de la ligne de code se trouve la colonne du numéro de ligne. Effectuez un clic droit dessus.
  5. Sélectionnez Ajouter un point d'arrêt conditionnel. Une boîte de dialogue s'affiche sous la ligne de code.
  6. Saisissez votre condition dans la boîte de dialogue.
  7. Appuyez sur Entrée pour activer le point d'arrêt. Une icône orange avec un point d'interrogation apparaît au-dessus de la colonne des numéros de ligne.

Point d'arrêt conditionnel de ligne de code.

Cet exemple montre un point d'arrêt conditionnel de ligne de code qui ne s'est déclenché que lorsque x dépassait 10 dans une boucle à l'itération i=6.

Consigner les points d'arrêt de ligne de code

Utilisez des points d'arrêt de ligne de code des journaux (points de journalisation) pour consigner les messages dans la console sans interrompre l'exécution et sans encombrer votre code avec des appels console.log().

Pour définir un point de journalisation:

  1. Ouvrez le panneau Sources.
  2. Ouvrez le fichier contenant la ligne de code sur laquelle vous souhaitez interrompre la lecture.
  3. Accédez à la ligne de code.
  4. À gauche de la ligne de code se trouve la colonne du numéro de ligne. Effectuez un clic droit dessus.
  5. Sélectionnez Add logpoint (Ajouter un point de journalisation). Une boîte de dialogue s'affiche sous la ligne de code.
  6. Saisissez votre message de journal dans la boîte de dialogue. Vous pouvez utiliser la même syntaxe que pour un appel console.log(message).

    Par exemple, vous pouvez consigner:

    "A string " + num, str.length > 1, str.toUpperCase(), obj
    

    Dans ce cas, le message journalisé est:

    // str = "test"
    // num = 42
    // obj = {attr: "x"}
    A string 42 true TEST {attr: 'x'}
    
  7. Appuyez sur Entrée pour activer le point d'arrêt. Une icône rose avec deux points apparaît au-dessus de la colonne des numéros de ligne.

Un point de journalisation qui consigne une chaîne et une valeur de variable dans la console.

Cet exemple montre un point de journalisation à la ligne 30 qui enregistre une chaîne et une valeur de variable dans la console.

Modifier les points d'arrêt de ligne de code

Utilisez la section Points d'arrêt pour désactiver, modifier ou supprimer les points d'arrêt de ligne de code.

Modifier les groupes de points d'arrêt

La section Points d'arrêt regroupe les points d'arrêt par fichier, et les classe par numéro de ligne et de colonne. Les groupes vous permettent d'effectuer les opérations suivantes:

  • Pour réduire ou développer un groupe, cliquez sur son nom.
  • Pour activer ou désactiver un groupe ou un point d'arrêt individuellement, cliquez sur Case à cocher. à côté du groupe ou du point d'arrêt.
  • Pour supprimer un groupe, pointez dessus et cliquez sur J'étais pas loin..

Cette vidéo montre comment réduire des groupes et activer ou désactiver des points d'arrêt un par un ou par groupe. Lorsque vous désactivez un point d'arrêt, le panneau Sources rend transparent le repère situé à côté du numéro de ligne.

Les groupes disposent de menus contextuels. Dans la section Breakpoints (Points d'arrêt), effectuez un clic droit sur un groupe et choisissez:

Menu contextuel d'un groupe.

  • Supprimez tous les points d'arrêt dans le fichier (groupe).
  • Désactiver tous les points d'arrêt dans le fichier
  • Activer tous les points d'arrêt dans le fichier
  • Supprimez tous les points d'arrêt (dans tous les fichiers).
  • Supprimez les autres points d'arrêt (dans d'autres groupes).

Modifier les points d'arrêt

Pour modifier un point d'arrêt:

  • Cliquez sur Case à cocher. à côté d'un point d'arrêt pour l'activer ou le désactiver. Lorsque vous désactivez un point d'arrêt, le panneau Sources rend transparent le repère situé à côté du numéro de ligne.
  • Pointez sur un point d'arrêt, puis cliquez sur Modifier. pour le modifier et sur J'étais pas loin. pour le supprimer.
  • Lorsque vous modifiez un point d'arrêt, modifiez son type dans la liste déroulante de l'éditeur intégré.

    Modifier le type d'un point d'arrêt

  • Effectuez un clic droit sur un point d'arrêt pour afficher son menu contextuel, puis choisissez l'une des options suivantes:

    Menu contextuel d'un point d'arrêt.

    • Afficher le lieu.
    • Modifier la condition ou le point de journalisation.
    • Activez tous les points d'arrêt.
    • Désactiver tous les points d'arrêt.
    • Supprimer le point d'arrêt.
    • Supprimez les autres points d'arrêt (dans tous les fichiers).
    • Supprimez tous les points d'arrêt (dans tous les fichiers).

Regardez la vidéo pour voir comment modifier les points d'arrêt: désactiver, supprimer, modifier la condition, afficher l'emplacement dans le menu et modifier le type.

Ignorer les points d'arrêt avec "Ne jamais suspendre ici"

Utilisez un point d'arrêt de ligne de code Ne jamais faire une pause ici pour ignorer les pauses qui se produisent pour d'autres raisons. Cela peut être utile lorsque vous avez activé les points d'arrêt d'exception, mais que le débogueur ne cesse de s'arrêter sur une exception particulièrement bruyante que vous ne souhaitez pas déboguer.

Pour couper le son d'une coupure publicitaire:

  1. Dans le panneau Sources, ouvrez le fichier source et recherchez la ligne sur laquelle vous ne souhaitez pas interrompre.
  2. Cliquez avec le bouton droit sur le numéro de ligne dans la colonne des numéros de ligne à gauche, à côté de l'instruction à l'origine de la rupture.
  3. Dans le menu déroulant, sélectionnez Ne jamais suspendre ici. Un point d'arrêt orange (conditionnel) apparaît à côté de la ligne.

Vous pouvez également couper le son du point d'arrêt lorsque l'exécution est suspendue. Regardez la vidéo suivante pour découvrir le workflow.

L'option Ne jamais suspendre ici vous permet de couper le son des instructions du débogueur et de tous les autres types de points d'arrêt, à l'exception des points d'arrêt de ligne de code et des points d'arrêt de l'écouteur d'événements.

L'option Ne jamais mettre en pause ici peut échouer sur une ligne contenant plusieurs instructions si l'instruction à ne pas mettre en veille est différente de celle qui provoque la mise en veille. Dans le code mappé source, les emplacements des points d'arrêt ne correspondent pas tous à l'instruction d'origine à l'origine de l'interruption.

Points d'arrêt liés à la modification du DOM

Utilisez un point d'arrêt lié à une modification DOM lorsque vous souhaitez interrompre le code qui modifie un nœud DOM ou ses enfants.

Pour définir un point d'arrêt lié à une modification DOM:

  1. Cliquez sur l'onglet Elements.
  2. Accédez à l'élément pour lequel vous souhaitez définir le point d'arrêt.
  3. Effectuez un clic droit sur l'élément.
  4. Pointez sur S'arrêter sur, puis sélectionnez Modifications de sous-arborescence, Modifications d'attributs, ou Suppression des nœuds.

Menu contextuel pour créer un point d'arrêt lié à une modification DOM

Cet exemple illustre le menu contextuel permettant de créer un point d'arrêt lié à une modification DOM.

Vous trouverez la liste des points d'arrêt liés aux modifications DOM dans:

  • Elements > Volet Points d'arrêt DOM.
  • Sources > Volet latéral Points d'arrêt DOM.

Listes des points d'arrêt DOM dans les panneaux "Éléments" et "Sources"

Vous pouvez alors effectuer les opérations suivantes:

  • Activez-les ou désactivez-les avec Case à cocher..
  • Faites un clic droit > Supprimez-les ou Révélez-les dans le DOM.

Types de points d'arrêt de modification DOM

  • Modifications de sous-arborescence. Déclenchement lorsqu'un enfant du nœud sélectionné est supprimé ou ou si le contenu d'un élément enfant est modifié. non déclenché en cas de modification d'attribut de nœud enfant ; en cas de modification du nœud sélectionné.
  • Modifications d'attributs: déclenchées lorsqu'un attribut est ajouté ou supprimé au niveau du ou lorsqu'une valeur d'attribut change.
  • Suppression du nœud: déclenché lorsque le nœud actuellement sélectionné est supprimé.

Points d'arrêt XHR/fetch

Utilisez un point d'arrêt XHR/fetch lorsque vous souhaitez interrompre le processus lorsque l'URL de requête d'une requête XHR contient . Les outils de développement s'interrompent sur la ligne de code où la XHR appelle send().

Par exemple, lorsque vous constatez que votre page demande une URL incorrecte, et que vous souhaitez trouver rapidement le code source AJAX ou Fetch à l'origine de la requête incorrecte.

Pour définir un point d'arrêt XHR/fetch:

  1. Cliquez sur le panneau Sources.
  2. Développez le volet XHR Breakpoints (Points d'arrêt XHR).
  3. Cliquez sur Ajouter Ajouter un point d'arrêt.
  4. Saisissez la chaîne sur laquelle vous souhaitez interrompre le processus. Les outils de développement se mettent en pause lorsque cette chaîne est présente n'importe où dans l'URL de requête d'une XHR.
  5. Appuyez sur Entrée pour confirmer.

Créer un point d'arrêt XHR/fetch

Cet exemple montre comment créer un point d'arrêt XHR/fetch dans les points d'arrêt XHR/fetch pour toute requête contenant org dans l'URL.

Points d'arrêt de l'écouteur d'événements

Utilisez des points d'arrêt de l'écouteur d'événements lorsque vous souhaitez faire une pause sur le code de l'écouteur d'événements qui s'exécute après une est déclenché. Vous pouvez sélectionner des événements spécifiques (click, par exemple) ou des catégories d'événements (par exemple, tous les événements de souris.

  1. Cliquez sur le panneau Sources.
  2. Développez le volet Points d'arrêt de l'écouteur d'événements. Les outils de développement affichent une liste de catégories d'événements, Animation.
  3. Cochez l'une de ces catégories pour la mettre en veille dès qu'un événement de cette catégorie est déclenché, ou la développer. la catégorie et vérifier un événement spécifique.

Créer un point d'arrêt pour l'écouteur d'événements

Cet exemple montre comment créer un point d'arrêt d'écouteur d'événements pour deviceorientation.

De plus, le débogueur interrompt les événements qui se produisent dans les nœuds de calcul Web ou worklets de n'importe quel type, y compris les Worklets de stockage partagé.

Débogueur a mis en pause un événement de service worker.

Cet exemple montre que Debugger a été mis en pause sur un événement setTimer qui s'est produit dans un service worker.

Vous trouverez également une liste des écouteurs d'événements dans la section Elements > Volet Écouteurs d'événements.

Points d'arrêt pour les exceptions

Utilisez des points d'arrêt d'exception lorsque vous souhaitez vous arrêter sur la ligne de code qui génère une exception exception non détectée. Vous pouvez suspendre l'exécution de ces deux exceptions indépendamment dans une session de débogage autre que Node.js.

Dans la section Breakpoints (Points d'arrêt) du panneau Sources, activez l'une des options suivantes ou les deux, puis exécutez le code:

  • Cochez la case Case à cocher. Pause on uncaught exceptions (Suspendre sur les exceptions non détectées).

    Suspendu sur une exception non détectée lorsque la case correspondante est cochée.

    Dans cet exemple, l'exécution est suspendue sur une exception non détectée.

  • Cochez la case Case à cocher. Mettre en pause sur les exceptions interceptées.

    Suspendu sur une exception interceptée lorsque la case correspondante est cochée.

    Dans cet exemple, l'exécution est suspendue sur une exception capturée.

Exceptions dans les appels asynchrones

Lorsque l'une ou l'autre des cases cochées et/ou non interceptées sont activées, Debugger tente de s'interrompre sur les exceptions correspondantes dans les appels synchrones et asynchrones. Dans le cas asynchrone, Debugger recherche les gestionnaires de refus dans les promesses pour déterminer quand s'arrêter.

Exceptions détectées et code ignoré

Lorsque l'option Ignore List (Liste des éléments à ignorer) est activée, Debugger interrompt les exceptions détectées dans des frames non ignorés ou passant par un tel frame dans la pile d'appel.

L'exemple suivant montre Debugger mis en pause sur une exception interceptée générée par le library.js ignoré qui passe par un mycode.js non ignoré.

Suspendu sur une exception interceptée qui transite par un frame non ignoré dans la pile d'appel.

Pour en savoir plus sur le comportement de Debugger dans les cas limites, testez un ensemble de scénarios sur cette page de démonstration.

Points d'arrêt des fonctions

Appelez debug(functionName), où functionName est la fonction que vous souhaitez déboguer, lorsque vous souhaitez s'interrompt chaque fois qu'une fonction spécifique est appelée. Vous pouvez insérer debug() dans votre code (comme console.log()) ou appelez-la à partir de la console DevTools. debug() équivaut à définir un point d'arrêt de ligne de code sur la première ligne de la fonction.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Assurez-vous que la fonction cible est incluse dans le champ d'application

Les outils de développement génèrent une erreur ReferenceError si la fonction que vous souhaitez déboguer n'entre pas dans le champ d'application.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

Il peut être difficile de s'assurer que la fonction cible entre dans le champ d'application si vous appelez debug() à partir des outils de développement la console Cloud. Voici une stratégie:

  1. Définissez un point d'arrêt de ligne de code là où la fonction entre dans le champ d'application.
  2. Déclenchez le point d'arrêt.
  3. Appelez debug() dans la console DevTools lorsque le code est encore en veille sur votre ligne de code un point d'arrêt.

Points d'arrêt pour Trusted Type

L'API Trusted Type offre une protection contre la sécurité connus sous le nom d'attaques de script intersites (XSS).

Dans la section Breakpoints (Points d'arrêt) du panneau Sources, accédez à la section CSP Violation Breakpoints (Points d'arrêt pour la violation de CSP), activez l'une des options suivantes ou les deux, puis exécutez le code:

  • Vérifiez les Violations de récepteurs Case à cocher..

    Suspendu en cas de non-respect des règles de récepteur lorsque la case à cocher correspondante est activée.

    Dans cet exemple, l'exécution est suspendue en raison d'un non-respect des règles de récepteur.

  • Consultez Case à cocher. Non-respect des règles.

    Mise en veille en cas de non-respect des règles lorsque la case correspondante est cochée.

    Dans cet exemple, l'exécution est suspendue pour non-respect des règles. Les règles Trusted Type sont configurées à l'aide de trustedTypes.createPolicy.

Pour en savoir plus sur l'utilisation de l'API: