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:
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:
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:
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:
$(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:
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à:
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:
$$(selector [, startNode])
L'esempio seguente utilizza $$(selettore) restituisce un array di elementi che corrispondono al selettore CSS specificato. Questo comando è
equivale a chiamare Array.from(document.querySelectorAll()).
$$() 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);
}
<img> 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);
}
$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")
L'esempio seguente restituisce tutti gli elementi <p> che contengono elementi <a>:
$x("//p[a]")
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.
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);
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);
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);
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);
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:
Puoi espandere ulteriormente ciascuno di questi oggetti per esplorarne le proprietà:
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:
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);
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");
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:
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:
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 diPromise.queryObjects(HTMLElement). Restituisce tutti gli elementi HTML.queryObjects(foo), dovefooè il nome di un corso. Restituisce tutti gli oggetti per i quali è stata creata un'istanza tramitenew 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);
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);
