Débogage Javascript ligne par ligne à l'aide de Google Chrome

Comment puis-je passer à travers mon code javascript ligne par ligne à l'aide des outils de développement Google Chromes sans que cela n'intervienne dans les bibliothèques javascript?

Par exemple, je suis en train d'utiliser 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 passer par mon propre jquery / javascript et ne pas avoir à parcourir les millions de lignes dans les bibliothèques jquery?

Donc, si j'ai le suivant:

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 à déboguer que c'est là où il s'arrête, si je appuyez sur F11, il va directement dans les bibliothèques jQuery. Je ne veux pas que cela se produise, je le veux Passez à la ligne suivante qui est url: 'get_tab_frame.aspx?rand=' + Math.random(),

J'ai essayé de presser F10 à la place, mais cela va directement à la fermeture de la fonction. Et F5 va juste au prochain point d'arrêt sans franchir chaque ligne une par une.

En supposant que vous utilisez une machine Windows …

  1. Appuyez sur la touche F12
  2. Sélectionnez l'onglet Scripts , Sources , dans les outils du développeur
  3. Cliquez sur l'icône du petit dossier au 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écutez votre JavaScript

Ensuite, lors du débogage d'exécution, vous pouvez faire une poignée de mouvements …

  • F8 Continuer: continuera jusqu'au prochain point d'arrêt
  • F10 Étape: Étape sur appel de la prochaine fonction ( n'entrera pas dans la bibliothèque)
  • F11 Entrez dans: Passez à l'appel suivant de la fonction ( entrera dans la bibliothèque)
  • Shift + F11 Sortie: Étape de la fonction actuelle

Mettre à jour

Après avoir lu votre publication mise à jour; Pour déboguer votre code, je recommanderais temporairement l'utilisation du 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 crois que vous devrez vous inscrire à la bibliothèque, alors espérons que le code de production devrait vous aider à déchiffrer ce qui se passe.

… Comment puis-je passer à travers mon code javascript ligne par ligne en utilisant les outils de développement Google Chromes sans qu'il entre dans les bibliothèques javascript? …


Pour le compte rendu: à ce moment (février / 2015), Google Chrome et Firefox ont exactement ce que vous (et moi) devons éviter d'aller dans les bibliothèques et les scripts, et aller au-delà du code qui nous intéresse, on l'appelle Black Boxing:

Entrez la description de l'image ici

Lorsque vous blackbox un fichier source, le débogueur ne sautera pas dans ce fichier lorsque vous traversez le code que vous déboguez.

Plus d'informations:

  • Chrome: Blackbox JavaScript Source Files
  • Firefox: bibliothèques de boîtes noires dans le débogueur