Função para debugar o valor de uma variável

[Illidan 0]

Fala, galera!

 

Aí vai uma função que eu criei pra debugar o valor de uma variável pelo Javascript. Recomendo a utilização de um navegador bom, como o Opera ou Firefox. Embora funcione no IE, também.

 

Outra recomendação é não começar o debug pelo elemento "document", pois a saída da função é adicionada a ele dinamicamente. O problema nesse caso é que a função de debug cria um novo elemento no documento pra exibir a saída de um outro já existente, e este novo elemento criado entra na fila pra ser debugado. Portanto, poderia entrar num loop infinito. É possível debugar um elemento HTML sem problemas... é só não começar pelo "document" (ou "document.body").

 

[]'s!

 

 

Atualização em 26/07/06

 

/**
* Debug function v0.2
*
* Carlos Reche <carlosreche@yahoo.com>
* Feb 2, 2006
* Jul 26, 2006
*/
window.debug = function(mixedVar) {
 if (!document || !document.createElement) {
return false;
 }
 var d = document;
 if (!d.body) {
d.body = d.createElement("body");
 }
 d._debug = d.body.appendChild(d.createElement("div"));
 d._debug.style.whiteSpace = "pre";
 window.debugCore(mixedVar, d._debug, false, false);
}
window.debugCore = function(v, parent, hideName, hideProperties) {
 hideName = hideName || false;
 hideProperties = hideProperties || false;
 var d = document;
 d.newElement = d.createElement;
 d.newText = d.createTextNode;
 var type = parent.appendChild(d.newText(""));
 var value = parent.appendChild(d.newElement("span"));
 switch (typeof v) {
case "string":
  type.insertData(0, "string(" + v.length + ") ");
  value.appendChild(d.newText("\"" + v + "\""));
  value.style.color = "#c00";
  break;
case "boolean":
  parent.appendChild(d.newText(")"));
  type.insertData(0, "boolean(");
  value.appendChild(d.newText(v ? "true" : "false"));
  value.style.color = "#080";
  break;
case "number":
  parent.appendChild(d.newText(")"));
  var isFloat = (String(v).indexOf('.') != -1);
  type.insertData(0, ((isFloat ? "float" : "integer") + "("));
  value.appendChild(d.newText(v));
  value.style.color = "#f00";
  break;
case "function":
  value.appendChild(d.newText(String(v).replace(/\s+/g, " ")));
  value.style.color = "#00c";
  break;
case "object":
  if (!hideName) {
	var name = String(v);
	if (v) {
	  switch (v.constructor) {
		case Array: name = "[Array]"; break;
		case Error: name = "[object Error]"; break;
		default:
		  if ((typeof Location != "undefined") && (v.constructor == Location)) {
			name = "[object Location]";
		  }
	  }
	}
	value.appendChild(d.newText(name));
	value.style.color = "#080";
  }
  if (hideProperties) {
	break;
  }
  if ((v == document.all) || (v == document.childen)) {
	var em = value.appendChild(d.newElement("em"));
	em.appendChild(d.newText("(not displayed for security reasons)"));
	break;
  }
  var ul = parent.appendChild(d.newElement("ul")), li, span;
  ul.style.margin = "2px 0 5px 30px";
  ul.style.padding = "0";
  ul.style.listStyle = "none";
  for (var i in v) {
	li = ul.appendChild(d.newElement("li"));
	li.style.margin = "0";
	li.style.padding = "2px 0";
	span = li.appendChild(d.newElement("span"));
	span.style.fontWeight = "bold";
	span.appendChild(d.newText(i + ": "));
	if (v[i] && (typeof v[i] == "object")) {
	  span.style.cursor = "pointer";
	  span._objIcon = span.insertBefore(d.newElement("span"), span.firstChild);
	  li.style.position = "relative";
	  span._objIcon.style.position = "absolute";
	  span._objIcon.style.left = "-15px";
	  span._objIcon.innerHTML = "▶ ";
	  span._toDebug = v[i];
	  span._debugged = null;
	  span.onclick = function(e) {
		if (this._debugged) {
		  var icon = this._objIcon, style = this._debugged.style;
		  if (style.display == "none") {
			style.display = "";
			icon.innerHTML = "▼ "; 
		  } else {
			style.display = "none";
			icon.innerHTML = "▶ "; 
		  }
		  return false;
		}
		this._objIcon.innerHTML = "▼ "; 
		this._debugged = this.parentNode.appendChild(document.createElement("div"));
		window.debugCore(this._toDebug, this._debugged, true, false);
	  };
	  span.onmouseover = function(e) {this.style.color = "#f00"; this._objIcon.style.color = "#f00";};
	  span.onmouseout = function(e) {this.style.color = "#000"; this._objIcon.style.color = "#000";};
	}
	window.debugCore(v[i], li, false, true);
  }
  break;
default:
  value.appendChild(d.newText(String(v)));
 }
}

[Fabyo 66]

Parabens mestre dos magos do JS

 

Esse Carlos é o melhor :)