Debug em JavaScript

Bah, ficar mostrando milhares de alert´s para poder debugar um script em java script em sua webpag é um verdadeiro saco… aí então resolvi acabar com isto.

Criei um método de debugar em js, que é por mensagens ou logs, como quiserem;
Na bem da verdade eu nao criei este método, eu só criei o meio de fazê-lo acontecer.

Bom, é assim: copie este código e salve-o como ‘debug.js’ por exemplo.

/*FUNCOES DE DEBUG PARA O JSCRIPT*/
function Debug(){
	this.nameDiv = 'divDebug';
    this.running = false;
    this.htmlTemporario = '';
    this.create = function () {
        document.write('<div id="' + this.nameDiv + '" style="display: none; right:0px; position: absolute; bottom: 0px; heigth: 100px; width: 700px; border: 1px solid black; font-family: Tahoma; font-size: 11px;"></div>');
    }
    this.getdiv =function () {
		return document.getElementById(this.nameDiv);;
    };
    this.getdata =function () {
		var d=new Date();
		return((d.getMonth()+1)+'/'+d.getDate()+'/'+d.getFullYear());
    };
    this.gethora =function (){
		var today=new Date()
		var h=today.getHours()
		var m=today.getMinutes()
		var s=today.getSeconds()
		// add a zero in front of numbers<10
		if (s<10){s="0" + s}
		if (m<10){m="0" + m}
		return h+':'+m+':'+s
    };
    this.print=function (texto) {
        var frase = " [" + this.getdata() + "-" + this.gethora() + "] " + texto + "
";
		if( this.running ){
            var div = this.getdiv();
            div.innerHTML = div.innerHTML + frase;
        }else{
            this.htmlTemporario = this.htmlTemporario + frase;
        }
    };
    this.esconde=function(){
        this.getdiv().style.display = 'none';
    };
    this.mostra=function(){
        var div = this.getdiv();
        div.style.display = '';
        if(this.htmlTemporario!=''){
            div.innerHTML = this.htmlTemporario;
            this.htmlTemporario = '';
        }
    };
};
var debug = new Debug();
debug.create();
function desabilitaDebug(){
    debug.running = false;
    debug.print('== JS Debug stopped ==');
    debug.esconde();
}
function habilitaDebug(){
    debug.running = true;
    debug.mostra();
	debug.print('== JS Debug started ==');
}
/*FUNCOES DE DEBUG PARA O JSCRIPT*/

Inclua-o no seu html, seja ele resultante de qq meio: pode ser do PHP, do JSP, do ASP ou ASP.NET, qq coisa.
E pronto, você está agora apto a debugar em java script !

Para debugar é o seguinte:

“habilitaDebug()” -> Deve ser chamado somente no onload do body da página. Este método cria e mostra a div que vai ser utilizada como painel dos logs, no canto direito inferior da página…

“desabilitaDebug()” -> Pode ser chamado a qq momento depois do habilitaDebug, ele faz o contrário : esconde a div de logs.

“debug” -> Um objeto do tipo “Debug” que é a variavel criada para o tratamento do debugger…

“debug.print(texto)” -> imprime, com data e hora , um log no painel de logs.

Esta versão foi criada ainda meio no susto, por necessidade, mas logo mais estarei dando uma melhradinha nele, e vou disponibilizando as atualizações para vocês aqui… Ok !

Usem e abusem , baixem , alterem, distribuam, copiem ! E nao esquecam: LINUX FOREVER !

No related posts.

This entry was posted in Geral, Programação. Bookmark the permalink.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>