web-dev-qa-db-fra.com

Comment pouvez-vous déboguer JavaScript qui bloque le navigateur?

Je travaille sur une application JavaScript très volumineuse et riche en pages Web. Pour une raison quelconque, une modification récente provoque le blocage aléatoire du navigateur.

Comment puis-je cibler le problème? Étant donné que le navigateur ne répond plus, je ne vois aucune erreur et je ne peux pas Break on next utiliser FireBug.

javascriptdebuggingbrowser
50
JeanPaul

Au lieu de commenter totalement votre code, vous devriez utiliser un journal de la console debug .

Vous devez utiliser la fonctionnalité console.log() fournie par la plupart des navigateurs modernes ou l'émuler si vous utilisez un navigateur qui ne le prend pas en charge.

Chaque fois que vous appelez console.log('sometext'), une entrée de journal dans la console de débogage de votre navigateur sera créée avec votre texte spécifié, généralement suivi de l'heure réelle.

Vous devez définir une entrée de journal avant chaque partie critique de votre flux d'application, puis de plus en plus jusqu'à trouver le journal non appelé. Cela signifie que le code avant ce journal est suspendu au navigateur.

Vous pouvez également écrire votre propre fonction de journal personnel avec des fonctionnalités ajoutées, par exemple l'état d'une variable particulière, ou un objet contenant un aspect plus détaillé de votre déroulement de programme, etc.

Exemple 

console.log('step 1');

while(1) {}

console.log('step 2');

La boucle infinie arrêtera le programme, mais vous pourrez toujours voir le journal de la console avec le flux de programme enregistré jusqu’à ce que le programme s’arrête.

Ainsi, dans cet exemple, vous ne verrez pas "étape 2" dans le journal de la console, mais vous verrez "étape 1". Cela signifie que le programme s’est arrêté entre les étapes 1 et 2.

Vous pouvez ensuite ajouter un journal de console supplémentaire dans le code entre les deux étapes pour rechercher le problème en profondeur, jusqu'à ce que vous le trouviez.

39
Jose Faeti

Vous pouvez ajouter debugger; n'importe où dans votre code JS pour définir un point d'arrêt manuellement. Cela suspendra l'exécution et vous permettra de reprendre/inspecter le code (Firebug/FF).

Page Wiki Firebug: http://getfirebug.com/wiki/index.php/Debugger;_keyword

16
Ricardo Tomasi

Je suis surpris que la réponse à cette question n’ait pas encore été donnée, et la réponse la plus votée est essentiellement de "mettre les journaux de la console partout jusqu'à ce que vous le découvriez", ce qui n'est pas vraiment une solution, en particulier pour les applications plus grandes, à moins que vous ne vouliez vraiment dépenser tout votre temps copier-coller "log log".

Quoi qu'il en soit, tout ce dont vous avez besoin est debugger;. Quelqu'un a déjà mentionné cela, mais il n'a pas vraiment expliqué comment cela pourrait être utilisé:

En chrome (et dans la plupart des autres navigateurs), debugger; interrompt l'exécution, vous dirige vers la console de développement et vous montre le code en cours d'exécution à gauche et la trace de pile à droite. En haut à droite de la console se trouvent des flèches ressemblant à des boutons. Le premier est "reprendre l'exécution du script". Celui que nous souhaitons est le suivant "étape sur le prochain appel de fonction". 

Fondamentalement, tout ce que vous avez à faire est de placer un débogueur n'importe où dans votre code, à un point où vous savez que la page n'a pas encore été gelée, puis de l'exécuter et de cliquer plusieurs fois sur "passer au prochain appel de fonction", qui ressemble à une flèche. sauter par-dessus un cercle. Il ira ligne par ligne, appel par appel, jusqu'à l'exécution de votre script jusqu'à ce qu'il se bloque/reste bloqué dans une boucle infinie. À ce stade, vous serez en mesure de voir exactement où votre code est bloqué, ainsi que toutes les variables/valeurs actuellement dans la portée, ce qui devrait vous aider à comprendre pourquoi le script est bloqué. 

J'étais en train de me creuser la tête en essayant de trouver une boucle suspendue dans un JS assez complexe sur lequel je travaille, et j'ai réussi à la trouver en 30 secondes à l'aide de cette méthode.

7
AllTheTime

Pour isoler le problème, vous pouvez commencer par supprimer/désactiver/commenter différentes sections de votre code jusqu'à ce que vous ayez réduit le code à une petite partie vous permettant de rechercher l'erreur. Une autre possibilité consiste à consulter l'historique d'enregistrement de votre contrôle de source pour les différentes modifications récemment validées. J'espère que vous comprendrez d'où vient le problème.

6
Darin Dimitrov

Installez Google Chrome , allez sur votre page, appuyez sur f12 et la console du développeur s’affichera. Sélectionnez ensuite le bouton Scripts , puis sélectionnez votre script (ex: myScript.js) dans le menu déroulant situé en haut à gauche de la console. Cliquez ensuite sur la première ligne (ou une ligne où vous pensez ne pas être suspendu) et un point de rupture sera créé. Une fois que le javascript a atteint votre point d'arrêt, cliquez sur l'un des boutons situés dans le coin supérieur droit de la console (vous verrez un bouton tel que le symbole Pause, puis un autre bouton 4). Appuyez sur la touche 2º (ou sur la touche après une pause pour passer à l'étape suivante) ou sur la touche 3º (insertion). Passez la souris sur les boutons et ils vous expliqueront ce qu’ils veulent dire… .. Ensuite, vous entrerez dans votre code comme ceci jusqu’à ce qu’il se bloque et vous pourrez ensuite mieux le déboguer.

Le débogueur de Google Chrome est bien meilleur que firebug et plus rapide. J'ai fait le changement de firebug et c'est vraiment génial! ;) 

3
Totty.js

Les navigateurs actuels Firefox/Seamonkey (Ctrl-Maj-I/Débogueur/Icône PAUSE), Chrome, ... ont généralement un débogueur JS intégré avec le bouton PAUSE qui fonctionne à tout moment. Appuyez simplement dessus lorsque vous êtes sur une page en boucle/gourmande en ressources processeur, et le type de volet "Pile d'appels" vous indiquera probablement le problème - prêt à être inspecté plus avant ...

2
kxr

Je sais que c'est primitif, mais j'aime saupoudrer mon code js avec 'alert's pour savoir jusqu'où va mon code avant qu'un problème ne survienne. Si les fenêtres d’alerte sont trop gênantes, vous pouvez configurer une zone de texte à laquelle vous pouvez ajouter des journaux:

<textarea id='txtLog' ...></textarea>

<script>

...
function log(str) {
    $('#txtLog').append(str + '\n');
}
log("some message, like 'Executing Step #2'...");
...

</script>
1
Trevor

D'après mon expérience, les problèmes qui empêchent le navigateur de répondre sont généralement des boucles infinies ou similaires.

En guise de point de départ, examinez vos boucles pour trouver des choses stupides, comme ne pas augmenter quelque chose sur lequel vous comptez par la suite. 

Comme le disait une autre affiche, à part cela, commentez des bouts de code pour isoler le problème. Vous pouvez «utiliser» une méthode de division et de conquête et commenter presque littéralement la moitié des pages JS. Si cela fonctionnait avec une erreur différente, vous avez probablement trouvé le bon morceau!.

Puis divisez cela en deux, etc., etc. jusqu'à trouver le coupable.

1
dougajmcdonald

Outre l’utilisation de la sortie de journal manuelle et de la variable debugger, il peut parfois être utile de consigner chaque appel de fonction pour localiser l’emplacement de la boucle. Après l'extrait de L'ajout de console.log à chaque fonction automatiquement peut s'avérer utile pour le faire ...

function augment(withFn) {
    var name, fn;
    for (name in window) {
        fn = window[name];
        if (typeof fn === 'function') {
            window[name] = (function(name, fn) {
                var args = arguments;
                return function() {
                    withFn.apply(this, args);
                    return fn.apply(this, arguments);

                }
            })(name, fn);
        }
    }
}

augment(function(name, fn) {
    console.log("calling " + name);
});
0
Markus

J'ai rencontré le même problème et c'est comme ça que je l'ai résolu.

  1. Recherchez des erreurs dans la console et corrigez-les.

Une console de temps est même suspendue 

  1. Vérifiez toutes les boucles si celle-ci est infinie 
  2. Vérifier le code récursif 
  3. Recherchez le code qui ajoute dynamiquement des éléments au document
  4. Utilisez des points d'arrêt dans votre console
  5. Utiliser une journalisation de la console en consignant les blocs de code suspectés 
0
Tofeeq

Je pense que vous pouvez utiliser le journal de la console comme ceci

console.log(new Date() + " started Function Name or block of lines from # to #");

// functions or few lines of code

console.log(new Date() + " finished Function Name or block of lines from # to #")

À la fin de l'exécution de votre page Web, vous pouvez identifier la zone qui prend beaucoup de temps lors de l'exécution, b 

0
Ehab Salem

Je sais que cette question est ancienne, mais dans VS2013 et vous pouvez appuyer sur le bouton de pause pour obtenir une trace complète de la pile JS. Cela me rendait fou parce que la boucle était angulaire, je ne pouvais donc pas vraiment mettre les alertes, les points d'arrêt, etc. parce que je ne savais pas où les mettre. Je ne sais pas si cela fonctionne avec l'édition express gratuite, mais ça vaut le coup.

J'ai aussi lu que Chrome avait une fonction de pause, alors ça pourrait être une option, mais je ne l'ai pas essayée moi-même.

0
Lathejockey81