Cette page a été traduite par l'API Cloud Translation.

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

Kayce Basques

Sofia Emelianova

Utilisez des points d'arrêt pour mettre en veille votre code JavaScript. Ce guide décrit chaque type de point d'arrêt disponible dans les outils de développement, et explique quand les utiliser et comment les définir. 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.

Quand utiliser chaque type de point d'arrêt ?

Le type de point d'arrêt le plus connu est la ligne de code. Toutefois, il peut être inefficace de définir des points d'arrêt en ligne de code, en particulier 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êt	Utilisez cette option lorsque vous voulez ...
Ligne de code	Arrêtez-vous sur une zone de code exacte.
Ligne de code conditionnelle	Arrêtez-vous sur une zone de code exacte, mais uniquement lorsqu'une autre condition est remplie.
Point de journalisation	Consignez un message dans la console sans interrompre l'exécution.
DOM	Arrêtez le code qui modifie ou supprime un nœud DOM spécifique ou ses enfants.
XHR	Mettre en veille lorsqu'une URL XHR contient un format de chaîne.
Écouteur d'événements	Faites une pause sur le code qui s'exécute après le déclenchement d'un événement, tel que `click`.
Exception	Arrêtez la ligne de code qui génère une exception interceptée ou non interceptée.
Fonction	Met en pause chaque fois qu'une fonction spécifique est appelée.
Trusted Type (Type d'approbation)	Suspendez les cas de non-respect des Trusted Type.

Points d'arrêt en ligne de code

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

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

Cliquez sur l'onglet Sources.
Ouvrez le fichier contenant la ligne de code que vous souhaitez insérer.
Accédez à la ligne de code.
À gauche de la ligne de code se trouve la colonne du numéro de ligne. Cliquez dessus. Une icône bleue apparaît en haut de la colonne des numéros de ligne.

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

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

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

Appelez debugger à partir de votre code pour marquer une pause sur cette ligne. Cela équivaut à un point d'arrêt au niveau de la ligne de code, sauf qu'il est défini dans le 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 la 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 pour votre cas, en particulier dans une boucle.

Pour définir un point d'arrêt conditionnel de ligne de code, procédez comme suit:

Ouvrez l'onglet Sources.
Ouvrez le fichier contenant la ligne de code que vous souhaitez insérer.
Accédez à la ligne de code.
À gauche de la ligne de code se trouve la colonne du numéro de ligne. Effectuez un clic droit dessus.
Sélectionnez Ajouter un point d'arrêt conditionnel. Une boîte de dialogue s'affiche sous la ligne de code.
Saisissez votre condition dans la boîte de dialogue.
Appuyez sur Entrée pour activer le point d'arrêt. Une icône orange avec un point d'interrogation apparaît en haut 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 de ligne de code conditionnel 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 la ligne de code

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

Pour définir un point de journalisation:

Ouvrez l'onglet Sources.
Ouvrez le fichier contenant la ligne de code que vous souhaitez insérer.
Accédez à la ligne de code.
À gauche de la ligne de code se trouve la colonne du numéro de ligne. Effectuez un clic droit dessus.
Sélectionnez Ajouter un point de journalisation. Une boîte de dialogue s'affiche sous la ligne de code.
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 = 3
// obj = {attr: "x"}
A string 42 true TEST {attr: 'x'}
```
Appuyez sur Entrée pour activer le point d'arrêt. Une icône rose avec deux points apparaît en haut de la colonne du numéro de ligne.

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 consigne une chaîne et une valeur de variable dans la console.

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

Utilisez le volet Breakpoints (Points d'arrêt) pour désactiver, modifier ou supprimer des points d'arrêt au niveau de la ligne de code.

Modifier des groupes de points d'arrêt

Le volet Breakpoints (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 à côté du groupe ou du point d'arrêt.
Pour supprimer un groupe, pointez dessus et cliquez sur .

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

Les groupes disposent de menus contextuels. Dans le volet Breakpoints (Points d'arrêt), effectuez un clic droit sur un groupe et sélectionnez:

Supprimez tous les points d'arrêt du fichier (groupe).
Désactivez tous les points d'arrêt dans le fichier.
Activez 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, procédez comme suit:

Cliquez sur à 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 le repère situé à côté du numéro de ligne transparent.
Pointez sur un point d'arrêt, puis cliquez sur pour le modifier et sur pour le supprimer.
Lorsque vous modifiez un point d'arrêt, modifiez son type dans la liste déroulante de l'éditeur intégré.
Effectuez un clic droit sur un point d'arrêt pour afficher son menu contextuel, puis choisissez l'une des options suivantes:
- Révéler le lieu.
- Modifiez la condition ou le point de journalisation.
- Activez tous les points d'arrêt.
- Désactivez 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 en action les différentes modifications apportées aux points d'arrêt: désactivation, suppression, modification de la condition, affichage de l'emplacement depuis le menu et type de modification.

Points d'arrêt après modification DOM

Utilisez un point d'arrêt de modification DOM lorsque vous souhaitez suspendre le code qui modifie un nœud DOM ou ses enfants.

Pour définir un point d'arrêt de modification DOM:

Cliquez sur l'onglet Éléments.
Accédez à l'élément sur lequel vous souhaitez définir le point d'arrêt.
Faites un clic droit sur l'élément.
Passez la souris sur Break on (Arrêter le), puis sélectionnez Subtree modifications (Modifications de sous-arborescence), Attribute modifications (Modifications d'attributs) ou Node removed (Suppression de nœuds).

Cet exemple montre le menu contextuel permettant de créer un point d'arrêt après modification du DOM.

Vous trouverez la liste des points d'arrêt après modification du DOM dans:

Volet Éléments > Points d'arrêt DOM
Volet latéral Sources > DOM Breakpoints (Points d'arrêt DOM).

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

Vous pouvez alors:

Activez-les ou désactivez-les avec .
Effectuez un clic droit, puis sélectionnez Supprimer ou Afficher dans le DOM.

Types de points d'arrêt après modification DOM

Modifications de sous-arborescence. Déclenchement lorsqu'un enfant du nœud actuellement sélectionné est supprimé ou ajouté, ou lorsqu'il modifie le contenu d'un enfant. Non déclenchée par des modifications d'attributs du nœud enfant ou par des modifications apportées au nœud actuellement sélectionné
Modifications d'attributs: elles sont déclenchées lorsqu'un attribut est ajouté ou supprimé sur le nœud actuellement sélectionné, ou lorsqu'une valeur d'attribut est modifiée.
Suppression de nœud: se déclenche lorsque le nœud actuellement sélectionné est supprimé.

Points d'arrêt XHR/Extraire

Utilisez un point d'arrêt XHR/de récupération lorsque vous souhaitez interrompre le fonctionnement lorsque l'URL de requête d'une requête XHR contient une chaîne spécifiée. Les outils de développement font une pause sur la ligne de code où XHR appelle send().

Cela peut s'avérer utile, 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:

Cliquez sur l'onglet Sources.
Développez le volet Points d'arrêt XHR.
Cliquez sur Ajouter un point d'arrêt.
Saisissez la chaîne que vous souhaitez rompre. Les outils de développement s'interrompent lorsque cette chaîne est présente n'importe où dans l'URL de requête d'une requête XHR.
Appuyez sur Entrée pour confirmer votre choix.

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

Cet exemple montre comment créer un point d'arrêt XHR/fetch dans XHR/fetch Breakpoints (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 d'é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 le déclenchement d'un événement. Vous pouvez sélectionner des événements spécifiques, tels que click, ou des catégories d'événements, comme tous les événements de souris.

Cliquez sur l'onglet Sources.
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, par exemple Animation.
Cochez l'une de ces catégories pour mettre en veille chaque fois qu'un événement de cette catégorie est déclenché, ou développez la catégorie et vérifiez un événement spécifique.

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

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

En outre, Debugger suspend les événements qui se produisent dans les web workers ou les worklets de tout type, y compris les Worklets de stockage partagé.

Le débogueur a suspendu l'événement d'un service worker.

Cet exemple montre que l'outil Debugger a été suspendu sur un événement setTimer qui s'est produit dans un service worker.

Vous trouverez également la liste des écouteurs d'événements dans le volet Éléments > Écouteurs d'événements.

Points d'arrêt sur exception

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

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

Cochez Suspendre les exceptions non détectées.

Dans cet exemple, l'exécution est suspendue sur une exception non détectée.
Cochez Suspendre les exceptions interceptées.

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

Exceptions dans les appels asynchrones

Lorsque les cases interceptées et non interceptées sont activées, ou les deux, Debugger tente de suspendre les exceptions correspondantes dans les appels synchrones et asynchrones. Dans le cas de l'approche asynchrone, l'outil Debugger recherche les gestionnaires de refus dans les promesses afin de déterminer quand s'arrêter.

Exceptions capturées et code ignoré

Lorsque l'option Ignorer la liste est activée, Debugger s'interrompt sur les exceptions interceptées dans des frames non ignorés ou qui passent par un tel frame dans la pile d'appel.

L'exemple suivant montre que Debugger a été mis en pause sur une exception interceptée générée par le library.js ignoré qui transite par 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 particuliers, testez plusieurs scénarios sur cette page de démonstration.

Points d'arrêt d'une fonction

Appelez debug(functionName), où functionName est la fonction que vous souhaitez déboguer lorsque vous souhaitez suspendre l'appel chaque fois qu'une fonction spécifique est appelée. Vous pouvez insérer debug() dans votre code (comme une instruction console.log()) ou l'appeler à 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 comprise 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 de la console DevTools. Voici une stratégie:

Définissez un point d'arrêt de ligne de code quelque part dans le champ d'application de la fonction.
Déclenchez le point d'arrêt.
Appelez debug() dans la console des outils de développement pendant que le code est encore suspendu au point d'arrêt de votre ligne de code.

Points d'arrêt de type approuvé

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

Terme clé:les scripts intersites basés sur le DOM se produisent lorsque les données d'une source contrôlée par l'utilisateur (comme le nom d'utilisateur ou l'URL de redirection extraite du fragment d'URL) atteignent un récepteur, qui est une fonction comme eval() ou un setter de propriété comme .innerHTML, qui peut exécuter du code JavaScript arbitraire.

Dans le volet Points d'arrêt de l'onglet Sources, accédez à la section Points d'arrêt en cas de non-respect des CSP et activez l'une des options suivantes ou les deux, puis exécutez le code:

Vérifiez les cas de non-respect des récepteurs .

Dans cet exemple, l'exécution est suspendue en cas de non-respect du récepteur.
Consultez Non-respect des règles.

Dans cet exemple, l'exécution est mise en veille en raison d'un non-respect des règles. Les règles de type de confiance sont configurées à l'aide de trustedTypes.createPolicy.

Vous trouverez plus d'informations sur l'utilisation de l'API:

Pour aller plus loin dans vos objectifs de sécurité, consultez Empêcher les failles de script intersites basé sur le DOM grâce aux Trusted Types.
Pour le débogage, consultez Implémenter le débogage de CSP et des Trusted Types dans les outils pour les développeurs Chrome.