JavaScript Points d'arrêt


Exemple

Les points d'arrêt interrompent votre programme une fois que l'exécution atteint un certain point. Vous pouvez ensuite parcourir le programme ligne par ligne en observant son exécution et en inspectant le contenu de vos variables.

Il y a trois façons de créer des points d'arrêt.

  1. À partir du code, en utilisant le debugger; déclaration.
  2. À partir du navigateur, utilisez les outils de développement.
  3. D'un environnement de développement intégré (IDE).

Déclaration de débogueur

Vous pouvez placer un debugger; déclaration n'importe où dans votre code JavaScript. Une fois que l'interpréteur JS aura atteint cette ligne, il arrêtera l'exécution du script, ce qui vous permettra d'inspecter les variables et de parcourir votre code.

Outils de développement

La deuxième option consiste à ajouter un point d'arrêt directement dans le code à partir des outils de développement du navigateur.

Ouverture des outils de développement

Chrome ou Firefox

  1. Appuyez sur F12 pour ouvrir les outils de développement
  2. Basculer vers l'onglet Sources (Chrome) ou l'onglet Débogueur (Firefox)
  3. Appuyez sur Ctrl + P et tapez le nom de votre fichier JavaScript
  4. Appuyez sur Entrée pour l'ouvrir.

Internet Explorer ou Edge

  1. Appuyez sur F12 pour ouvrir les outils de développement
  2. Passez à l'onglet Débogueur.
  3. Utilisez l'icône du dossier située dans le coin supérieur gauche de la fenêtre pour ouvrir un volet de sélection de fichier. Vous pouvez y trouver votre fichier JavaScript.

Safari

  1. Appuyez sur Commande + Option + C pour ouvrir les outils de développement.
  2. Passer à l'onglet Ressources
  3. Ouvrez le dossier "Scripts" dans le panneau de gauche
  4. Sélectionnez votre fichier JavaScript.

Ajout d'un point d'arrêt à partir des outils de développement

Une fois que votre fichier JavaScript est ouvert dans Developer Tools, vous pouvez cliquer sur un numéro de ligne pour placer un point d'arrêt. La prochaine fois que votre programme s'exécutera, il s'arrêtera là.

Remarque sur les sources minifiées: Si votre source est réduite, vous pouvez l’imprimer (convertir en format lisible). Dans Chrome, cela se fait en cliquant sur le bouton {} dans le coin inférieur droit du visualiseur de code source.

IDE

Code Visual Studio (VSC)

VSC a un support intégré pour le débogage de JavaScript.

  1. Cliquez sur le bouton Déboguer à gauche ou Ctrl + Maj + D
  2. Si ce n'est déjà fait, créez un fichier de configuration de lancement ( launch.json ) en appuyant sur l'icône représentant un engrenage.
  3. Exécutez le code de VSC en appuyant sur le bouton de lecture vert ou appuyez sur F5 .

Ajouter un point d'arrêt dans VSC

Cliquez à côté du numéro de ligne dans votre fichier source JavaScript pour ajouter un point d'arrêt (il sera marqué en rouge). Pour supprimer le point d'arrêt, cliquez à nouveau sur le cercle rouge.

Astuce: Vous pouvez également utiliser les points d'arrêt conditionnels dans les outils de développement du navigateur. Celles-ci aident à éviter les interruptions inutiles dans l'exécution. Exemple de scénario: vous souhaitez examiner une variable dans une boucle exactement à la 5ème itération.

entrer la description de l'image ici