Riferimento API Console Utilities

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

L'API Console Utilities contiene una raccolta di funzioni pratiche per eseguire attività comuni: selezionare ed esaminare gli elementi DOM, eseguire query sugli oggetti, visualizzare i dati in formato leggibile, arrestare e avviare il profiler, monitorare gli eventi DOM e le chiamate di funzioni e altro ancora.

Cerchi console.log(), console.error() e il resto delle funzioni console.*? Consulta il riferimento API della console .

$_

$_ restituisce il valore dell'espressione valutata più di recente.

Nell'esempio seguente viene valutata un'espressione semplice (2 + 2). Viene quindi valutata la proprietà $_, che contiene lo stesso valore:

$_ è l'espressione valutata più di recente.

Nell'esempio successivo, l'espressione valutata contiene inizialmente un array di nomi. Valutando $_.length per trovare la lunghezza dell'array, il valore memorizzato in $_ cambia per diventare l'ultima espressione valutata, 4:

$_ cambia quando vengono valutati nuovi comandi.

$0 - $4

I comandi $0, $1, $2, $3 e $4 funzionano come riferimento storico agli ultimi cinque elementi DOM (inclusi gli pseudo-elementi come ::before o ::after) esaminati nel riquadro Elementi o agli ultimi cinque oggetti heap JavaScript selezionati nel riquadro Profili. $0 restituisce l'elemento o l'oggetto JavaScript selezionato più di recente, $1 restituisce il secondo più recente e così via.

Nell'esempio seguente, un elemento img viene selezionato nel riquadro Elementi. Nel riquadro Console , $0 è stato valutato e mostra lo stesso elemento:

Esempio di 0 $.

L'immagine seguente mostra un elemento diverso selezionato nella stessa pagina. $0 ora fa riferimento all'elemento appena selezionato, mentre $1 restituisce quello selezionato in precedenza:

Esempio di 1 $.

$(selector [, startNode])

$(selector) restituisce il riferimento al primo elemento DOM con il selettore CSS specificato. Se chiamata con un argomento, questa funzione è una scorciatoia per la document.querySelector().

L'esempio seguente restituisce un riferimento al primo elemento <img> nel documento:

Esempio di $('img').

Fai clic con il tasto destro del mouse sul risultato restituito e seleziona Mostra nel riquadro Elementi per trovarlo nel DOM o Scorri per visualizzare per mostrarlo nella pagina.

L'esempio seguente restituisce un riferimento all'elemento attualmente selezionato e ne visualizza la proprietà src:

Esempio di $('img').src.

Questa funzione supporta anche un secondo parametro, startNode, che specifica un "elemento" o un nodo da cui cercare gli elementi. Il valore predefinito di questo parametro è document.

L'esempio seguente restituisce un riferimento al primo elemento img che è un discendente di devsite-header-background e ne visualizza la proprietà src:

Esempio di $('img', div).src.

$$(selector [, startNode])

$$(selector) restituisce un array di elementi che corrispondono al selettore CSS specificato. Questo comando è equivalente alla chiamata Array.from(document.querySelectorAll()).

L'esempio seguente utilizza $$() to create an array of all <img> elements in the current document and displays the value of each element's src property:

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}


Esempio di utilizzo di<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> per creare un array di tutti gli elementi <code translate=Elementi<img>
che appaiono nel documento corrente dopo il nodo selezionato:


let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



Esempio di utilizzo di $() per selezionare tutte le immagini visualizzate dopo l'elemento div selezionato nel documento e visualizzarne le origini.





$x(path [, startNode])



$x(path) restituisce un array di elementi DOM che corrispondono all'espressione XPath specificata.



Ad esempio, il seguente comando restituisce tutti gli elementi <p> nella pagina:


$x("//p")



Esempio di utilizzo di un selettore XPath.



L'esempio seguente restituisce tutti gli elementi <p> che contengono elementi <a>:


$x("//p[a]")



Esempio di utilizzo di un selettore XPath più complicato.



Analogamente alle altre funzioni del selettore, $x(path) ha un secondo parametro facoltativo, startNode, che specifica un elemento o un nodo da cui cercare gli elementi.



Esempio di utilizzo di un selettore XPath con startNode.



clear()



clear() cancella la cronologia della console.


clear();



copy(object)



copy(object) copia negli appunti una rappresentazione stringa dell'oggetto specificato.


copy($0);



debug(function)



Quando viene chiamata la funzione specificata, viene richiamato il debugger e si interrompe all'interno della funzione nel riquadro Origini , consentendo di eseguire il codice e di eseguirne il debug.


debug(getData);



Interruzione all'interno di una funzione con debug().



Utilizza undebug(fn) per interrompere l'interruzione della funzione o utilizza l'interfaccia utente per disattivare tutti i punti di interruzione.



Per ulteriori informazioni sui punti di interruzione, consulta Mettere in pausa il codice con i punti di interruzione.



dir(object)



dir(object) visualizza un elenco in stile oggetto di tutte le proprietà dell'oggetto specificato. Questo metodo è una scorciatoia per il metodo console.dir() dell'API Console.



L'esempio seguente mostra la differenza tra la valutazione diretta di document.body nella riga di comando e l'utilizzo di dir() per visualizzare lo stesso elemento:


document.body;
dir(document.body);



Logging di document.body con e senza la funzione dir().



Per ulteriori informazioni, consulta la voce console.dir() nell'API Console.



dirxml(object)



dirxml(object) stampa una rappresentazione XML dell'oggetto specificato, come mostrato nel riquadro Elementi.
Questo metodo è equivalente al console.dirxml() metodo.



inspect(object/function)



inspect(object/function) apre e seleziona l'elemento o l'oggetto specificato nel riquadro appropriato: il riquadro Elementi per gli elementi DOM o il riquadro Profili per gli oggetti heap JavaScript.



L'esempio seguente apre document.body nel riquadro Elementi:


inspect(document.body);



Ispezione di un elemento con inspect().



Quando passi una funzione da esaminare, la funzione apre il documento nel riquadro Origini per consentirti di esaminarlo.



getEventListeners(object)



getEventListeners(object) restituisce i listener di eventi registrati sull'oggetto specificato. Il valore restituito è un oggetto che contiene un array per ogni tipo di evento registrato (ad esempio click o keydown). I membri di ogni array sono oggetti che descrivono il listener registrato per ogni tipo. Ad esempio, il seguente comando elenca tutti i listener di eventi registrati sull'oggetto documento:


getEventListeners(document);



Output dell'utilizzo di getEventListeners().



Se sull'oggetto specificato è registrato più di un listener, l'array contiene un membro per ogni listener. Nell'esempio seguente, sono registrati due listener di eventi sull'elemento documento per l'evento click:



Più ascoltatori.



Puoi espandere ulteriormente ciascuno di questi oggetti per esplorarne le proprietà:



Visualizzazione espansa dell'oggetto listener.



Per ulteriori informazioni, consulta Esaminare le proprietà degli oggetti.



keys(object)



keys(object) restituisce un array contenente i nomi delle proprietà appartenenti all'oggetto specificato. Per ottenere i valori associati delle stesse proprietà, utilizza values().



Ad esempio, supponiamo che la tua applicazione abbia definito il seguente oggetto:


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};



Supponendo che player sia stato definito nello spazio dei nomi globale (per semplicità), digitando keys(player) e
values(player) nella Console si ottiene quanto segue:



Esempio di metodi keys() e values().



monitor(function)



Quando viene chiamata la funzione specificata, nella console viene registrato un messaggio che indica il nome della funzione insieme agli argomenti passati alla funzione quando è stata chiamata.


function sum(x, y) {
  return x + y;
}
monitor(sum);



Esempio di metodo monitor().



Utilizza unmonitor(function) per interrompere il monitoraggio.



monitorEvents(object [, events])



Quando si verifica uno degli eventi specificati sull'oggetto specificato, l'oggetto Event viene registrato nella console. Puoi specificare un singolo evento da monitorare, un array di eventi o uno dei "tipi" di eventi generici mappati a una raccolta predefinita di eventi. Vedi gli esempi qui sotto.



Il seguente comando monitora tutti gli eventi di ridimensionamento sull'oggetto finestra.


monitorEvents(window, "resize");



Monitoraggio degli eventi di ridimensionamento della finestra.



Il seguente comando definisce un array per monitorare gli eventi "resize" e "scroll" sull'oggetto finestra:


monitorEvents(window, ["resize", "scroll"])



Puoi anche specificare uno dei "tipi" di eventi disponibili, stringhe che vengono mappate a insiemi predefiniti di eventi. La tabella seguente elenca i tipi di eventi disponibili e i relativi mapping di eventi:



Tipo di evento ed eventi mappati corrispondenti
topo"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
chiave"keydown", "keyup", "keypress", "textInput"
touch"touchstart", "touchmove", "touchend", "touchcancel"
controllo"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"



Ad esempio, il seguente comando utilizza il tipo di evento "key" per tutti gli eventi chiave corrispondenti in un campo di testo di input attualmente selezionato nel riquadro Elementi.


monitorEvents($0, "key");



Di seguito è riportato un output di esempio dopo aver digitato i caratteri nel campo di testo:



Monitoraggio degli eventi chiave.



Utilizza unmonitorEvents(object[, events]) per interrompere il monitoraggio.



profile([name]) e profileEnd([name])



profile() avvia una sessione di profilazione della CPU JavaScript con un nome facoltativo. profileEnd()
completa il profilo, apre automaticamente il riquadro Rendimento e visualizza i risultati nella traccia Principale.





Per avviare la profilazione:


profile("Profile 1")



Per interrompere la profilazione e visualizzare i risultati nella traccia Rendimento > Principale:


profileEnd("Profile 1")



Risultato nella traccia Rendimento > Principale:



Profilo 1 nel canale principale di rendimento.



I profili possono anche essere nidificati. Ad esempio, questo funzionerà in qualsiasi ordine:


profile('A');
profile('B');
profileEnd('A');
profileEnd('B');





queryObjects(Constructor)



Chiama queryObjects(Constructor) dalla console per restituire un array di oggetti creati con il costruttore specificato. Ad esempio:



    

  • queryObjects(Promise). Restituisce tutte le istanze di Promise.
    • 

  • queryObjects(HTMLElement). Restituisce tutti gli elementi HTML.
    • 

  • queryObjects(foo), dove foo è un nome di classe. Restituisce tutti gli oggetti di cui è stata creata un'istanza tramite new foo().
    • 




L'ambito di queryObjects() è il contesto di esecuzione attualmente selezionato nella console.



table(data [, columns])



Registra i dati degli oggetti con la formattazione della tabella passando un oggetto dati con intestazioni di colonna facoltative.
Questa è una scorciatoia per console.table().



Ad esempio, per visualizzare un elenco di nomi utilizzando una tabella nella console, devi:


let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Esempio di metodo table().



Per copiare una tabella registrata negli appunti come tabella Markdown formattata o dati CSV, fai clic con il tasto destro del mouse sulla tabella nella Console e seleziona l'opzione di copia corrispondente dal menu contestuale.



undebug(function)



undebug(function) interrompe il debug della funzione specificata in modo che, quando viene chiamata la funzione, il debugger non venga più richiamato. Questo comando viene utilizzato insieme a debug(fn).


undebug(getData);



unmonitor(function)



unmonitor(function) interrompe il monitoraggio della funzione specificata. Questo comando viene utilizzato insieme a monitor(fn).


unmonitor(getData);



unmonitorEvents(object [, events])



unmonitorEvents(object[, events]) interrompe il monitoraggio degli eventi per l'oggetto e gli eventi specificati. Ad esempio, il seguente comando interrompe tutto il monitoraggio degli eventi sull'oggetto finestra:


unmonitorEvents(window);



Puoi anche interrompere selettivamente il monitoraggio di eventi specifici su un oggetto. Ad esempio, il seguente codice avvia il monitoraggio di tutti gli eventi del mouse sull'elemento attualmente selezionato, quindi interrompe il monitoraggio degli eventi "mousemove" (magari per ridurre il rumore nell'output della console):


monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");



values(object)



values(object) restituisce un array contenente i valori di tutte le proprietà appartenenti all'oggetto specificato.


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);



Risultato dei valori(giocatore).