console.log()

Unul din obiceiurile deprinse de-a lungul timpului este să folosesc console.log() de fiecare dată când vreau să testez ceva. O alternativă aproape decentă pentru alert().

De ce nu alert()?

  • Un alertbox este modal. Adică blochează accesul la restul paginii. Deci interacțiune… Sufletu’.
  • Dacă vrei să afișezi mai multe mesaje va trebui să afișezi mai multe alert-uri. Yay! Mai multe „ok” de apăsat!
  • Dacă rezultatul este un obiect, nu vei primi prea multe informații despre acel obiect.

console.log()

Apariția Firebug a însemnat un pas uriaș în debugging. Inspector DOM cu care poți vedea proprietățile unui element în pagină, debugger javascript cu care poți descoperi (mai) ușor problemele, monitor de rețea, o consolă în care poți fie rula scripturi fie afișa mesaje și alte jucării care îți fac viața mai ușoară.

Eh, consola aia – care între noi fie vorba, a fost băgată ulterior și în IE8, Opera, Chrome și Safari – te scapă de multe probleme generate de vechiul alert():

  • Nu este modal. Poți trimite ceva în consolă fără să te deranjeze sau să te încurce în niciun fel.
  • Nefiind modal, nu trebuie să dai OK-uri ca nebunu’ => poți afișa oricâte mesaje.
  • Dacă ce trimiți în consolă este un array, de exemplu, îți arată conținutul array-ului.
  • Ai un API (nu știu dacă sunt disponibile și în restul browserelor).

Ce mai? Este greu să mă abțin și să nu-l folosesc. Prin urmare, se mai întâmplă să uit câte un console.log() prin cod. Asta înseamnă că… În IE (sau în FF, dacă este dezactivată consola) scriptul nu va mai funcționa.

Soluția!

Soluția e simplă și emulează într-o oarecare măsură console.log(). Nu foarte mult, doar cât să te scape de alert-uri enervante:

if(typeof(console)==='undefined'){
	var consoleWrap = document.createElement('div');
			consoleWrap.id = "consoleWrap";
			document.body.appendChild(consoleWrap);
	var console = {
		log : function(e){
			var c = document.getElementById('consoleWrap');
			c.innerHTML = c.innerHTML + '<br/>' + e;
		}
	};
};

Dacă vrei să fii sigur că nu ai erori dacă ai vreun console.log() rebel, ce nu s-a lăsat găsit, poți folosi următorul cod:

if(typeof(console)==='undefined'){
	var console = {
		log : function(e){
			return;
		}
	};
};

Este evident că se aplică doar pentru console.log(), restul funcțiilor din api nefiind adresate în mod constant (eu le folosesc foarte rar). Dar dacă ai nevoie, nu ai decât să adaugi mai multe funcții.

Spor!

7 Comentarii to “console.log()”

  1. function cl(o) {
      try { console.log(o) } catch(e) { }
    }
  2. abordarea e gresita, lasa-l sa arunce exceptie macar in IE, sa nu-l uiti acolo.

  3. function cl(o) {
      try { console.log(o) } catch(e) { alert(o) }
    }
    

    Atunci asa.

  4. which language do you speak? I can’t recognize.

  5. Staicu Ionuț-Bogdan

    which language do you speak? I can’t recognize.

    Romanian http://goo.gl/tUkB thanks for… reading me :D

Show trackbacks
  1. […] S-a lansat Firebug 1.6. Beta, dar să sperăm că aduce și o îmbunătățire de viteză și că repară buguri enervante de genul „nu mai merge consola”. […]

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>