web-dev-qa-db-fra.com

Comment déboguer Javascript qui a été chargé via AJAX (spécifiquement jQuery)

J'ai récemment changé mon style de codage avec des projets plus complexes en chargeant des pages (et leurs scripts intégrés) "à la demande". Cependant, il est difficile de déboguer ces scripts comme lorsqu'ils sont chargés comme:

jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });

ou

$('#some-container').load('/myOtherPage');

Ces scripts fonctionnent parfaitement, mais si je débogue, comment puis-je définir des points d'arrêt dans ces pages et scripts chargés dynamiquement?

jqueryajaxxmlhttprequestfirebuggoogle-chrome-devtools
48
BLSully

[~ # ~] mise à jour [~ # ~]

Le formulaire accepté est maintenant avec un # (hashtag) plutôt que @ (au symbole)

La syntaxe a été modifiée pour éviter les conflits avec IE instructions de compilation conditionnelle et quelques autres problèmes (merci à Oleksandr Pshenychnyy et Varunkumar Nagarajan de l'avoir signalé)

//#sourceURL=/path/to/file

Cela peut vraiment être n'importe quelle chaîne qui vous aide à identifier le bloc de code.

Un autre bon point de JMac:

Pour moi, le fichier js était affiché dans la liste des sources au sein d'un groupe appelé "(pas de domaine)". Cela vaut la peine d'être mentionné car je l'ai manqué au début!

[~ # ~] original [~ # ~]

J'ai eu du mal avec ce qui précède pendant environ une semaine avant de traverser cet article . Cela fonctionne vraiment parfaitement pour mon environnement de développement (Chrome 22 au moment où j'écris ceci).

Firebug prend également en charge les tampons eval () nommés par le développeur: ajoutez simplement une ligne à la fin de votre eval (expression) comme:

//@ sourceURL=foo.js

Par exemple, étant donné ce simple document html:

<!DOCTYPE html>
<html>
<body>
    <p>My page's content</p>
    <div id="counter"></div>
    <script type="text/javascript">
        //if this page is loaded into the DOM via ajax 
        //the following code can't be debugged 
        //(or even browsed in dev-tools)

        for(i=0;i<10;i+=1) {
            document.getElementById('counter').innerText = i;
        }

        //but if I add the line below
        //it will "magically" show up in Dev Tools (or Firebug)

        //@ sourceURL=/path/to/my/ajaxed/page
    </script>
<body>
</html>

Des choses que je n'ai pas encore découvertes:

  • Cela doit-il être fait pour chaque bloc de script pour les scripts en ligne?
  • Doit-il être la dernière ligne du bloc de script? (L'article suggère que la réponse est oui )
40
BLSully

Ajoutez ceci à vos fichiers js où vous voulez qu'il se casse:

debugger;

Ensuite, entrez/passez/sortez comme tout autre débogueur.

Fonctionne pour les scripts et les pages chargés dynamiquement. Fonctionne uniquement en Chrome pour autant que je sache.

73
Squeee123

Ce problème semble avoir été résolu en général en utilisant le nouveau pragma :

//# sourceURL=filename

Notez le "hachage" # plutôt que 'at' @ symbole.

En incluant cette ligne dans votre source, une référence à celle-ci apparaîtra dans le débogueur!

9
sdw

Comme vous l'avez déjà mentionné, vous pouvez utiliser //@ sourceURL. Chrome ne semble pas prendre en charge //@ sourceURL pour les scripts en ligne. Cela fonctionne sur les expressions eval. Cet article HTML5 sur les cartes sources donne plus de détails sur la dénomination des blocs d'évaluation et la dénomination des fonctions anonymes dans votre code.

Au lieu d'utiliser eval, vous pouvez essayer d'incorporer une balise de script ou JSONP peut l'être.

4
Varunkumar Nagarajan