web-dev-qa-db-fra.com

Débogage Javascript ligne par ligne avec Google Chrome

Comment puis-je naviguer pas à pas dans mon code javascript à l'aide des outils de développement Google Chromes sans que celui-ci ne soit utilisé dans les bibliothèques javascript?

Par exemple, j'utilise beaucoup jQuery sur mon site et je veux juste déboguer le jQuery que j'ai écrit, et non le javascript/jquery dans les bibliothèques jquery. Comment puis-je seulement parcourir mon propre jquery/javascript sans avoir à parcourir les millions de lignes des bibliothèques jquery?

Donc si j'ai ce qui suit:

function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        },
        success: function(data) {
            $.each(data, function(index, item) {
                // do something here
            });
        }
    });
}

si je place le point d'arrêt à $.ajax({, si je commence à le déboguer là où il s'arrête, si j'appuie ensuite sur F11, cela ira directement dans les bibliothèques jQuery. Je ne veux pas que cela se produise, je veux qu'il passe à la ligne suivante qui est url: 'get_tab_frame.aspx?rand=' + Math.random(),.

J'ai essayé d'appuyer sur F10 à la place, mais cela va directement à la fermeture } De la fonction. Et F5 passe simplement au point d'arrêt suivant sans passer en revue chaque ligne une par une.

javascriptjquerydebugginggoogle-chromegoogle-chrome-devtools
43
oshirowanen

En supposant que vous exécutiez sur une machine Windows ...

  1. Frapper le F12 clé
  2. Sélectionnez l'onglet Scripts ou Sources dans les outils de développement.
  3. Cliquez sur la petite icône de dossier dans le niveau supérieur
  4. Sélectionnez votre fichier JavaScript
  5. Ajoutez un point d'arrêt en cliquant sur le numéro de ligne à gauche (ajoute un petit marqueur bleu)
  6. Exécuter votre JavaScript

Ensuite, lors du débogage de l'exécution, vous pouvez effectuer une poignée de mouvements progressifs ...

  • F8 Continue: continuera jusqu'au prochain point d'arrêt
  • F10 Pas à pas: l’appel de fonction suivant ( n’entre pas dans la bibliothèque)
  • F11 Pas à pas: les pas dans le prochain appel de fonction ( entrera dans la bibliothèque)
  • Shift + F11 Step out: sort de la fonction en cours

Mettre à jour

Après avoir lu votre message mis à jour; pour déboguer votre code, je vous recommande d'utiliser temporairement le Code source de développement jQuery . Bien que cela ne résolve pas directement votre problème, cela vous permettra de déboguer plus facilement. Pour ce que vous essayez d’atteindre, je pense que vous devrez passer à la bibliothèque. Le code de production devrait donc vous aider à déchiffrer ce qui se passe.

78
Richard

... Comment puis-je parcourir mon code javascript ligne par ligne à l'aide des outils de développement de Google Chromes sans entrer dans les bibliothèques javascript? ...

Pour mémoire: pour le moment (février/2015), Google Chrome et Firefox ont exactement ce dont vous (et moi-même) avons besoin pour éviter de rentrer dans les bibliothèques et les scripts, et aller au-delà du code que nous avons déjà. sont intéressés, ça s'appelle Black Boxing:

enter image description here

Lorsque vous blackboxez un fichier source, le débogueur ne sautera pas dans ce fichier lors de la lecture pas à pas du code que vous déboguez.

Plus d'informations:

25
Igor Parra