Est-il possible de déboguer le chargement dynamique de JavaScript par un débogueur comme WebKit, FireBug ou IE8 Developer Tool?


90

À partir de ma question récente , j'ai déjà créé une fonction JavaScript pour une vue partielle de chargement dynamique. Donc, je ne peux déboguer aucun JavaScript de chargement dynamique. Parce que tout le JavaScript chargé sera évalué par la fonction "eval".

Cependant, j'ai trouvé un moyen de créer un nouveau JavaScript en utilisant le script suivant pour créer dynamiquement un script dans l'en-tête du document actuel. Tous les scripts chargés seront affichés dans HTML DOM (que vous pouvez utiliser n'importe quel débogueur pour le trouver).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

À propos, la plupart des débogueurs (IE8 Developer Toolbar, Firebug et Google Chrome) ne peuvent pas définir de point d'arrêt dans aucun script dynamique. Parce que le script déboguable doit être chargé la première fois après le chargement de la page.

Avez-vous une idée de débogage dans un contenu ou un fichier de script dynamique?

Mise à jour 1 - Ajouter un code source pour les tests

Vous pouvez utiliser le fichier xhtml suivant pour essayer de déboguer une valeur variable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

De réponse, je viens de le tester dans FireBug. Le résultat doit être affiché comme ci-dessous les images.

texte alternatif http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxe_ugbugbugbugbug_gorlwSJDvTNGlw8ghyxE_Gorlugbugbugbgt0gbugbgbgbgbgbgbgbugbugbgbgbugbugbugbgbugbugbgbugbugbgbgbugbugbgbugbugbgbugbugbgbugbugbuggbugbuggbgbugbuggbgbgbugbgbgbgbugbgbgbugbugbgbugbugml

Veuillez regarder le script "dynamicLoadingScript" qui est ajouté après le chargement de la page.

texte alternatif http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCNGsdcV9jsi4B5yCNGsdcV9jsi4B5yCNGsdcV9jsi4B5yCNGbugmbugmt41-dehdebb

Mais il ne se trouve pas dans l'onglet de script de FireBug

Mise à jour 2 - Créer un point d'arrêt de débogage dans un script de chargement dynamique

texte alternatif http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAETo4ngdGPAAp_1q0JWAETo4h2gdGPAAp_1q0JWAET20Vuger

texte alternatif http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQUXc1Acl3QazeozrCABo7pNVQXc1AclAcl-ng-ngrCABo7pNVQXC1AclAcl-ngrCABo7pNVQXc1Acl

Les deux images ci-dessus montrent l'insertion de "débogueur;" L'instruction dans une ligne de script peut déclencher un point d'arrêt dans un script de chargement dynamique. Cependant, les deux débogueurs n'affichent aucun code au point d'arrêt. Par conséquent, il est inutile de faire cela.

Merci,


Avez-vous trouvé une solution à cela? Je suis ici avec le même problème.
adamJLev

Essayez de charger un fichier séparé de manière dynamique, c'est-à-dire voir ici pour une implémentation queryj.com/2011/03/11/a-lightweight-script-loader - Je trouve que les débogueurs gèrent cela beaucoup plus facilement.
James Westgate

@infinity, découvrez ma solution
Molecular Man

3
2014 et vos images sont toujours mortes - Pouvez-vous les réafficher?
TheGeekZn

J'ai une question similaire mais je ne peux pas le dire car les images sont cassées. Pouvez-vous les mettre à jour?
Eric

Réponses:


117

Il serait également possible d'utiliser le chrome pour la même chose. Chrome dispose d'une fonctionnalité dans laquelle vous pouvez spécifier un attribut d'analyseur et faire apparaître le morceau de JS dynamique sous la forme d'un fichier qui peut ensuite être parcouru et des points d'arrêt définis.

l'attribut qui doit être défini est

//# sourceURL=dynamicScript.js

où dynamicScript.js est le nom du fichier qui doit apparaître dans le navigateur de fichiers de script.

Plus d'informations ici

Paul Irish en parle également brièvement dans son excellent discours sur Tooling & The Webapp Development Stack


5
Au cas où quelqu'un aurait des problèmes avec MVC3 / Razor, n'oubliez pas d'échapper au symbole @, donc quelque chose comme // @@ sourceURL = dynamiccript.js Et juste pour info, ce qui précède fonctionne également dans Firebug.
parsh

1
Vous pouvez également utiliser cette fonctionnalité pour les javascripts en ligne dynamiques. Mais, si vous avez une exception dans ce script, vous ne la verrez pas dans la liste des sources.
Roman Snitko

4
Notez que la nouvelle syntaxe est "// # sourceURL = dynamicScript.js" changement de @ à #
Cekk

3
le lien mis à jour vers la section des outils de développement Chrome sur les cartes source est - developer.chrome.com/devtools/docs/…
chrismarx

3
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

21

Essayez d'ajouter un "débogueur;" déclaration dans le javascript que vous ajoutez dynamiquement. Cela devrait provoquer son arrêt sur cette ligne, quels que soient les paramètres de point d'arrêt.


Tout ce que je peux trouver, c'est ceci: code.google.com/p/fbug/issues/detail?id=1259 . À propos, j'utilise une balise de script ajoutée à la tête pour charger dynamiquement des scripts (mais en utilisant un attribut src), et le code ajouté de cette manière est déboguable pour moi sur tous les navigateurs, même s'il n'est pas chargé avec la page initiale.
Joeri Sebrechts

Quel est le code exact que vous utilisez pour ajouter la balise de script? J'ai le même problème que l'OP, ce qui rend impossible le débogage des fichiers JS chargés dynamiquement dans Chrome. THX!
adamJLev

var loaderNode = document.createElement ("script"); loaderNode.setAttribute ("type", "text / javascript"); loaderNode.setAttribute ("src", url); document.getElementsByTagName ("head") [0] .appendChild (loaderNode);
Joeri Sebrechts

18

Oui, il est (maintenant) possible de déboguer du JavaScript chargé dynamiquement à l'aide de Google Chrome!

Pas besoin d'ajouter des debugger;attributs supplémentaires ou tout autre attribut pour le fichier JS chargé dynamiquement. Suivez simplement les étapes ci-dessous pour déboguer:

Méthode 1:

Mon responsable technique vient de montrer un moyen très simple de déboguer des méthodes Javascript chargées dynamiquement.

  1. Ouvrez la console de chrome et écrivez le nom de la méthode et appuyez sur Entrée.
    Dans mon cas, c'est GetAdvancedSearchConditonRowNew
    Si la méthode JS a été chargée, elle affichera la définition de la méthode.

entrez la description de l'image ici


  1. Cliquez sur la définition de la méthode et tout le fichier JS sera ouvert pour le débogage :)

entrez la description de l'image ici


Méthode 2:

Par exemple, je charge un fichier JS lorsque je clique sur un bouton en utilisant l' ajaxappel.

  1. Ouvrir l' networkonglet dans les outils de développement de Google Chrome
  2. Cliquez sur un contrôle (ex. Bouton) qui charge un fichier javascript et appelle une fonction javascript.
  3. observez l'onglet réseau et recherchez cette fonction JS (dans mon cas, c'est le cas RetrieveAllTags?_=1451974716935)
  4. Survolez son initiateret vous trouverez votre fichier JS chargé dynamiquement (avec préfixe VM*).

déboguer le chargement dynamique de JavaScript dans chrome -1


  1. Cliquez sur ce VM*fichier pour l'ouvrir.
  2. Placez le débogueur où vous voulez dans ce fichier: D

déboguer le chargement dynamique de JavaScript dans chrome -1



Honte à Google d'avoir rendu cela si obtus. 1 / Honte = Félicitations (l'inverse de la honte) à vous pour l'avoir retiré :)
toddmo

16

J'utilise google chrome à cette fin.

Dans Chrome à l'onglet scripts, vous pouvez activer la `` pause sur toutes les exceptions ''

entrez la description de l'image ici

Et puis mettez quelque part dans votre ligne de code try{throw ''} catch(e){}. Chrome arrêtera l'exécution lorsqu'il atteindra cette ligne.

EDIT: image modifiée pour qu'il soit plus clair de quoi je parle.


Pour développer dans Google Chrome, vous devez insérer du texte qui indique le nom du script dynamique actuel lorsque jQuery ou tout autre script de chargement ajoute un script au DOM comme je l'ai signalé à l'équipe jQuery. Mais je n'ai pas le temps de travailler dessus. bugs.jquery.com/ticket/8292
Soul_Master

@Soul_Master, mais en utilisant ma méthode, vous n'avez pas besoin d'insérer de texte. Vous insérez dans votre ligne de script dynamique try{throw ''} catch(e){}puis activez le mode 'pause sur toutes les exceptions' et Chrome arrêtera l'exécution lorsque l'exeption est levée. Je l'ai vérifié plusieurs fois. J'ai chargé une autre image. Ce dont je parle est plus clair.
Molecular Man

Dans Chrome, vous pouvez utiliser l'instruction "debugger;" pour interrompre une instruction lorsque le panneau du débogueur est ouvert. Chrome ignorera simplement cela si le panneau du débogueur est fermé.
dinesh ygv

@dineshygv, vous pouvez ... maintenant. Mais vous ne pouviez pas il y a 3 ans. debuggerne fonctionnerait pas dans un script créé dynamiquement à l'époque.
Molecular Man

10

Je pense que vous devrez peut-être donner au code évalué un "nom" comme celui-ci:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Si vous le faites, je pense que l' debuggerapproche de la "mise à jour 2" devrait fonctionner alors.


Oui. Je le vois. J'ai déjà signalé ce bug à l'équipe jQuery depuis longtemps. bugs.jquery.com/ticket/8292
Soul_Master

1
Avertissement! la technique décrite provoque une erreur dans IE7, alors ne laissez pas le //@ sourceURL=blahen production.
Jethro Larson le

c'est probablement la debuggerpartie qui cause des problèmes, pas le commentaire source (qui est sûrement ignoré par JS)
Kyle Simpson

Cela peut poser des problèmes avec la compilation conditionnelle. par exemple: javascriptkit.com/javatutors/conditionalcompile.shtml
Jethro Larson

5

MISE À JOUR : la syntaxe de sourceUrl a été modifiée (@ est remplacé par #) pour éviter les erreurs sur les navigateurs non pris en charge (lire: IE). Détails


2

Utilisation de Chrome (12.0.742.112) avec le code que vous avez fourni plus une instruction de débogage comme celle-ci

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

travaille pour moi.

J'ai besoin de modifier certains JavaScript (en limitant la portée de tous les sélecteurs jQuery à la division partielle actuelle> vue) avant de l'exécuter.

Que ce soit plus tangible si vous liez le changement de sélecteur à un événement sur votre vue partielle au lieu de créer des éléments de script dans le corps html (ne semble pas correct).

Tu pourrais faire quelque chose comme ça

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

Ce code ajouterait toujours un sélecteur de limitation à toutes les opérations de sélection jQuery effectuées lorsque la souris est dans un certain élément étant donné que le HTML n'est pas gâché.

(Cela semble toujours hacker, peut-être que quelqu'un a une meilleure solution)

à votre santé


1

Dans Firebug, vous devriez pouvoir voir ce script une fois la page chargée et le script injecté. Lorsque vous le faites, vous pouvez définir un point d'arrêt à l'endroit approprié, et il sera conservé lorsque vous actualiserez la page.


Vous avez raison. Cela ne marche pas. Je l'ai essayé avec eval () et Firebug vous permettra de définir un point d'arrêt lorsque vous l'utiliserez. Y a-t-il une raison pour laquelle vous ne pouvez pas utiliser eval () et devez définir une balise de script? Plus généralement, y a-t-il une raison pour laquelle vous ne pouvez pas servir ce javascript dynamique en tant que fichier .js séparé sur votre serveur? Quel problème essayez-vous de résoudre?
Moishe Lettvin

J'ai besoin de modifier certains JavaScript (limitant la portée de tous les sélecteurs jQuery à la vue partielle div actuelle) avant de l'exécuter. Ou vous avez une idée pour résoudre ma question récente. Pour plus d'informations, veuillez consulter ma récente question.
Soul_Master

1

Le Javascript chargé de manière dynamique doit encore être analysé par le navigateur.C'est là que se trouve WebKit ou le débogueur FireBug, il est donc soumis au débogueur quoi qu'il arrive, je pense que c'est la même chose pour les outils de développement dans IE8,

Donc, votre code est soumis au débogueur, donc là où vous rencontrez un problème ne sera pas dans ce fichier ou ce texte s'il n'erreur

L'autre chose est que ce script.text = "alert('Test!');";n'est pas valide, donc cela ne fonctionnera pas dans tous les navigateurs, ce que vous voulez estscript.innerHTML = "alert('Test!');";

même si son innerHTML cela signifie du code à l'intérieur des balises HTML et non le HTML à l'intérieur, les gens l'utilisent le plus pour cela, donc il est mal expliqué

MODIFIÉ POUR LA MISE À JOUR DEUX

Et lors de la deuxième mise à jour avec Chrome, je l'ai fait

aller à environ: vide Ouvrir la console et passer

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

puis il cassera et ouvrira l'onglet de script avec about: blank affiché (rien à voir)

Ensuite, sur le côté droit, affichez la liste de la pile d'appels, puis cliquez sur la deuxième (fonction anonyme) et elle vous montrera.

Donc, sur votre fichier, vous aurez une (fonction anonyme) qui est le code que vous exécutez et vous verrez le point d'arrêt là-dedans. donc vous savez que vous êtes dans le bon.


0

À l'aide de l' outil de développement Google Chrome (ou Safari ), vous pouvez exécuter JavaScript ligne par ligne. Scripts de l'

outil de développement Choisissez le script que vous souhaitez déboguer le signe de pause sur le côté droit Ou définissez des points d'arrêt en cliquant sur le numéro de ligne>>>


0

Une option que j'aime l'utiliser en ajoutant une instruction console.log ('') dans mon code. Une fois que cette déclaration apparaît dans la console, un numéro de ligne lui est associé. Vous pouvez cliquer sur ce nombre pour accéder à l'emplacement dans la source et définir un point d'arrêt. L'inconvénient de cette approche est que les points d'arrêt ne sont pas conservés lors des recharges de page et que vous devez parcourir le code avant de pouvoir ajouter un débogueur.


0

Pour le navigateur Google Chrome actuel ou d'autres navigateurs modernes, vous pouvez facilement rechercher tout code évalué avec un outil de développement comme les images suivantes.

  1. Simulez un fichier de chargement dynamique.

entrez la description de l'image ici

  1. Appuyez sur Ctrl + Maj + F dans l' onglet source et recherchez la fonction ci-dessus.

entrez la description de l'image ici

Créez un point d'arrêt et exécutez une fonction pour le tester.

entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.