88 votes

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

De mon récent question, j'ai déjà créé une certaine fonction JavaScript pour le chargement dynamique vue partielle. Donc, je ne peux pas déboguer tout le chargement dynamique de code JavaScript. Parce que tous chargés JavaScript sera évalué par "eval" de la fonction.

Cependant, j'ai trouvé un moyen de créer de nouveaux JavaScript en utilisant le script suivant pour créer dynamiquement script dans l'en-tête du document en cours. Tous les scripts chargés seront affichés dans les DOM HTML (que vous pouvez utiliser un 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);

En passant, la plupart des débogueur (IE8 Barre d'outils du Développeur, Firebug et Google Chrome) ne peut pas définir des points d'arrêt dans un script dynamique. Parce que debuggable script doit être chargé à la première fois après le chargement de la page.

Avez-vous des idée pour le débogage de script dynamique de contenu ou d'un fichier?

Mise à jour 1 - Ajouter du code pour les tests

Vous pouvez utiliser ce fichier xhtml pour essayer de déboguer someVariable valeur.

<!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 des images.

alt text

S'il vous plaît regardez "dynamicLoadingScript" script est ajouté après le chargement de la page.

alt text

Mais il n'a pas trouvé dans l'onglet script de FireBug

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

alt text

alt text

Les deux images ci-dessus montrent l'insertion "débogueur;" instruction dans une certaine ligne de script peut l'incendie point d'arrêt dans le chargement dynamique de script. Toutefois, les deux débogueurs de ne pas montrer tout le code au point d'arrêt. Par conséquent, il est inutile pour cela.

Merci,

116voto

icecubed Points 570

Il serait également possible d'utiliser google chrome pour le même. Google Chrome dispose d'une fonction où vous pouvez spécifier un analyseur d'attributs et de rendre la pièce de la dynamique JS apparaître comme un fichier qui peut ensuite être consulté à et des points de rupture définie.

l'attribut qui doit être mis est

//# sourceURL=dynamicScript.js

où dynamicScript.js est le nom du fichier qui doit s'afficher dans le fichier de script navigateur.

Plus d'informations ici

Paul Irish également en parle brièvement dans son excellent exposé sur l'Outillage Et de La Webapp de Développement de la Pile

21voto

Joeri Sebrechts Points 7483

Essayez d’ajouter un « débogueur » ; énoncé dans le code javascript que vous ajoutez dynamiquement. Cela devrait amener à mettre un terme à cette ligne indépendamment des paramètres de point d’arrêt.

16voto

Molecular Man Points 15187

J’utilise google chrome à cet effet.

En chrome à onglet scripts, vous pouvez activer « pause sur toutes les exceptions »

enter image description here

Et puis mettez quelque part dans votre ligne de code `` . Chrome va arrêter l’exécution lorsqu’il atteint cette ligne.

EDIT : modification image donc il serait plus clair ce que je vous parle.

10voto

Kyle Simpson Points 3800

Je pense que vous pourriez avoir besoin donner les eval eu code un « nom » comme ceci :

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

Si vous le faites, je pense que c’est probablement la `` approche de la « mise à jour 2 » devrait fonctionner alors.

5voto

DJ_HOEK Points 131

Mise à jour: la syntaxe de sourceUrl a été changée (@ est remplacé par #) pour éviter les erreurs sur les navigateurs non pris en charge (lire : IE). Détails

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X