web-dev-qa-db-fra.com

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

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 s'il remplit une condition ... Et myFunction ne peut être appelé qu'après avoir chargé tout le script ...

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

Existe-t-il une autre solution pour que tous les objectifs puissent être atteints, ce qui permettra de déboguer un script chargé dynamiquement dans le navigateur lui-même?

javascriptdebuggingdynamicloaded
77
TwiToiT

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

//# sourceURL=filename.js

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

Pour plus d'informations, voir: Points d'arrêt en JavaScript dynamiqueobsolète de // @ sourceurl

187
Mark

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

REMARQUE://@ sourceURL et //@ sourceMappingURL sont obsolètes.

13
xRavisher

J'ai essayé d'utiliser le "// # sourceURL = filename.js" qui a été suggéré comme solution de contournement par l'OP, mais il ne s'affichait toujours pas pour moi dans le panneau Sources sauf s'il existait déjà dans mes onglets à une époque précédente lorsque cela 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.

10
kevinpo

Notez que le fichier source apparaissant dans l'onglet sources de cette manière apparaîtra dans le groupe (pas de domaine) et, si vous souhaitez le déboguer, vous devrez ajouter un debugger; ligne dans votre code, exécutez cette ligne (généralement au 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 pas de debugger; lignes dans votre code, vous pouvez y arriver en faisant un mappage local avec CharlesProxy vers votre "nouvelle copie du fichier source avec la ligne de débogueur insérée".

4
Lluís Suñol

Lorsque j'essaie de suivre ce genre de chose 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 dans myFunction() et définir le point d'arrêt.

0
Alan Samet