Potenziare il console.log() lato client con qualche trucco

Durante lo sviluppo di un software si trova sempre la necessità di controllare gli output in console, in particolare con lo sviluppo front-end.

In questo articolo vediamo di potenziare il console.log() di JavaScript per ottenere versioni più ordinate dei nostri output, ricordando che non tutti i metodi vengono accettati da altri browser al di fuori di Chrome.

Predisponiamo l’ambiente

Per testare le funzionalità della nostra console non utilizzerò lo strumento inspect in maniera diretta come input/output, creeremo un nuovo file HTML con file JavaScript correlato in modo da simulare delle situazioni il più reale possibile.

Creiamo una cartella per il nostro progetto chiamata console-log-power-up ed al suo interno posizioniamo file e cartelle in modo da rispettare la seguente struttura ad albero:

console-log-power-up
|_ js
| |_ script.js
|
|_ index.html

La directory tree (albero delle directory) appena abbozzato, serve a farci capire come organizzare file e cartelle nel nostro progetto, la chiave di lettura è quella di:

Sono cartelle (directory) tutti i nomi che non hanno una estensione, nel nostro caso console-log-power-up e js;
Sono file tutti i nomi che hanno una estensione, in questo caso script.js e index.html;

All’interno del nostro file HTML creiamo un codice base utilizzando la emmet abbreviation ovvero digitando all’inizio del file HTML semplicemente il carattere ! .

Questo avrà come effetto la creazione di un frammento base di codice HTML standard che possiamo utilizzare come personalizzazione.

Aggiungiamo all’interno del codice un titolo ed il tag script che ci servirà per includere il codice sorgente JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <<!-- your code: start -->
    <h1>Open code inspector please ;)</h1>

    <script src="js/script.js"></script>
    <!-- your code: end -->
</body>
</html>

Tutto ciò che vediamo all’interno del body, caratterizzato dalle stringhe your code: start/end sarà il codice sorgente non creato dalla emmet abbreviation.

A questo punto possiamo iniziare a personalizzare il codice JavaScript con l’obiettivo di utilizzare tutte le funzioni più comode della console.

Il classico console.log()

Il potenziamento di una funzionalità avviene conoscendone prima le basi, innanzitutto apriamo la pagina appena creata, aprendo il code inspector (F12 shortcut per Google Crome Windows), questa procedura è scontata poiché l’analisi che faremo si interfaccerà con la console di V8, il JavaScript Engine di Chrome, con cui il code inspector si interfaccia.

Introduciamo all’interno di script.js il seguente frammento di codice:

console.log("Hello");
console.log(54);
console.log({name: "Giovanni", last: "Pace"});

Notiamo che:

Il tipo stringa, risultato dell’output della prima riga di codice, assume un colore chiaro a testimonianza di ciò (per il tema scuro di Google Chrome, sarebbe nero altrimenti)
Il cambio di colore della riga due sta ad indicare un dominio numerico associato al valore
Il terzo campo, visto come JavaScript Object viene riconosciuto come campo eterogeneo composto e l’utility di console ci permette una consultazione più immediata.

La visualizzazione sequenziale di variabili

Immaginiamo adesso di voler effettuare l’output di una sequenza di variabili non necessariamente correlate:

//...

let varString = "Hello";
let varNumber = 54;
let varObject = {
    name: "Giovanni", 
    last: "Pace"
};

console.log(varString, varNumber, varObject)

scaturirà un output sequenziale su una singola linea che però preserva la visualizzazione dell’oggetto con tutte le proprie caratteristiche:

La visualizzazione sotto forma di JavaScript Object

Nel caso in cui ci troviamo a voler visualizzare in modo sequenziale più di una variabile con tipologie eterogenee, possiamo utilizzare la notazione JavaScript Object.

Questa metodologia ci permette di richiamare la sola variabile senza dover necessariamente rispettare la combinazione chiave-valore poiché il nome della chiave verrà assegnato automaticamente con il nome della variabile:

//...

let varName = "Giovanni";
let varLast = "Pace";
let varCod = "PCAGNN";
let varAge = 35;

console.log({varName, varLast, varCod, varAge});

// Same result with different indent
// console.log(
//     {
//         varName, 
//         varLast, 
//         varCod, 
//         varAge
//     }
// );

Il risultato del codice eseguito nella riga 6 infatti sarà:

Ciò che viene illustrato invece dalla riga 11 alla riga 12 è un modo più ordinato di illustrare il JavaScript Object, il risultato in output non cambia.

Messaggi di warning e di errore in console

Il classico console.log() viene potenziato dalla gestione di warning ed errori, questi sono utili per porre la giusta attenzione all’output selezionato.

Vediamo ora come utilizzare un warning in console, molto utile per avvertire lo sviluppatore di deprecazioni o impostazioni consigliate:

//...
console.warn("Please pay attention to me, i am a warning!");
console.log("I am a normal console.log()");
console.warn("Again i am a warning!");

Nella riga 2 e 4 possiamo vedere l’operatore console.warn(“…”) che evidenzia con icona e testo colorato il warning suggerito, nella riga 3 viene introdotto un normale console.log(“…”) per mostrarne la differenza.

Se l’output non viene visualizzato è molto probabile che i livelli di warning ed error siano disabilitati di default, clicchiamo sull’apposito tasto Default levels per impostare i filtri di visualizzazione in console ed accertiamoci di averli tutti selezionati:

Il livello più elevato di attenzione si ottiene con un error, vediamo come implementarlo:

//...
console.error("Ooops... i am an error!");
console.log("I am a normal console.log()");
console.error("Again... another error!");

Anche in questo caso nella riga 2 e 4 viene introdotto il comando console.error(“…”) che mostra con icona ed evidenza rossa un eventuale problema di esecuzione:

Come nell’esempio precedente nella riga 3 viene introdotto un semplice console.log(“…”) per mostrare la differenza con gli output di errore.

Visualizzazione tabellare in console

Google Chrome è stato pioniere nell’introduzione di un nuovo stile di visualizzazione, dei dati in console che va oltre la semplice elencazione di oggetti. Se ci troviamo davanti ad un elenco con proprietà molto simili possiamo utilizzare il comando console.table() per strutturare graficamente una semplice tabella in console.

Guardiamo un esempio di un array di oggetti omogenei:

// ...
let arrayPeople = [
    {
        name: "Giovanni", 
        last: "Pace", 
        code: "PCAGNN", 
        age: 35
    },
    {
        name: "Mario", 
        last: "Rossi", 
        code: "MARRSS", 
        age: 25
    },
    {
        name: "Valeria", 
        last: "Verdi", 
        code: "VLRVRD", 
        age: 33
    },
];

console.table(arrayPeople);

Il codice appena illustrato avrà come output la seguente organizzazione grafica:

Questa metodologia di approccio è estremamente intuitiva per sequenze di oggetti composte da chiave-valore infatti le chiavi diventano automaticamente le colonne della tabella ed i valori i dati corrispondenti al relativo campo. L’elenco dei record visualizzati viene numerato a seconda dell’indice (index) introdotto in automatico nella prima colonna.

Cosa succede però nel caso in cui i dati introdotti non sono omogenei quindi alcuni oggetti possiedono più o meno proprietà di altri:

// ...
let arrayPeople = [
    {
        name: "Giovanni", 
        last: "Pace", 
    },
    {
        name: "Mario", 
        code: "MARRSS", 
        age: 25
    },
    { 
        last: "Verdi", 
        code: "VLRVRD", 
        age: 33
    },
];

console.table(arrayPeople);

Il risultato sarà una tabella con i campi vuoti dove la proprietà non esiste: