Résumé et partage : 6 façons de briser des points en JavaScript (collecter pour l'apprentissage)

Cet article résume et partage avec vous 6 méthodes de point d'arrêt JavaScript Cela vaut la peine d'être appris et collecté. Venez voir combien d'entre elles vous en avez utilisées ? J'espère que cela aidera tout le monde !

Le débogueur est un outil très important pour le développement front-end. Il peut s'arrêter au code qui nous intéresse et clarifier la logique grâce à une opération en une seule étape. La qualité du débogueur est directement liée à la qualité des points d'arrêt.

Chrome Devtools et VSCode fournissent tous deux Debugger, qui prend en charge 6 méthodes de point d'arrêt.

Point d'arrêt normal

Cliquez sur le côté gauche de la ligne que vous souhaitez rompre pour ajouter un point d'arrêt, et il se brisera lorsque vous y courrez.

Il s'agit de la méthode de point d'arrêt la plus basique. VSCode et Chrome Devtools prennent en charge ce point d'arrêt. [Recommandations associées : Tutoriel d'apprentissage Javascript]

Point d'arrêt conditionnel

Cliquez avec le bouton droit sur le côté gauche de la ligne où se trouve le code et une liste déroulante apparaîtra pour ajouter un point d'arrêt conditionnel.

Entrez une expression conditionnelle. Lorsque cette ligne de code est atteinte et que la valeur de l'expression est vraie, elle sera interrompue. C'est plus flexible que les points d'arrêt ordinaires.

Ce type de point d'arrêt basé sur des conditions est également pris en charge par VSCode et Chrome Devtools.

Point d'arrêt DOM

Cliquez avec le bouton droit sur l'élément correspondant dans le panneau Éléments de Chrome Devtools et sélectionnez Break on pour ajouter un point d'arrêt dom, c'est-à-dire lorsque le sous-arbre change, l'attribut change ou le nœud est supprimé. . Lorsque cela se produira, cela s’arrêtera. Peut être utilisé pour déboguer le code qui provoque des modifications dom.

Comme cela implique le débogage DOM, seul Chrome Devtools prend en charge ce type de point d'arrêt.

Points d'arrêt d'URL

Vous pouvez ajouter des points d'arrêt d'URL XHR dans le panneau Sources de Chrome Devtools Lorsqu'une requête ajax correspond à l'URL, elle sera interrompue et pourra être utilisée pour déboguer le code lié à la requête.

Cette fonctionnalité est uniquement disponible dans Chrome Devtools.

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

Vous pouvez également ajouter des points d'arrêt de l'écouteur d'événement dans le panneau Sources de Chrome Devtools pour spécifier les événements à interrompre lorsqu'un événement se produit, qui peuvent être utilisés pour déboguer le code lié à l'événement.

Cette fonctionnalité est uniquement disponible dans Chrome Devtools.

Points d'arrêt d'exception

Vérifiez les exceptions non capturées et les exceptions capturées dans le panneau Débogueur de VSCode pour ajouter des points d'arrêt d'exception et interrompez la colonne lorsqu'une exception est levée et n'est pas interceptée ou interceptée. Ceci est utile lors du débogage de code où des exceptions se produisent.

Résumé

Débogueur En plus des points d'arrêt ordinaires qui cliquent directement sur la ligne de code correspondante, il existe de nombreuses façons d'ajouter des points d'arrêt en fonction de différentes situations.

Il existe six types au total :

• Point d'arrêt ordinaire : Arrêtez-vous lorsque l'opération atteint ce point
• Point d'arrêt conditionnel : Arrêtez-vous lorsque l'opération atteint ce point et que l'expression est vraie. points d'arrêt ordinaires.
• Point d'arrêt DOM : Arrêtez lorsque le sous-arbre du DOM change, que l'attribut change ou que le nœud est supprimé.
• Point d'arrêt URL : Arrêtez lorsque l'URL. correspond à un certain modèle. Peut être utilisé pour déboguer le code lié à la requête
• Point d'arrêt de l'écouteur d'événement : Arrêt lorsqu'un écouteur d'événement est déclenché. Peut être utilisé pour déboguer le code lié à l'événement
• Point d'arrêt d'exception : L'exception levée est. capturé ou non. Les ruptures pendant la capture peuvent être utilisées pour déboguer le code là où des exceptions se produisent

La plupart de ces méthodes de point d'arrêt sont prises en charge par Chrome Devtools (normal, conditionnel, DOM, URL, Event Listener, exception), et certaines sont prises en charge par VSCode. Débogueur (normal, conditionnel, anormal).

Le code dans différentes situations peut utiliser différentes méthodes de point d'arrêt, donc le débogage du code sera beaucoup plus efficace. Combien de ces six méthodes de point d’arrêt avez-vous utilisées ?

(Partage de vidéos d'apprentissage : tutoriel web front-end)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!