Comment déboguer le JavaScript chargé dynamiquement (avec jQuery) dans le débogueur du navigateur lui-même?

92

Un script ajouté dynamiquement n'apparaît pas dans la section des scripts du débogueur du navigateur.

Explication:

J'ai besoin d'utiliser et j'ai utilisé

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

afin que myScript.js puisse être chargé dynamiquement en remplissant une condition ... Et myFunction ne peut être appelé qu'après avoir chargé tout le script ...

Mais les navigateurs n'affiche pas le myScript.js chargé dynamiquement dans la section de script de leur débogueur.

Existe-t-il un autre moyen d'atteindre tous les objectifs qui permettront de déboguer un script chargé dynamiquement dans le navigateur lui-même?

javascript debugging dynamic loaded TwiToiT
la source
Double possible de est possible JavaScript loading débogage dynamique par un débogueur comme WebKit, Firebug ou IE8 Developer Tool?
Gourav
2
utiliser debugger;pour arrêter automatiquement dans le script chargé dynamique, voir javascript.info/debugging-chrome
yu yang Jian

Réponses:

208

Vous pouvez attribuer un nom à votre script chargé dynamiquement afin qu'il s'affiche dans le débogueur JavaScript Chrome / Firefox. Pour ce faire, placez un commentaire à la fin du script:

//# sourceURL=filename.js

Ce fichier apparaîtra ensuite dans l'onglet "Sources" sous la forme filename.js. D'après mon expérience, vous pouvez utiliser des \ dans le nom, mais j'obtiens un comportement étrange si vous utilisez des /.

Pour plus d'informations, voir: Points d'arrêt dans la dépréciation JavaScript dynamique de // @ sourceurl

marque
la source
19
Notez qu'il est remplacé par // #, bien que // @ fonctionne toujours dans Chrome. Les scripts dans les fichiers .html peuvent également être nommés de la même manière. Faites attention! Ne laissez aucun espace avant et après le signe «=».
Mert Mertce
11
Pour moi, le fichier js était affiché dans la liste des sources au sein d'un groupe appelé "(pas de domaine)". Cela vaut peut-être la peine d'être mentionné car je l'ai manqué au début!
JMac
7
Juste un conseil. Le débogueur Chrome lance ces fichiers pseudo-javascript dans l'élément de nœud "(no domain)" dans l'onglet Sources, au moins lors du débogage sur localhost. C'est là que je les ai trouvés.
Robert Oschler
1
Une autre chose dont il faut se méfier est le style de commentaire. Le lien "obsolescence de / / @ sourceURL" que vous avez indiqué mentionne à la fois "// # sourceURL =" et "/ * # sourceURL =". C'est parce que cela peut également être utilisé pour CSS, où vous devez utiliser des commentaires de bloc, car les commentaires "//" sur une seule ligne ne sont pas valides. Ce qui m'a surpris, c'est que vous ne pouvez pas utiliser "/ * sourceURL =" en javascript. Il est simplement ignoré.
Jools
2
Afaik, la plupart des minificateurs JavaScript suppriment ces lignes des étapes de production, ce qui les rend inutiles pour un diagnostic de bogue de production.
Lluís Suñol
16

Vous pouvez utiliser //# sourceURL=et //# sourceMappingURL=à la fin de votre fichier de script ou de votre balise de script.

REMARQUE: //@ sourceURL et //@ sourceMappingURLsont obsolètes.

xRavisher
la source
Plus d'informations sur la désapprobation: developer.google.com/web/updates/2013/06/…
Pysis
Bien sûr, mais la plupart des minificateurs supprimeront ces lignes sur les étapes de production.
Lluís Suñol
13

J'ai essayé d'utiliser le "// # sourceURL = filename.js" qui a été suggéré comme solution de contournement par l'OP, mais il n'apparaissait toujours pas pour moi dans le panneau Sources à moins qu'il n'existait déjà dans mes onglets d'une fois il a produit une exception.

Codage d'un "débogueur"; la ligne l'a forcé à se casser à cet endroit. Ensuite, une fois qu'il était dans mes onglets dans le panneau Sources, je pouvais définir des points d'arrêt comme d'habitude et supprimer le "débogueur"; ligne.

kevinpo
la source
6
Il peut également apparaître dans la liste (pas de domaine) sous l'onglet Sources.
Splaktar
1
J'avais également besoin d'utiliser debugger;, et DevTools devait être ouvert pendant le chargement du script.
Barmar
1
un peu d'informations supplémentaires: utilisez les outils de navigation: // comme protocole comme dans //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js
dolbysurnd
6

Notez que le fichier source apparaissant dans l'onglet sources de cette façon apparaîtra dans le groupe (pas de domaine) et, au cas où vous voudriez le déboguer, vous devrez ajouter une debugger;ligne dans votre code, faire que cette ligne soit exécutée (généralement à le début de l'exécution de votre fichier source) puis ajoutez vos points d'arrêt où vous le souhaitez.

Dans le cas où vous déboguez des étapes de production, où vous n'aurez probablement aucune debugger;ligne dans votre code, vous pouvez y arriver en faisant une carte locale avec CharlesProxy vers votre "nouvelle copie du fichier source avec la ligne de débogage insérée".

Lluís Suñol
la source
2
Cela m'a sauvé! Peu importe ce que j'ai fait, le fichier ne s'est pas affiché jusqu'à ce que je mette une commande de débogage. Après cela, il a persisté à travers les recharges de page et les sessions de débogage même après avoir supprimé la commande du débogueur.
Mike Devenney
0

Lorsque j'essaie de suivre ce genre de choses dans IE, j'ouvre les outils de développement (F12), puis je trouve où placer le point d'arrêt en utilisant la ligne suivante dans la console:

debugger;myFunction();

Cela bascule vers l'onglet du débogueur où vous pouvez entrer myFunction()et définir le point d'arrêt.

Alan Samet
la source