JavaScript: Comment définir un point de rupture conditionnel dans les outils de débogage Chrome

100

J'ai ce simple fichier js, qui imprime la date en continu.

J'utilise les outils de débogage de Google Chrome (F12)

Ma question est la suivante: est-il possible de définir un point d'arrêt conditionnel dans Google Chrome?

Dans mon code, je veux définir un point d'arrêt si la valeur des secondes est égale à 50 ??

s = date.getSeconds();

C'est le jsfiddle où se trouve ma source

(Je ne sais pas pourquoi cela ne fonctionne pas dans jsfiddle)

Quoi qu'il en soit, ma question est la suivante: est-il possible de définir un point de rupture conditionnel dans les outils de débogage chrome?

javascript google-chrome Pawan
la source

+1 parce que je ne savais pas que c'était possible avant d'aller vérifier la documentation pour répondre à cette question. Merci!

Theraot

Réponses:

141

Oui c'est possible.

Cliquez avec le bouton droit sur le marqueur du point d'arrêt et sélectionnez "Modifier le point d'arrêt ...". Vous pouvez définir la condition.

À partir des outils de développement Chrome sur les points d'arrêt sur developer.google.com (c'est moi qui souligne):

Remarque: Tous les points d'arrêt que vous avez définis apparaissent sous Points d'arrêt dans la barre latérale droite. Cliquer sur l'entrée saute à la ligne en surbrillance dans le fichier source. Une fois que vous avez défini un point d'arrêt, cliquez avec le bouton droit sur l'indicateur de point d'arrêt de la balise bleue pour définir une instruction conditionnelle pour ce point d'arrêt . Tapez une expression et le point d'arrêt ne s'arrêtera que si la condition est vraie.

Théraot
la source

Merci, j'ai fait comme vous l'avez mentionné, modifié le point de rupture et défini if (s == 50) mais pourquoi il ne s'arrête pas à cette condition ??

Pawan

@PreethiJain n'écrit que la condition "s == 50" (sans les guillemets). Au fait, j'ai réussi à faire fonctionner le jsfiddle à: jsfiddle.net/nVpXN/6

Theraot

Vous n'avez même pas besoin d'ajouter un point d'arrêt pour commencer. Faites un clic droit sur une ligne tout de suite et cliquez sur "Ajouter un point d'arrêt conditionnel ..." .

Martin Ender

Mec, nous sommes en 2017 et j'apprends de nouvelles choses de base sur Chrome. #Awesomeness

The Qodesmith

Cela vérifiera simplement l'instruction à ce stade de l'exécution du code, puis interrompra si c'est le cas, de la même manière qu'un point d'arrêt dans une instruction if. Je pense que l'OP voulait savoir si le débogueur vérifie à chaque exécution d'instruction si la condition est remplie et si c'est le débogueur qui rompt sur cette ligne. Ce comportement est beaucoup plus utile car vous n'avez pas besoin de jouer au détective pour savoir quand une variable fait quelque chose d'inattendu.

ejectamenta

Jetez un œil à la debuggerdéclaration. Fondamentalement, il appelle tous les outils de débogage disponibles, et dans Chrome, il agit comme si l'interpréteur rencontrait un point d'arrêt.

Votre code serait:

s = date.getSeconds();
if (s == 50) {
   debugger;
}

De la référence :

[débogueur] Appelle toute fonctionnalité de débogage disponible. Si aucune fonctionnalité de débogage n'est disponible, cette instruction n'a aucun effet.

ami fou
la source

Bien que ce soit en fait plus dans l'esprit de la manière originale, la question originale a été posée, et c'est une excellente information; Je pense que la vraie question concernait les outils Chrome, pas ECMAscript. Cela étant dit; il y a une mise en garde à ajouter: supprimez tous les debuggerappels dans le code de production. (Je suis à peu près sûr que le linting générera une erreur si le débogueur est présent, mais cela vaut la peine d'appeler chaque fois que le sujet est soulevé).

Crispen Smith

vous n'avez pas besoin de l'instruction du débogueur, vous pouvez également avoir une instruction vide à l'intérieur du if et y ajouter simplement un point d'arrêt.

ejectamenta

Vous pouvez définir un point d'arrêt conditionnel dans Google Chrome, en suivant ces étapes:

1. cliquez avec le bouton droit sur le point d'arrêt où vous voulez vous arrêter, veuillez cliquer sur

2. cliquez sur "Ajouter un point d'arrêt conditionnel", un texte apparaîtra, vous pouvez y ajouter une condition (le résultat sera 'true' si la condition est satisfaite, sinon 'false'), la couleur du point d'arrêt deviendra orange après l'ajout de la condition, chk sur

3. recharger la même page vous pouvez voir que le point d'arrêt fonctionnera si la condition est satisfaite comme

Deepan Raj
la source