JavaScript
consolle

introduzione

Sintassi

• void console.log (obj1 [, obj2, ..., objN]);
• void console.log (msg [, sub1, ..., subN]);

Parametri

Osservazioni

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

if (!window.console)
{ 
    console = {log: function() {}}; 
}

Tabulazione valori - console.table ()

Nella maggior parte degli ambienti, console.table() può essere utilizzato per visualizzare oggetti e matrici in formato tabulare.

Per esempio:

console.table(['Hello', 'world']);

mostra come:

console.table({foo: 'bar', bar: 'baz'});

mostra come:

var personArr = [{"personId": 123, "nome": "Jhon", "città": "Melbourne", "phoneNo": "1234567890"}, {"personId": 124, "nome": "Amelia" , "city": "Sydney", "phoneNo": "1234567890"}, {"personId": 125, "nome": "Emily", "città": "Perth", "phoneNo": "1234567890"}, {"personId": 126, "nome": "Abraham", "city": "Perth", "phoneNo": "1234567890"}];

console.table (personArr, ['name', 'personId']);

mostra come:

Inclusione di una traccia stack durante la registrazione - console.trace ()

function foo() {
  console.trace('My log statement');
}

foo();

Visualizzerà questo nella console:

My log statement       VM696:1
  foo                  @ VM696:1
  (anonymous function) @ (program):1

Nota: se disponibile, è utile sapere che la stessa traccia di stack è accessibile come proprietà dell'oggetto Error. Questo può essere utile per la post-elaborazione e la raccolta di feedback automatici.

var e = new Error('foo');
console.log(e.stack);

Stampa sulla console di debug del browser

Una console di debug del browser può essere utilizzata per stampare semplici messaggi. Questo debug o console web può essere aperto direttamente nel browser (tasto F12 nella maggior parte dei browser - vedere Note sotto per ulteriori informazioni) e il metodo di log dell'oggetto console può essere richiamato digitando quanto segue:

console.log('My message');

Quindi, premendo Enter , questo mostrerà il My message nella console di debug.

console.log() può essere chiamato con qualsiasi numero di argomenti e variabili disponibili nell'ambito corrente. Argomenti multipli verranno stampati su una riga con un piccolo spazio tra di loro.

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

Il metodo di log mostrerà quanto segue nella console di debug:

['string']  1  Object { test: 1 }  Window { /* truncated */ }

Accanto a semplici stringhe, console.log() può gestire altri tipi, come matrici, oggetti, date, funzioni, ecc .:

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

Displays:

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

Gli oggetti nidificati possono essere compressi:

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

Displays:

Object { key1: 'val', key2: Array[2], key3: Object }

Alcuni tipi di oggetti Date e function possono essere visualizzati in modo diverso:

console.log(new Date(0));
console.log(function test(a, b) { return c; });

Displays:

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

Altri metodi di stampa

Oltre al metodo di log , i browser moderni supportano anche metodi simili:

• console.info - piccola icona informativa (ⓘ) appare sul lato sinistro delle stringhe o degli oggetti stampati.

• console.warn - l'icona di avviso piccola (!) appare sul lato sinistro. In alcuni browser, lo sfondo del registro è giallo.

• console.error - l'icona dei tempi piccoli (⊗) appare sul lato sinistro. In alcuni browser, lo sfondo del registro è rosso.

• console.timeStamp - emette l'ora corrente e una stringa specificata, ma non è standard:

  console.timeStamp('msg');
  

  Displays:

  00:00:00.001 msg
  

• console.trace : emette la traccia dello stack corrente o visualizza lo stesso output del metodo log se invocato nell'ambito globale.

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  Displays:

  first
  sec
  (anonymous function)
  

L'immagine sopra mostra tutte le funzioni, ad eccezione di timeStamp , in Chrome versione 56.

Questi metodi si comportano in modo simile al metodo di log e in diverse console di debug possono essere visualizzati in diversi colori o formati.

In alcuni debugger, le singole informazioni sugli oggetti possono essere ulteriormente espanse facendo clic sul testo stampato o su un piccolo triangolo (►) che si riferisce alle rispettive proprietà dell'oggetto. Queste proprietà degli oggetti compressi possono essere aperte o chiuse nel registro. Vedere la console.dir per ulteriori informazioni su questo

Tempo di misurazione - console.time ()

console.time() può essere utilizzato per misurare la durata di esecuzione di un'attività nel codice.

Chiamando console.time([label]) avvia un nuovo timer. Quando viene chiamato console.timeEnd([label]) , il tempo trascorso, in millisecondi, dal momento che la .time() originale .time() viene calcolata e registrata. A causa di questo comportamento, è possibile chiamare .timeEnd() più volte con la stessa etichetta per registrare il tempo trascorso da quando è stata effettuata la chiamata originale .time() .

Esempio 1:

console.time('response in');

alert('Click to continue');
console.timeEnd('response in');

alert('One more time');
console.timeEnd('response in');

produrrà:

response in: 774.967ms
response in: 1402.199ms

Esempio 2:

var elms = document.getElementsByTagName('*'); //select all elements on the page

console.time('Loop time');

for (var i = 0; i < 5000; i++) {
    for (var j = 0, length = elms.length; j < length; j++) {
        // nothing to do ...
    }
}

console.timeEnd('Loop time');

produrrà:

Loop time: 40.716ms

Conteggio - console.count ()

console.count([obj]) posiziona un contatore sul valore dell'oggetto fornito come argomento. Ogni volta che viene invocato questo metodo, il contatore viene aumentato (ad eccezione della stringa vuota '' ). Un'etichetta insieme a un numero viene visualizzata nella console di debug in base al seguente formato:

[label]: X

label rappresenta il valore dell'oggetto passato come argomento e X rappresenta il valore del contatore.

Il valore di un oggetto viene sempre considerato, anche se le variabili sono fornite come argomenti:

var o1 = 1, o2 = '2', o3 = "";
console.count(o1);
console.count(o2);
console.count(o3);

console.count(1);
console.count('2');
console.count('');

Displays:

1: 1
2: 1
: 1
1: 2
2: 2
: 1

Le stringhe con i numeri vengono convertite in Number oggetti:

console.count(42.3);
console.count(Number('42.3'));
console.count('42.3');

Displays:

42.3: 1
42.3: 2
42.3: 3

Le funzioni puntano sempre sull'oggetto Function globale:

console.count(console.constructor);
console.count(function(){});
console.count(Object);
var fn1 = function myfn(){};
console.count(fn1);
console.count(Number);

Displays:

[object Function]: 1
[object Function]: 2
[object Function]: 3
[object Function]: 4
[object Function]: 5

Alcuni oggetti ottengono specifici contatori associati al tipo di oggetto a cui si riferiscono:

console.count(undefined);
console.count(document.Batman);
var obj;
console.count(obj);
console.count(Number(undefined));
console.count(NaN);
console.count(NaN+3);
console.count(1/0);
console.count(String(1/0));
console.count(window);
console.count(document);
console.count(console);
console.count(console.__proto__);
console.count(console.constructor.prototype);
console.count(console.__proto__.constructor.prototype);
console.count(Object.getPrototypeOf(console));
console.count(null);

Displays:

undefined: 1
undefined: 2
undefined: 3
NaN: 1
NaN: 2
NaN: 3
Infinity: 1
Infinity: 2
[object Window]: 1
[object HTMLDocument]: 1
[object Object]: 1
[object Object]: 2
[object Object]: 3
[object Object]: 4
[object Object]: 5
null: 1

Stringa vuota o assenza di argomento

Se non viene fornito alcun argomento mentre si immette in sequenza il metodo count nella console di debug , viene considerata una stringa vuota come parametro, ovvero:

> console.count();
  : 1
> console.count('');
  : 2
> console.count("");
  : 3

Debugging con assertions - console.assert ()

Scrive un messaggio di errore sulla console se l'asserzione è false . Altrimenti, se l'asserzione è true , questo non fa nulla.

console.assert('one' === 1);

Possono essere forniti più argomenti dopo l'asserzione - questi possono essere stringhe o altri oggetti - che verranno stampati solo se l'asserzione è false :

console.assert non lancia un AssertionError (ad eccezione di Node.js ), il che significa che questo metodo non è compatibile con la maggior parte dei framework di testing e che l'esecuzione del codice non si interromperà in caso di affermazione fallita.

Formattazione dell'output della console

Molti dei metodi di stampa della console possono anche gestire la formattazione di stringhe in stile C , utilizzando % token:

console.log('%s has %d points', 'Sam', 100);

Displays Sam has 100 points .

L'elenco completo degli specificatori di formato in Javascript è:

Stile avanzato

Quando l'identificatore di formato CSS ( %c ) è posizionato sul lato sinistro della stringa, il metodo di stampa accetterà un secondo parametro con regole CSS che consentono un controllo preciso sulla formattazione di quella stringa:

console.log('%cHello world!', 'color: blue; font-size: xx-large');

Displays:

È possibile utilizzare più specificatori di formato %c :

• qualsiasi sottostringa alla destra di un %c ha un parametro corrispondente nel metodo di stampa;
• questo parametro può essere una stringa emtpy, se non è necessario applicare le regole CSS alla stessa sottostringa;
• se due %c si trovano identificatori di formato, il 1 ^° (racchiusi in %c ) e 2 ^° sottostringa avranno le regole definite nel 2 ^° e 3 ^° parametro del metodo di stampa rispettivamente.
• se tre %c si trovano identificatori di formato, quindi il 1 ^°, 2 ^° e 3 ^rd sottostringhe avrà le regole definite nel 2 ^°, 3 ^° e 4 ^° parametro rispettivamente, e così via ...

console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

Displays:

Uso dei gruppi per rielaborare l'output

L'output può essere identificato e racchiuso in un gruppo comprimibile nella console di debug con i seguenti metodi:

• console.groupCollapsed() : crea un gruppo di voci compresso che può essere espanso tramite il pulsante di divulgazione per rivelare tutte le voci eseguite dopo che questo metodo è stato richiamato;
• console.group() : crea un gruppo espanso di voci che possono essere compresse per nascondere le voci dopo che questo metodo è stato richiamato.

L'identificazione può essere rimossa per le voci posteriori usando il seguente metodo:

• console.groupEnd () : esce dal gruppo corrente, consentendo di stampare le voci più recenti nel gruppo genitore dopo che questo metodo è stato richiamato.

I gruppi possono essere collegati in cascata per consentire l'output multiplo identificato o i livelli comprimibili all'interno di ciascun altro:

= Collapsed group expanded =>

Cancellare la console - console.clear ()

È possibile cancellare la finestra della console utilizzando il metodo console.clear() . Ciò rimuove tutti i messaggi precedentemente stampati nella console e potrebbe stampare un messaggio come "Console was clear" in alcuni ambienti.

Visualizzazione interattiva di oggetti e XML: console.dir (), console.dirxml ()

console.dir(object) visualizza un elenco interattivo delle proprietà dell'oggetto JavaScript specificato. L'output è presentato come un elenco gerarchico con triangoli di apertura che consentono di vedere il contenuto degli oggetti figlio.

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dir(myObject);

display:

console.dirxml(object) stampa una rappresentazione XML degli elementi discendenti dell'oggetto, se possibile, o la rappresentazione JavaScript se non. Chiamare console.dirxml() su elementi HTML e XML equivale a chiamare console.log() .

Esempio 1:

console.dirxml(document)

display:

Esempio 2:

console.log(document)

display:

Esempio 3:

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dirxml(myObject);

display: