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êt | Utilisez cette option lorsque vous souhaitez ... |
|---|---|
| Ligne de code | Effectuez une pause sur une région de code exacte. |
| Ligne de code conditionnelle | Mettez en veille sur une région exacte du code, mais seulement lorsqu'une autre condition est vraie. |
| Point de journalisation | Consignez un message dans la console sans suspendre l'exécution. |
| DOM | Arrêtez-vous sur le code qui modifie ou supprime un nœud DOM spécifique, ou ses enfants. |
| XHR | Mettre en pause lorsqu'une URL XHR contient un format de chaîne. |
| Écouteur d'événements | Arrêtez-vous sur le code qui s'exécute après le déclenchement d'un événement, tel que click. |
| Exception | Faites une pause sur la ligne de code qui génère une exception capturée ou non interceptée. |
| Fonction | Interrompre 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:
- Cliquez sur le panneau Sources.
- Ouvrez le fichier contenant la ligne de code sur laquelle vous souhaitez interrompre la lecture.
- 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 sur en haut de la colonne des numéros de ligne.
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:
- Ouvrez le panneau Sources.
- Ouvrez le fichier contenant la ligne de code sur laquelle vous souhaitez interrompre la lecture.
- 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 au-dessus de la colonne des numéros de ligne.
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:
- Ouvrez le panneau Sources.
- Ouvrez le fichier contenant la ligne de code sur laquelle vous souhaitez interrompre la lecture.
- 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 Add logpoint (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(), objDans ce cas, le message journalisé est:
// str = "test" // num = 42 // 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 au-dessus de la colonne des numéros de ligne.
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
à 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 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:
- 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
à 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
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:
- 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:
- Dans le panneau Sources, ouvrez le fichier source et recherchez la ligne sur laquelle vous ne souhaitez pas interrompre.
- 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.
- 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:
- Cliquez sur l'onglet Elements.
- Accédez à l'élément pour lequel vous souhaitez définir le point d'arrêt.
- Effectuez un clic droit sur l'élément.
- Pointez sur S'arrêter sur, puis sélectionnez Modifications de sous-arborescence, Modifications d'attributs, ou Suppression des nœuds.
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.
Vous pouvez alors effectuer les opérations suivantes:
- Activez-les ou désactivez-les avec
. - 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:
- Cliquez sur le panneau Sources.
- Développez le volet XHR Breakpoints (Points d'arrêt XHR).
- Cliquez sur
Ajouter un point d'arrêt. - 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.
- Appuyez sur Entrée pour confirmer.
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.
- Cliquez sur le panneau 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, Animation.
- 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.
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é.
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
Pause on uncaught exceptions (Suspendre sur les exceptions non détectées).
Dans cet exemple, l'exécution est suspendue sur une exception non détectée.
Cochez la case
Mettre en pause sur les exceptions interceptées.
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é.
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:
- Définissez un point d'arrêt de ligne de code là où la fonction entre dans le champ d'application.
- Déclenchez le point d'arrêt.
- 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
.
Dans cet exemple, l'exécution est suspendue en raison d'un non-respect des règles de récepteur.
Consultez
Non-respect des règles.
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:
- Pour mieux atteindre vos objectifs de sécurité, consultez Éviter les failles de script intersites basé sur le DOM grâce aux Trusted Types.
- Pour en savoir plus sur le débogage, consultez Implémenter le débogage de CSP et des Trusted Types dans les outils pour les développeurs Chrome.