Comment débugger un javascript qui est chargé via Ajax ?

Version imprimable

01/10/2012, 11h59
Walkn

Comment débugger un javascript qui est chargé via Ajax ?

Bonjour à tous,

Je viens poster une nouvelle discussion car je suis confronté à un problème.

J'aimerai savoir comment faire pour débugger un fichier JavaScript est chargé via Ajax ?

Je m'explique :

J'ai une page web, dans laquelle se trouve un bouton qui m'affiche une popin via lightbox et jquery. Cette popin correspond à une JSP qui contient un fichier JavaScript qui lui est propre.

Ce que j'aimerai, c'est pouvoir débugger ce JavaScript au travers de Firebug pour pouvoir mettre des points d’arrêt et m'assurer que tout se déroule bien.

Hors je ne peux pas mettre de point d'arrêt dans ce JavaScript pour la simple et bonne raison que celui-ci n'apparait pas dans l'onglet script de Firebug :cry::cry:

Ce que j'ai constaté, c'est que le fichier en question est chargé via Ajax. J'ai constaté cela dans l'onglet réseau de Firebug. Mais impossibilité de le débugger :cry::cry:

Est-ce quelqu'un à déjà eu ce problème ? Ou est-ce que quelqu'un pourrait essayer de m'aider à résoudre ce problème ?

Je vous remercie par avance pour votre aide.
02/10/2012, 12h41
marcbuils

Bonjour Walkn,

Je ne vais pas avoir la réponse à ton problème, mais personnellement, j'utilise le moyen suivant afin de le contourner:
- ajoute une balise script qui charge ton fichier sur ta page principale, comme ça tu devrais pouvoir déboguer ton JS.

Je sais que ce n'est pas l'idéale, mais je n'ai pas encore trouvé de débogueur qui prenne en compte les chargements dynamiques en Ajax.

@++,
Marc
02/10/2012, 13h10
Walkn

Bonjour marcbuils,

Merci pour ton retour. En somme, ce que tu me conseils, c'est de ne plus charger mon JavaScript correspondant à ma popin au moment où celle-ci apparait mais plutôt au sein de la page principale ?

D'autre part, j'ai essayé en rajoutant

Code:

debugger;

à l'endroit où je souhaite débugger mon JavaScript mais cela ne fonctionne pas non plus ...:cry::cry:

Est-ce quelqu'un aurait réussi à débugger des JavaScripts chargés dynamiquement en Ajax ??

Encore merci d'avance pour votre aide.
03/10/2012, 14h00
marcbuils

Pas exactement,

Je te conseil, juste le temps de ton debug, de rajouter un chargement classique en avec la balise script. Je pense que tu peux même garder le chargement dynamique en plus, il me semble que Firebug arrive à s'en sortir (à tester...).

Bonjour Walkn,

Je reviens vers toi car depuis ton message, on m'a fait découvrir une nouvelle méthode pour charger les fichiers de manière asynchrone: le LazyLoad.
Un des avantages de cette méthode, c'est que le fichiers chargés sont débogable avec Firebug.

Le principe est d'ajouter des balise scripts dans le header de la page Web et non de les charger en Ajax, mais sur le fond le résultat est le même.

Voici une fonction qui fait ça très bien:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 // lazyload script // ref: http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/ var _loadScript = function(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if ( script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); };
@++,

Marc

31/10/2012, 20h56
danielhagnoul

Et avec $.getScript() ?

Avec jQuery.getScript(), j'utilise la méthode suivante:

Imaginons qu'on souhaite débugger le fichier test.js suivant:
Code:

1 2 3 4 5 6 7 8 ;(function($){ $(function(){ $('#test').click(function(){ alert('div selectionne'); }); } ); })(jQuery);
La page HTML pourrait ressembler à ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!doctype> <html> <head> <meta charset="utf8"></meta> <title>test de jQuery.getScript( url [, success(script, textStatus, jqXHR)] )</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script> ;(function($){ $.getScript( 'test.js', function( script, textStatus, jqXHR ){ alert("script charge"); }); })(jQuery); </script> </head> <body> <div id="test">clique ici</div> </body> </html>
Mais avec cette méthode on a en effet un problème, tout le code apparait sur une seule ligne sous Firebug ce qui ne nous permet pas de pouvoir le debugger.
Dans ce cas, le temps du debug, je rajoute le chargement du script directement dans le header.

Ce qui donnerais la page HTML suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!doctype> <html> <head> <meta charset="utf8"></meta> <title>test de jQuery.getScript( url [, success(script, textStatus, jqXHR)] )</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  <script src="test.js"></script> <script> ;(function($){ $.getScript( 'test.js', function( script, textStatus, jqXHR ){ alert("script charge"); }); })(jQuery); </script> </head> <body> <div id="test">clique ici</div> </body> </html>
Avec cette méthode, le fichier "test.js" apparait sous firebug ce qui nous permet de pouvoir ajouter des points d'arrêts.

Cependant, si on peut utiliser la fonction loadScript à la place de $.getScript, je pense qu'il ne faut surtout pas s'en priver car elle offre les même avantages mais en plus elle permet de debugger son code sans manipulation supplémentaire.

Bon code,

Marc

Salut,

Pour information, suite à ce post, je viens de créer un plugin jQuery qui utilise le système de lazyload mais cette fois ci complètement intégré à jQuery:
jQuery.loadScript - http://marcbuils.github.com/jquery.loadscript/

Ce plugin permet aussi de charger plusieurs script et d'exécuter une callback qu'une fois tous les scripts chargés (grace à l'utilisation des Diferred).

Voici quelques exemples d'utilisation:
Exemple 1: Exemple utilisant les Diferred (recommandé)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype> <html> <head> <meta charset="utf8"></meta> <title>Exemple of jQuery.loadScript with differed</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="../jquery.loadscript.js"></script> <script> ;(function($){ $.loadScript('test.js').done(function(){ $('#test').test(); }); })(jQuery); </script> </head> <body> <div id="test"></div> </body> </html>
Exemple 2: Exemple utilisant le système de callback
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype> <html> <head> <meta charset="utf8"></meta> <title>Exemple of loadScript with callback</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="../jquery.loadscript.js"></script> <script> ;(function($){ $.loadScript('test.js', function(){ $('#test').test(); }); })(jQuery); </script> </head> <body> <div id="test">clique ici</div> </body> </html>
Exemple 3: Exemple de chargement de plusieurs scripts
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!doctype> <html> <head> <meta charset="utf8"></meta> <title>Exemple of multiple script loading</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="../jquery.loadscript.js"></script> <script> ;(function($){ $.when( $.loadScript('test.js'), $.loadScript('test2.js') ).done(function(){ $('#test').test(); $('#test2').test2(); }); })(jQuery); </script> </head> <body> <div id="test">clique ici</div> <div id="test2">clique ici</div> </body> </html>
Qu'en pensez-vous ? Ça peut servir non ?

@++,

Marc

01/11/2012, 18h10
danielhagnoul

Bonsoir

Réponse au message n° 7.

Je n'ai pas les mêmes résultats.

Pour : $.getScript( "http://danielhagnoul.developpez.com/lib/plugin-dvjh/jquery.dvjhTooltip-2.8.3.js" );.

Avec Firefox ou Chrome : j'ai accès normalement au code dans l'onglet "script" (Firebug) ou dans l'onglet "Sources" (Chrome).

C'est uniquement les codes compressés (minified) qui se présentent sur une seule ligne. Par exemple : $.getScript( "http://danielhagnoul.developpez.com/lib/dvjh/mandelbrot.min.js" );.
01/11/2012, 18h31
marcbuils

En effet, lorsque j'essaye ta ligne je retrouve bien le script normalement dans Firebug.
Le problème n'est donc présent que lorsqu'on charge un script local à son site, du coup jQuery privilégie un chargement Ajax alors que si le domaine du fichier est différent de celui de la page comme pour ton exemple, il n'a pas les droits nécessaires pour un chargement Ajax du coup il doit probablement faire un chargement classique par le biais de la balise script.

Par contre, je ne sais pas si il est possible de forcer le comportement distant pour les scripts locaux ce qui, dans le cas du debug, serait intéressant...
02/11/2012, 15h08
SpaceFrog

quel interet de le bebugguer lorsqu'il est chargé en ajax ... ???

Autant le mettre en script externe le temps du developpement, ce qui permettra de le debugguer normalement et ne l'appeler en ajax qu'une fois debuggué ..
03/11/2012, 01h32
marcbuils

Pour ma part, je trouve que tant qu'à charger un script de façon asynchrone, autant qu'il soit debogable directement, ça permet de moins perdre de temps sur la mise en place du debug. Mais il faut savoir que je développe principalement des applications intranet RIA avec beaucoup de Javascipt (en general entre 20 et 30 fichiers js différents par projet, sans compter les librairies externes).
Car je développe directement en html/javascript pour la partie client, sachant que la partie serveur n'est là que pour fournir des WebServices REST ou WebSocket).