Riferimento API Console Utilities

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

L'API Console Utilities contiene una raccolta di funzioni utili per eseguire attività: selezione e ispezione degli elementi DOM, esecuzione di query sugli oggetti, visualizzazione dei dati in un formato leggibile, interruzione e avviando il profiler, monitorando gli eventi DOM e le chiamate di funzione e altro ancora.

Stai cercando console.log(), console.error() e le altre funzioni console.*? Consulta Riferimento API Console.

$_

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

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

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

Nel prossimo esempio, l'espressione valutata contiene inizialmente un array di nomi. Valutazione in corso $_.length per trovare la lunghezza dell'array, il valore memorizzato in $_ viene modificato per diventare il più recente 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 DOM elementi ispezionati nel riquadro Elements o negli ultimi cinque oggetti heap JavaScript selezionati in nel riquadro Profili. $0 restituisce l'elemento o l'oggetto JavaScript selezionato più di recente, $1 restituisce il secondo elemento selezionato più di recente e così via.

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

Esempio di $0.

L'immagine seguente mostra un elemento diverso selezionato nella stessa pagina. Il $0 ora si riferisce ai nuovi elemento 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. Quando chiamata con un argomento, questa funzione è una scorciatoia per la funzione document.querySelector().

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

Esempio di $(&#39;img&#39;).

Fai clic con il tasto destro del mouse sul risultato restituito e seleziona Mostra nel riquadro Elementi per trovarlo nel DOM oppure Scorri fino a Visualizza per visualizzarlo sulla pagina.

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

Esempio di $(&#39;img&#39;).src.

Questa funzione supporta anche un secondo parametro, startNode, che specifica un "elemento" o nodo da dove 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 mostra la relativa proprietà src:

Esempio di $(&#39;img&#39;, div).src.

$$(selector [, startNode])

$$(selettore) restituisce un array di elementi che corrispondono al selettore CSS specificato. Questo comando è equivale a chiamare 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 i campi <code translate=&lt;img&gt; elementi
che compaiono 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 che appaiono dopo l&#39;elemento div select nel documento e la visualizzazione delle relative origini.





$x(percorso [, startNode])



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



Ad esempio, quanto segue restituisce tutti gli elementi <p> della 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 dalla console.


clear();



copia(oggetto)



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


copy($0);



debug(funzione)



Quando viene chiamata la funzione specificata, il debugger viene richiamato e si interrompe all'interno della funzione nella
Riquadro Origini che consente di visualizzare in dettaglio il codice ed eseguirne il debug.


debug(getData);



Interruzione all&#39;interno di una funzione con debug().



Utilizza undebug(fn) per interrompere l'interruzione della funzione oppure la UI per disabilitare 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) mostra 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 di document.body direttamente nel
riga di comando e l'utilizzo di dir() per visualizzare lo stesso elemento:


document.body;
dir(document.body);



Registrazione di document.body con e senza funzione dir().



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



dirxml(oggetto)



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



inspect(object/function)



inspect(object/function) si apre e seleziona l'elemento o l'oggetto specificato nella
Riquadro: il riquadro Elements per gli elementi DOM o il riquadro Profili per gli oggetti heap JavaScript.



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


inspect(document.body);



Ispezione di un elemento con inspect().



Quando passi una funzione da ispezionare, la funzione apre il documento nel riquadro Origini
da esaminare.



getEventListeners(object)



getEventListeners(object) restituisce i listener di eventi registrati per l'oggetto specificato. La
"valore restituito" è un oggetto che contiene un array per ogni tipo di evento registrato (click o
keydown, ad esempio). I membri di ogni array sono oggetti che descrivono il listener registrato
per ciascun tipo. Ad esempio, di seguito sono elencati tutti i listener di eventi registrati nel documento
:


getEventListeners(document);



Output dell&#39;utilizzo di getEventListeners().



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



Più ascoltatori.



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



Visualizzazione espansa dell&#39;oggetto listener.



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



chiavi(oggetto)



keys(object) restituisce un array contenente i nomi delle proprietà appartenenti al
. 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 genera quanto segue:



Esempio di metodi key() e values().



monitor(funzione)



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


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



Esempio del 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
Google Cloud. Puoi specificare un singolo evento da monitorare, un array di eventi o uno degli eventi generici
"tipi" mappate a una raccolta predefinita di eventi. Vedi gli esempi qui sotto.



La tabella seguente monitora tutti gli eventi di ridimensionamento nell'oggetto finestra.


monitorEvents(window, "resize");



Eventi di ridimensionamento della finestra di monitoraggio.



Di seguito viene definito un array per monitorare sia il "ridimensionamento" e "scroll" eventi nell'oggetto finestra:


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



Puoi anche specificare uno dei "tipi" di eventi disponibili, ovvero le stringhe mappate a insiemi predefiniti di
eventi. Nella tabella seguente sono elencati i tipi di eventi disponibili e le relative mappature di eventi:



Tipo di evento & Eventi mappati corrispondenti
topo"mousedown", "mouseup", "clic", "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, di seguito viene utilizzata la chiave "chiave" tipo di evento tutti gli eventi chiave corrispondenti su un testo di input
attualmente selezionato nel riquadro Elements.


monitorEvents($0, "key");



Di seguito è riportato un output di esempio dopo aver digitato un carattere 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 e visualizza i risultati nella sezione Rendimento > Traccia principale.





Per avviare la profilazione:


profile("Profile 1")



Per interrompere la profilazione e visualizzare i risultati in Rendimento > Traccia principale:


profileEnd("Profile 1")



Risultato in Rendimento > Traccia principale:



Profilo 1 nel Monitoraggio principale del rendimento.



I profili possono anche essere nidificati. Ad esempio, la procedura funziona 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 è il nome di un corso. Restituisce tutti gli oggetti per i quali è stata creata un'istanza
tramite new foo().
    • 




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



tabella(dati [, colonne])



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 procedere come segue:


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



Esempio del metodo table().



undebug(funzione)



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


undebug(getData);



unmonitor(funzione)



unmonitor(function) interrompe il monitoraggio della funzione specificata. 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. Per
Ad esempio, di seguito viene interrotto il monitoraggio di tutti gli eventi nell'oggetto finestra:


unmonitorEvents(window);



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


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



valori(oggetto)



values(object) restituisce un array contenente i valori di tutte le proprietà appartenenti al
.


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

values(player);



Risultato di valori(player).