À 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.
Veuillez regarder le script "dynamicLoadingScript" qui est ajouté après le chargement de la page.
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
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,
la source
Réponses:
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
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
la source
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.
la source
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.
Dans mon cas, c'est
GetAdvancedSearchConditonRowNewSi la méthode JS a été chargée, elle affichera la définition de la méthode.
Méthode 2:
Par exemple, je charge un fichier JS lorsque je clique sur un bouton en utilisant l'
ajaxappel.networkonglet dans les outils de développement de Google ChromeRetrieveAllTags?_=1451974716935)initiateret vous trouverez votre fichier JS chargé dynamiquement (avec préfixeVM*).VM*fichier pour l'ouvrir.la source
J'utilise google chrome à cette fin.
Dans Chrome à l'onglet scripts, vous pouvez activer la `` pause sur toutes les exceptions ''
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.
la source
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.debuggerne fonctionnerait pas dans un script créé dynamiquement à l'époque.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.la source
//@ sourceURL=blahen production.debuggerpartie qui cause des problèmes, pas le commentaire source (qui est sûrement ignoré par JS)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
la source
Utilisation de Chrome (12.0.742.112) avec le code que vous avez fourni plus une instruction de débogage comme celle-ci
travaille pour moi.
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
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é
la source
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.
la source
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
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.
la source
À 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
>>>la source
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.
la source
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.
Créez un point d'arrêt et exécutez une fonction pour le tester.
la source