Discussion :

[Walkn]

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

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

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.

[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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

debugger;

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

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

Encore merci d'avance pour votre aide.

[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...).

[marcbuils]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[danielhagnoul]

Et avec $.getScript() ?