Come ottenere il massimo dalla console JavaScript

Uno degli strumenti di debug più basilari in JavaScript è console.log(). Il consoleè dotato di molti altri metodi utili che possono aggiungere al kit di strumenti di debug di uno sviluppatore.

È possibile utilizzare consoleper eseguire alcune delle seguenti attività:

  • Emetti un timer per facilitare il benchmarking semplice
  • Produci una tabella per visualizzare un array o un oggetto in un formato di facile lettura
  • Applica il colore e altre opzioni di stile all'output con CSS

L'oggetto console

L' consoleoggetto ti dà accesso alla console del browser. Ti consente di generare stringhe, array e oggetti che aiutano a eseguire il debug del codice. Fa consoleparte windowdell'oggetto ed è fornito dal Browser Object Model (BOM).

Possiamo accedere a consolein uno dei due modi:

  1. window.console.log('This works')
  2. console.log('So does this')

La seconda opzione è fondamentalmente un riferimento alla prima, quindi useremo la seconda per salvare le sequenze di tasti.

Una breve nota sulla distinta materiali: non ha uno standard predefinito, quindi ogni browser lo implementa in modi leggermente diversi. Ho testato tutti i miei esempi sia in Chrome che in Firefox, ma il tuo output potrebbe apparire in modo diverso a seconda del browser.

Emissione di testo

L'elemento più comune consoledell'oggetto è console.log. Per la maggior parte degli scenari, lo userai per portare a termine il lavoro.

Esistono quattro modi diversi per inviare un messaggio alla console:

  1. log
  2. info
  3. warn
  4. error

Tutti e quattro funzionano allo stesso modo. Tutto quello che devi fare è passare uno o più argomenti al metodo selezionato. Quindi visualizza un'icona diversa per indicare il suo livello di registrazione. Negli esempi seguenti, puoi vedere la differenza tra un registro a livello di informazioni e un registro a livello di avviso / errore.

Potresti aver notato il messaggio del registro degli errori: è più appariscente degli altri. Visualizza sia uno sfondo rosso che una traccia dello stack, dove infoe warn non. Anche warnse ha uno sfondo giallo in Chrome.

Queste differenze visive aiutano quando è necessario identificare rapidamente eventuali errori o avvisi nella console. Ti consigliamo di assicurarti che vengano rimossi per le app pronte per la produzione, a meno che non siano lì per avvisare gli altri sviluppatori che stanno facendo qualcosa di sbagliato con il tuo codice.

Sostituzioni di stringhe

Questa tecnica utilizza un segnaposto in una stringa che viene sostituita dagli altri argomenti passati al metodo. Per esempio:

Ingresso :console.log('string %s', 'substitutions')

Uscita :string substitutions

Il %sè il segnaposto per il secondo argomento 'substitutions'che viene dopo la virgola. Qualsiasi stringa, numero intero o array verrà convertito in una stringa e sostituirà il file %s. Se passi un oggetto, verrà visualizzato [object Object].

Se vuoi passare un oggetto, devi usare %oo %Oinvece di %s.

console.log('this is an object %o', { obj: { obj2: 'hello' }})

Numeri

La sostituzione di stringa può essere utilizzata con numeri interi e valori a virgola mobile utilizzando:

  • %io %dper numeri interi,
  • %f per virgola mobile.

Ingresso :console.log('int: %d, floating-point: %f', 1, 1.5)

Uscita :int: 1, floating-point: 1.500000

I float possono essere formattati per visualizzare solo una cifra dopo il punto decimale utilizzando %.1f. È possibile %.nfvisualizzare un numero di cifre dopo il decimale.

Se abbiamo formattato l'esempio precedente per visualizzare una cifra dopo il punto decimale per il numero in virgola mobile, sarebbe simile a questo:

Ingresso :console.log('int: %d, floating-point: %.1f', 1, 1.5)

Uscita :int: 1, floating-point: 1.5

Identificatori di formattazione

  1. %s| sostituisce un elemento con una stringa
  2. %(d|i)| sostituisce un elemento con un numero intero
  3. %f | sostituisce un elemento con un float
  4. %(o|O)| l'elemento viene visualizzato come un oggetto.
  5. %c| Applica il CSS fornito

Modelli di stringa

Con l'avvento di ES6, i letterali modello sono un'alternativa alle sostituzioni o alla concatenazione. Usano le virgolette (``) invece delle virgolette e le variabili vanno all'interno ${}:

const a = 'substitutions';
console.log(`bear: ${a}`);
// bear: substitutions

Gli oggetti vengono visualizzati come [object Object]nei valori letterali del modello, quindi dovrai utilizzare la sostituzione con %oo %Oper vedere i dettagli o registrarli separatamente da solo.

Using substitutions or templates creates code that’s easier to read compared to using string concatenation: console.log('hello' + str + '!');.

Pretty color interlude!

Now it is time for something a bit more fun and colorful!

It is time to make our console pop with different colors with string substitutions.

I will be using a mocked Ajax example that give us both a success (in green) and failure (in red) to display. Here’s the output and code:

const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center'].join(';');
const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center'].join(';');
console.info('%c /dancing/bears was Successful!', success);console.log({data: { name: 'Bob', age: 'unknown'}}); // "mocked" data response
console.error('%c /dancing/bats failed!', failure);console.log('/dancing/bats Does not exist');

You apply CSS rules in the string substitution with the %c placeholder.

console.error('%c /dancing/bats failed!', failure);

Then place your CSS elements as a string argument and you can have CSS-styled logs. You can add more than one %c into the string as well.

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

This will output the words ‘red’, ‘blue’ and ‘white’ in their respected colors.

There are quite a few CSS properties supported by the console. I would recommend experimenting to see what works and what doesn’t. Again, your results may vary depending on your browser.

Other available methods

Here are a few other available console methods. Note that some items below have not had their APIs standardized, so there may be incompatibilities between the browsers. The examples were created with Firefox 51.0.1.

Assert()

Assert takes two arguments — if the first argument evaluates to a falsy value, then it displays the second argument.

let isTrue = false;
console.assert(isTrue, 'This will display');
isTrue = true;
console.assert(isTrue, 'This will not');

If the assertion is false, it outputs to the console. It’s displayed as an error-level log as mentioned above, giving you both a red error message and a stack trace.

Dir()

The dir method displays an interactive list of the object passed to it.

console.dir(document.body);

Ultimately, dir only saves one or two clicks. If you need to inspect an object from an API response, then displaying it in this structured way can save you some time.

Table()

The table method displays an array or object as a table.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);

The array’s indices or object property names come under the left-hand index column. Then the values are displayed in the right-hand column.

const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table(superhero);

Note for Chrome users: This was brought to my attention by a co-worker but the above examples of the table method don’t seem to work in Chrome. You can work around this issue by placing any items into an array of arrays or an array of objects:

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);
const superhero = { firstname: 'Peter', lastname: 'Parker',}console.table([superhero]); 

Group()

console.group() is made up of at least a minimum of three console calls, and is probably the method that requires the most typing to use. But it’s also one of the most useful (especially for developers using Redux Logger).

A somewhat basic call looks like this:

console.group();console.log('I will output');console.group();console.log('more indents')console.groupEnd();console.log('ohh look a bear');console.groupEnd();

This will output multiple levels and will display differently depending on your browser.

Firefox shows an indented list:

Chrome shows them in the style of an object:

Each call to console.group() will start a new group, or create a new level if it’s called inside a group. Each time you call console.groupEnd() it will end the current group or level and move back up one level.

I find the Chrome output style is easier to read since it looks more like a collapsible object.

You can pass group a header argument that will be displayed over console.group:

console.group('Header');

You can display the group as collapsed from the outset if you call console.groupCollapsed(). Based on my experience, this seems to work only in Chrome.

Time()

The time method, like the group method above, comes in two parts.

A method to start the timer and a method to end it.

Once the timer has finished, it will output the total runtime in milliseconds.

To start the timer, you use console.time('id for timer') and to end the timer you use console.timeEnd('id for timer') . You can have up to 10,000 timers running simultaneously.

The output will look a bit like this timer: 0.57ms

It is very useful when you need to do a quick bit of benchmarking.

Conclusion

There we have it, a bit of a deeper look into the console object and some of the other methods that come with it. These methods are great tools to have available when you need to debug code.

There are a couple of methods that I have not talked about as their API is still changing. You can read more about them or the console in general on the MDN Web API page and its living spec page.