JavaScript, console.log şi navigatoarele


Atunci când codul JavaScript creşte în complexitate, vrei nu vrei mai dai şi de erori. Pentru a depana codul, probabil mulţi folosesc alert(“Am dat-o în bară!”), dar mai elegant şi mai util este să folosim console.log(“Ceva mesaj”). De fapt parametru poate fi şi o variabilă. Dacă e vorba de un obiect, folosim JSON.stringify(), truc amintit şi aici. Şi de fapt mai avem opţiuni: console.info() care cred că e similară (să mă corecteze cine ştie diferenţa), console.warn() pentru avertismente/warning şi console.error() pentru, evident, erori. După cum vedeţi mai jos, informaţiile, avertismentele şi erorile apar vizual diferit.

imagine

Să vedem şi codul care produce ce vedem mai sus:

console.log('Voi genera seria lui Fibbonaci.');
console.info('Să nu fii deci surprins!');
console.warn('Nu ai scris bine.');
console.error('E Fibonacci, nu Fibbonaci.');
a1=0;
console.log("Valoare: "+a1);
a2=1;
console.log("Valoare: "+a2);
for(i=1;i<=10;i++){
    a3=a1+a2;
    console.log("Valoare: "+a3);
    a1=a2;
    a2=a3;
}

Prima captură din articol e din Chrome, unde consola cu mesaje se găseşte rapid: apăsaţi F12 şi dacă nu e activă daţi click pe ea – apare ultima în lista de butoane, chiar în dreapta, unde scrie Console. Observaţi că apare şi numărul de linie de unde provine mesajul, şi cu un click ajungem direct acolo. În Internet Explorer folosim tot F12 şi alegem de asemenea Console (vedeţi captura de mai jos). Vedem iconiţe diferite pentru console.log (cu prefixul LOG) versus console.info (iconiţă cu un i pe cerc albastru).

imagine

În fine, dacă folosiţi Firefox apăsaţi Ctrl+Shift+K sau mergeţi în meniu, Dezvoltator web, Consolă web. (Dacă cumva nu apare, folosiţi about:config şi puneţi devtools.errorconsole.enabled pe true). Veţi vedea ceva ca mai jos. Iconiţele sunt gri.

imagine

Şi dacă tot am luat la rând navigatoarele, să vedem şi în Opera. Meniul Unelte, Avansat, Opera Dragonfly şi evident tot Consolă. Mai jos vedeţi cum arată. Nu avem iconiţe, doar culori diferite la text.

imagine

Acestea fiind spuse, spor la găsirea erorilor – sau urmărirea codului – folosind consola.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *