La console è la componente dei developer tools di un browser in cui vengono loggati i messaggi di errore e quelli di debug inseriti nel programma. L'aspetto dei messaggi potrebbe variare da un browser all'altro, io uso Chrome.
log()
Il metodo log() stampa il valore delle variabili passate come parametro. Per i tipi primitivi viene stampato il valore della variabile al momento della chiamata della funzione, ma gli oggetti vengono passati per riferimento perciò vediamo il valore che hanno nel momento in cui guardiamo la console.
var persona = {
nome: "Mario",
cognome: "Rossi",
anni: 20
}
console.log(persona); //qui anni vale 20
persona.anni = 30;
console.log(persona);
//adesso apriamo la console, vedremo stampato due volte
//{nome: "Mario", cognome: "Rossi", anni: 30}
//per evitarlo dobbiamo stampare una copia dell'oggetto
console.log(JSON.parse(JSON.stringify(persona)));
persona.anni = 40;
console.log(JSON.parse(JSON.stringify(persona)));
//nella console vedremo stampato
//{nome: "Mario", cognome: "Rossi", anni: 30}
//{nome: "Mario", cognome: "Rossi", anni: 40}
//è possibile passare più valori alla funzione:
console.log("il valore dell'oggetto persona è: ", persona); //Attenzione! non usare la concatenazione (+) ma passare due parametri
//"il valore dell'oggetto persona è:"
// {nome: "Mario", cognome: "Rossi", anni: 40}
dir() / dirxml()
Il metodo dir() è analogo al log() ma differisce nel modo in cui tratta gli elementi del DOM. Se usiamo il metodo log() vedremo stampato il tag HTML, se usiamo il metodo dir() vedremo stampato l'oggetto del DOM. Invece dirxml()
var bd = document.body;
console.log(bd); //"<body>... tutti i tag del body </body>"
console.dir(bd); //body { ... tutte le proprietà del body}
console.dirxml(bd); //stesso output di console.log()assert()
Il metodo assert() stampa un messaggio di errore se il parametro passato è false, altrimenti non stampa niente.
console.assert(5 > 7); //"Assertion failed: console.assert"
console.assert(5 < 7); //non stampa nienteclear()
Il metodo clear() svuota la console.
debug() / info() / warn() /error()
Possiamo impostare dei livelli di log nella console in modo da poter filtrare i messaggi, per fare questo dobbiamo qualificare i messaggi come di debug (stampati solo quando è attivo il livello Verbose), di informazione (stampati se è attivo il livello Info), di avvertimento (se è attivo il livello Warnings), di errore (se è attivo il livello Errors.)
console.debug("debug"); //visualizzato se è attivo il livello Verbose nei filtri
console.info("info"); //visualizzato se è attivo il livello Info
console.warn("warning!"); //su sfondo giallo con icona di alert
console.error("Error :("); //in rosso con icona di erroretable()
Il metodo table() presenta un array o un oggetto in forma di tabella. E' possibile passare un secondo parametro per indicare quali colonne vogliamo che siano stampate.
var partite = [
["Juventus", "Inter"],
["Fiorentina", "Milan"],
["Lazio", "Roma"],
["Napoli", "Atalanta"],
["Genoa", "Bologna"],
["Palermo", "Reggiana"]
]
console.table(partite);
trace()
Il metodo trace() stampa lo stack delle funzioni che sono state eseguite prima della chiamata alla funzione
function prima() {
console.trace();
}
function seconda() {
prima();
}
function terza() {
seconda();
}
terza(); //stamperà le funzioni prima, seconda e terzacount() / countReset()
Il metodo count() stampa un numero progressivo ogni volta che viene chiamato. E' anche possibile assegnare una label. Con countReset() si resetta il contatore a 0.
var array = [11, 27, 44, 98];
for (let index = 0; index < array.length; index++) {
if (array[index] % 2 == 0) {
console.count("pari"); //"pari: 1" "pari: 2"
}
else {
console.count("dispari"); //"dispari: 1" "dispari: 2"
}
}
console.count("pari"); //"pari: 3"
console.countReset("pari"); //non stampa nulla
console.count("pari"); //"pari: 1"group() / groupCollapsed() / groupEnd()
I metodi group(), groupCollapsed() e groupEnd() servono per raggruppare i messaggi in sottogruppi oppure in sottogruppi apribili come un accordion.
console.group("Titolo del primo gruppo");
console.log("primo messaggio del primo gruppo");
console.groupEnd(); //fine del primo gruppo
console.group("Titolo del secondo gruppo");
console.log("primo messaggio del secondo gruppo");
console.groupEnd(); //fine del secondo gruppo
console.groupCollapsed("Titolo del primo gruppo collapsed");
console.log("primo messaggio del primo gruppo collapsed");
console.groupEnd(); //fine del primo gruppo collapsed
console.groupCollapsed("Titolo del secondo gruppo collapsed");
console.log("primo messaggio del secondo gruppo collapsed");
console.groupEnd(); //fine del secondo gruppo collapsedtime() / timeLog() / timeEnd()
I metodi time(), timeLog() e timeEnd() servono per creare e stoppare dei timer in modo da poter misurare il tempo impiegato da un'azione.
console.time("forloop"); //inizia il timer
for (var i = 0; i < 100; i++) {
if ( i == 50) {
console.timeLog("forloop", "50esimo giro");
}
}
console.timeEnd("forloop"); //stoppa il timer e logga il tempo totale dell'operazione