Comment définir un point d'arrêt JavaScript à partir du code dans Chrome?


688

Je veux forcer le débogueur Chrome à se rompre sur une ligne via du code , ou bien en utilisant une sorte de balise de commentaire telle que quelque chose comme console.break().


46
avez-vous essayé debugger;ou simplement utilisé des points d'arrêt réguliers dans la barre d'outils du développeur?
diaho

vous voulez dire définir des points d'arrêt à partir du code lui-même plutôt que de les définir à l'aide de l'observateur de script dans les outils de développement?
Faris M


9
Pas un doublon. "dans Chrome" contre "dans le code" sont deux choses différentes, et cette question est applicable à de nombreux scénarios non XHR. Oui 1 des réponses de l'autre question répond à cette question, mais d'autres ne s'appliquent pas. J'ai littéralement googlé "définir le point d'arrêt javascript à partir du code chrome" et ceci est le premier résultat, et l'autre question n'est même pas sur la première page.
AaronLS

Réponses:


1162

Vous pouvez utiliser debugger;dans votre code. Si la console développeur est ouverte, l'exécution sera interrompue. Cela fonctionne également dans Firebug.


8
Une bonne astuce consiste à déclencher le débogueur après quelques secondes:setTimeout(function(){debugger;}, 3000);
Shahar

30
Est-ce que cette astuce est courante? Vérification / justification?
Justus Eapen

4
C'est très utile. Remarque debugger;est également prise en charge dans tous les principaux navigateurs. Pour plus d'informations: w3schools.com/jsref/jsref_debugger.asp
ScottyG

16
@ScottyG MDN est moins brillant, plus utile: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
jpaugh

@JustusEapen Le problème est que Javascript est un thread unique, il ne peut donc pas interrompre le code en cours d'exécution.
Vitruve

27

Configurez un écouteur de clic de bouton et appelez le debugger;

Exemple

$("#myBtn").click(function() {
 debugger;   
});

Démo

http://jsfiddle.net/hBCH5/

Ressources sur le débogage en JavaScript


1
Cela définit un point d'arrêt dans le gestionnaire de clics, probablement pas ce que voulait OP
ᆼ ᆺ ᆼ

@PeterV Je trouverais cela utile si j'essayais simplement d'ouvrir mon code à un endroit proche d'un bloc de code que je déboguais ... mais je ne voulais pas déboguer tout le temps ... mais oui , si c'est juste pour ouvrir le débogueur ... alors il y a une touche pour ça.
Armstrongest

27

Vous pouvez également utiliser debug(function), pour casser quand functionest appelé.

Référence de l'API de ligne de commande: débogage


2
Très bien - semble être Chrome uniquement à ce moment, mais c'est ma plate-forme principale de toute façon. Maintenant, je dois juste me rappeler d'arrêter d'appeler mon drapeau de débogage global "debug" ...
brichins

La référence de l'API de ligne de commande du débogueur Chrome contient en fait d'autres éléments très utiles que je ne connaissais pas. Merci!
Peter T.


8

Dans l'onglet "Scripts", accédez à l'emplacement de votre code. À gauche du numéro de ligne, cliquez sur. Cela définira un point d'arrêt.

Capture d'écran:

capture d'écran du point d'arrêt en chrome

Vous pourrez ensuite suivre vos points d'arrêt dans l'onglet de droite (comme indiqué dans la capture d'écran).


41
Cela ne répond pas à la question, il veut pouvoir le faire en code
robertc

39
xn .: "Voici une photo de ma réponse, à l'époque où c'était juste un petit bébé avec 0 votes. Tout est devenu adulte maintenant."
AaronLS

3
Si vous chargez un script JS avec un appel Ajax, il ne s'affichera pas ici, d'où la nécessité d'un point d'arrêt dans le code.
Petruza

@FlorianMargaine, il n'y a plus d'onglet Scripts. Veuillez mettre à jour l'image.
Pacerier

Dans certains frameworks, comme Drupal, le JS obtient un suffixe de chaîne de requête contournant le cache ajouté. Si vous videz les caches, il met souvent à jour ce suffixe qui peut effacer tous les points d'arrêt que vous avez définis lors du chargement précédent.
Nick

7

debugger est un mot clé réservé par EcmaScript et donné une sémantique facultative depuis ES5

En conséquence, il peut être utilisé non seulement dans Chrome, mais également vianode debug myscript.js Firefox et Node.js via .

La norme dit :

Syntaxe

DebuggerStatement :
    debugger ;

Sémantique

L'évaluation de la production DebuggerStatement peut permettre à une implémentation de provoquer un point d'arrêt lorsqu'elle est exécutée sous un débogueur. Si un débogueur n'est pas présent ou actif, cette instruction n'a aucun effet observable.

La production DebuggerStatement: debugger; est évalué comme suit:

  1. Si une fonction de débogage définie par l'implémentation est disponible et activée, alors
    1. Effectuez une action de débogage définie par l'implémentation.
    2. Soit result une valeur d'achèvement définie par l'implémentation.
  2. Autre
    1. Que le résultat soit (normal, vide, vide).
  3. Résultat de retour.

Aucun changement dans ES6.


3

C'est possible et il y a de nombreuses raisons pour lesquelles vous pourriez vouloir le faire. Par exemple, le débogage d'une boucle infinie javascript près du début du chargement de la page, qui empêche le chargement correct de l'ensemble d'outils de développement Chrome (ou Firebug).

Voir section 2 de

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

ou ajoutez simplement une ligne contenant le mot débogueur à votre code au point de test requis.


3

Point d'arrêt: -

le point d'arrêt arrêtera son exécution et vous permettra d'examiner les valeurs JavaScript.

Après avoir examiné les valeurs, vous pouvez reprendre l'exécution du code (généralement avec un bouton de lecture).

Débogueur: -

Le débogueur; arrête l'exécution de JavaScript et appelle la fonction de débogage.

L'instruction de débogage suspend l'exécution, mais elle ne ferme aucun fichier ni n'efface aucune variable.

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};


2

Il existe de nombreuses façons de déboguer du code JavaScript. Les deux approches suivantes sont largement utilisées pour déboguer JavaScript via du code

  1. Utiliser console.log()pour imprimer les valeurs dans la console du navigateur. (Cela vous aidera à comprendre les valeurs à certains points de votre code)

  2. Mot clé du débogueur. Ajoutez debugger;aux emplacements que vous souhaitez déboguer, ouvrez la console développeur du navigateur et accédez à l'onglet sources.

Pour plus d'outils et de façons de déboguer le code JavaScript, sont fournis dans ce lien par W3School .


1
+1 et l'utilisation de console.log sont également utiles pour localiser votre code, car généralement le fichier / la ligne # est affiché à côté du message, et vous pouvez cliquer dessus pour ouvrir votre code dans le débogueur, définir un point d'arrêt, etc.
John Henckel

0

Je ne recommanderais pas debugger;si vous voulez simplement tuer et arrêter le code javascript, car il debugger;va juste geler temporairement votre code javascript et ne pas l'arrêter définitivement.

Si vous voulez tuer et arrêter correctement le code javascript à votre commande, utilisez ce qui suit:

throw new Error("This error message appears because I placed it");

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.