CactusCrew

Voici un outil pratique pour debugger en JS, et qui fonctionne sur la plupart des navigateurs.

Il est plus qu'utile de pouvoir farfouiller récurcivement dans nos variables en JS.
3 formes possibles :

1. alert_r(elt); affiche dans une alert JS le contenu de la variable.
2. document_r(elt); dans le body de la page.
3. window_r(elt); dans un popup.

Il est possible de spécifier un second argument définissant la profondeur de récurssivité (2 par défaut).
Ci dessous, le code réalisé par mes soins, donc si vous trouvez un bug (huhu), prévenez moi :
(testé avec succès sur Firefox, IE, et Opéra)

function debugJS() {
	
	/**
	 *	tabulation
	 */
	this.tabul			= '    ';
	
	/**
	 * fonctions
	 */
	this.dumpJS			= dumpJS;
	
	
	/**
	 *	@desc	decompose récursivement un element
	 *	@param	mixed	elt		element a decomposer
	 *	@param	int		max		nombre maxi de recurances
	 *	@param	string	S_tab	suivi des tabulations
	 *	@param	int		rec		suivi de reccuression
	 */
	function dumpJS(elt, max, S_tab, rec) {
		if (max == undefined) {
			max = 2;	
			
		}
		rec++;
		var S_result	= '';
		if (elt == 'undefined') {
			return "undefined";
			
		}
		switch (typeof elt) {
			case 'object' : 
				S_result	+= "object {\n";
				if (rec < max) {
					for (myI in elt) {
						try {
							S_result += S_tab + this.tabul + '[' + myI + '] => ' 
							S_result += this.dumpJS(elt[myI], max, S_tab + this.tabul, rec);
							
						} catch (e) {
							S_result += S_tab + this.tabul + '[' + myI + '] => ' + "** ERROR **\n";
							
						}
						
					}
					
				} else {
					S_result += S_tab + this.tabul + "** MAX RECURSION **\n";	
					
				}
				S_result	+= S_tab + "}\n";
				break;
				
			case 'string' :
				S_result	+= typeof elt + ' "' + elt + "\"\n";
				break;
 
			default :
				S_result	+= typeof elt + '(' + elt + ")\n";
				break;
				
		}
		return S_result;
		
	}
	
}
 
___O_debugJS	= new debugJS();
/**
 *	@desc	decompose récursivement un element et affiche une alerte
 *	@param	mixed	elt		element a decomposer
 *	@param	int		max		nombre maxi de recurances
 */
function alert_r(elt, max) {
	alert(___O_debugJS.dumpJS(elt, max, "", 0));	
	
}
 
/**
 *	@desc	decompose récursivement un element et affiche dans le body
 *	@param	mixed	elt		element a decomposer
 *	@param	int		max		nombre maxi de recurances
 */
function document_r(elt, max) {
	document.write('<pre>');	
	document.write(___O_debugJS.dumpJS(elt, max, "", 0));	
	document.write('</pre>');	
	
}
 
 
/**
 *	@desc	decompose récursivement un element et affiche une nouvelle fenetre
 *	@param	mixed	elt		element a decomposer
 *	@param	int		max		nombre maxi de recurances
 */
function window_r(elt, max) {
	win = window.open('', 'format','width=400,height=300,left=50,top=50,status,menubar,scrollbars,resizable');
	win.document.write('<pre>' + ___O_debugJS.dumpJS(elt, max, "", 0) + '</pre>');
	win.focus();	
	
}

Les tests

	
 
/** tableau d'essai **/
A_tablo	= new Array();
A_tablo.push(10.6);
A_tablo.push(11);
A_tablo.push(12);
A_tablo.tablo = new Array();
A_tablo.tablo.tablo2 = new Array();
A_tablo.tablo.tablo2.tablo3 = new Array();
A_tablo.tablo.tablo2.tablo3.tablo4 = new Array();
A_tablo.tablo.tablo2.tablo3.tablo4.tablo5 = new Array();
A_tablo.tablo.tablo2.push('TADA');
A_tablo.tablo.tablo2.tablo3.push('TADA');
A_tablo.tablo.tablo2.tablo3.tablo4.push('TADA');
A_tablo.tablo.tablo2.tablo3.tablo4.tablo5.push('TADA');
 
alert_r(A_tablo, 2);
document_r(A_tablo, 10);
window_r(A_tablo, 2);
 

Voir un exemple vivant --> ici