(articolo redatto da Gaetano De Pascale)
Ci sono due tipi di Javascript developer: quelli che usano il console.log come metodo di debug “veloce” e quelli che mentono! Ma conosciamo davvero tutti i modi per utilizzare la console?
Console.log è indubbiamente il metodo di debug più utilizzato e forse potrebbe bastare conoscere questo, ma proviamo ad andare oltre ed evidenziare altre metodologie per utilizzare l’oggetto console.
1. console.table
Ci permette di stampare e visualizzare in console dati in forma tabellare:
[code language=”javascript”]
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const persons = [
new Person("John", "Doe"),
new Person("Mario", "Rossi"),
new Person("Andrea", "Bianchi"),
new Person("Jane", "Smith")
];
console.table(persons);
[/code]
2. console.dir
Ci permette di stampare una lista di tutte le proprietà di un oggetto sotto forma di elemento espandibile.
[code language=”javascript”]
console.dir(document.location);
[/code]
3. console.group – console.groupEnd
Ci permette di raggruppare un insieme di log dandoci un titolo.
[code language=”javascript”]
console.group("Log in fase di loading …");
console.log(‘href:’ + document.location.href);
console.log(‘sto caricando la pagina iniziale’);
console.groupEnd();
[/code]
4. console.log
Anche lo stesso classico console.log può essere usato in maniere differente:
[code lang=”javascript”]
const name = ‘Paperino’;
console.log(‘log:’, name);
console.log(‘log:’, { name });
[/code]
console.log e nome della variabile da stampare ————> stampa il contenuto della variabile
console.log e variabile tra parentesi quadre ————> stampa il nome della variabile ed il suo valore
5. console.debug – console.warn – console.info – console.error
Ci permettono di tracciare informazioni a diverso livello in modo da poterli filtrare tramite la console.
[code lang=”javascript”]
console.debug(‘debug’);
console.warn(‘warn’);
console.info(‘info’);
console.error(‘error’);
[/code]
6. console.assert
Ci permette di scrivere un messaggio di errore quando l’assert non è verificato.
[code lang=”javascript”]
const errorMsg = "the # is not even";
for (let number = 2; number <= 5; number++) {
console.log(`the # is ${number}`);
console.assert(number % 2 === 0, "%o", { number, errorMsg });
}
[/code]
7. console.trace
Ci permette di scrivere un messaggio di errore quando l’assert non è verificato.
[code lang=”javascript”]
console.trace();
[/code]
Ci permette di stampare in console lo stack trace applicativo.
8. console.clear
Il metodo clear() è utilizzato per svuotare la console.
9. console.time – console.timeEnd
Ci permette di verificare il tempo di esecuzione di una porzione di codice.
[code lang=”javascript”]
console.time("Start long running code");
const bigAarray = new Array(10000);
for (let i = 0; i < bigAarray.length; i++) {
bigAarray[i] = {
id: i,
name: ‘Obj_’ + i,
};
}
console.timeEnd("Start long running code");
[/code]
Conclusioni
E tu? Li utilizzi questi comandi o ti basta il console.log? Conosci altri utilizzi dell’oggetto console?
Se anche tu vuoi occuparti di progetti di ricerca e sviluppo IT di ultima generazione
dai un’occhiata alle nostre opportunità di lavoro e conosciamoci subito!
