L'API Console Utilities contiene una raccolta di funzioni utili per l'esecuzione di attività comuni: selezione e ispezione di elementi DOM, query sugli oggetti, visualizzazione dei dati in formato leggibile, arresto e avvio del profiler, monitoraggio degli eventi DOM e delle chiamate di funzione e altro ancora.
Stai cercando console.log(), console.error() e le altre funzioni di console.*? Consulta i riferimenti per l'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:
Nell'esempio successivo, l'espressione valutata contiene inizialmente un array di nomi. Valutando $_.length per trovare la lunghezza dell'array, il valore archiviato in $_ cambia per diventare l'ultima espressione valutata, 4:
0-4 $
I comandi $0, $1, $2, $3 e $4 fungono da riferimento storico agli ultimi cinque elementi DOM ispezionati 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 elemento selezionato più di recente e così via.
Nell'esempio seguente, un elemento img è selezionato nel riquadro Elementi. Nel riquadro a scomparsa Console,
$0 è stato valutato e mostra lo stesso elemento:
L'immagine seguente mostra un elemento diverso selezionato nella stessa pagina. $0 ora si riferisce al nuovo
elemento selezionato, mentre $1 restituisce quello selezionato in precedenza:
$(selettore [, startNode])
$(selector) restituisce il riferimento al primo elemento DOM con il selettore CSS specificato. Quando
viene 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 per visualizzare per mostrarlo sulla pagina.
L'esempio seguente restituisce un riferimento all'elemento attualmente selezionato e ne mostra la proprietà 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 mostra la relativa proprietà src:
$$(selector [, startNode])
L'esempio seguente utilizza $$(selettore) restituisce un array di elementi corrispondenti 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);
}
l10n-placeholder3() per creare un array di tutti gli 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);
}
$x(percorso [, startNode])
$x(path) restituisce un array di elementi DOM corrispondenti 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.
cancella()
clear() cancella la cronologia della console.
clear();
copia(oggetto)
copy(object) copia negli appunti una rappresentazione stringa dell'oggetto specificato.
copy($0);
debug(funzione)
Quando viene richiamata la funzione specificata, il debugger viene richiamato e si interrompe all'interno della funzione nel riquadro Origini, consentendo di scorrere il codice ed eseguirne il debug.
debug(getData);
Usa undebug(fn) per interrompere l'interruzione della funzione oppure utilizza la UI per disattivare tutti i punti di interruzione.
Per saperne di più sui punti di interruzione, consulta l'articolo Metti 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 nella
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 Elementi.
Questo metodo è equivalente a console.dirxml().
inspect(object/function)
inspect(object/function) si 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);
Quando passi una funzione da ispezionare, la funzione apre il documento nel riquadro Origini per consentirti di esaminarlo.
getEventListeners(object)
getEventListeners(object) restituisce i listener di eventi registrati nell'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, quanto segue elenca tutti i listener di eventi registrati nell'oggetto documento:
getEventListeners(document);
Se più di un listener è registrato nell'oggetto specificato, l'array contiene un membro per ogni listener. Nell'esempio seguente, sono presenti due listener di eventi registrati nell'elemento
documento per l'evento click:
Puoi espandere ulteriormente ciascuno di questi oggetti per esplorarne le proprietà:
Per ulteriori informazioni, consulta la sezione Controllare le proprietà degli oggetti.
chiavi(oggetto)
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à), se digiti keys(player) e values(player) nella console ottieni quanto segue:
monitor(function)
Quando viene richiamata la funzione specificata, nella console viene registrato un messaggio che indica il nome della funzione e gli 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 nell'oggetto specificato, l'oggetto Evento 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. Guarda gli esempi di seguito.
Quanto segue monitora tutti gli eventi di ridimensionamento dell'oggetto finestra.
monitorEvents(window, "resize");
Quanto segue definisce un array per monitorare gli eventi "ridimensiona" e "scroll" per l'oggetto finestra:
monitorEvents(window, ["resize", "scroll"])
Puoi anche specificare uno dei "tipi" di eventi disponibili, stringhe che corrispondono a insiemi predefiniti di eventi. Nella tabella seguente sono elencati i tipi di eventi disponibili e le mappature degli eventi associate:
| 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 | "ridimensiona", "scroll", "zoom", "focus", "sfocare", "select", "change", "submit", "reset" |
Ad esempio, quanto segue utilizza il tipo di evento "chiave" 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 esempio di output dopo la digitazione di un carattere nel campo di testo:
Utilizza unmonitorEvents(object[, events]) per interrompere il monitoraggio.
profile([nome]) e profileEnd([name])
profile() avvia una sessione di profilazione della CPU JavaScript con un nome facoltativo. profileEnd()
completa il profilo e visualizza i risultati nel canale Rendimento > Principale.
Per avviare la profilazione:
profile("Profile 1")
Per interrompere la profilazione e visualizzare i risultati nel canale Rendimento > Principale:
profileEnd("Profile 1")
Risultato nella traccia Rendimento > Principale:
Pista principale." width="800" height="606">
I profili possono anche essere nidificati. Ad esempio, puoi procedere 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 cui è 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 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, procedi 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 richiamata, il debugger non sia più richiamato. Viene utilizzata insieme a debug(fn).
undebug(getData);
unmonitor(funzione)
unmonitor(function) interrompe il monitoraggio della funzione specificata. Viene utilizzata 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, quanto segue interrompe il monitoraggio di tutti gli eventi sull'oggetto finestra:
unmonitorEvents(window);
Puoi anche interrompere selettivamente il monitoraggio di eventi specifici su un oggetto. Ad esempio, il seguente codice inizia a monitorare tutti gli eventi del mouse sull'elemento attualmente selezionato, quindi interrompe il monitoraggio degli eventi "mousemove" (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 all'oggetto specificato.
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);
