L'API Console Utilities contiene una raccolta di funzioni utili per l'esecuzione di attività comuni: selezione ed ispezione degli elementi DOM, esecuzione di query sugli oggetti, visualizzazione dei dati in formato leggibile, avvio e arresto del profiler, monitoraggio degli eventi DOM e delle 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
). Viene quindi valutata la proprietà $_
, che contiene lo stesso valore:
Nel prossimo esempio, l'espressione valutata contiene inizialmente un array di nomi. Durante la valutazione di
$_.length
per trovare la lunghezza dell'array, il valore memorizzato in $_
viene modificato per diventare l'ultima
espressione valutata, 4:
0 $ - 4 $
I comandi $0
, $1
, $2
, $3
e $4
funzionano come riferimento storico agli ultimi cinque elementi DOM
ispezionati nel riquadro Elementi o negli ultimi cinque oggetti heap JavaScript selezionati
nel riquadro Profili. $0
restituisce l'elemento o l'oggetto JavaScript selezionato più di recente, $1
restituisce il penultimo selezionato e così via.
Nell'esempio seguente, nel riquadro Elementi viene selezionato un elemento img
. Nel riquadro a scomparsa della console,
$0
è stato valutato e mostra lo stesso elemento:
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:
$(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 funzione document.querySelector().
L'esempio seguente restituisce un riferimento al primo elemento <img>
del documento:
Fai clic con il pulsante 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 mostra la relativa proprietà src
:
Questa funzione supporta anche un secondo parametro, startNode
, che specifica un "elemento" o 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 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);
}
l10n-placeholder3() per creare un array di tutti gli elementi <img>
visualizzati 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 nodo da cui cercare gli elementi.
cancella()
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 nel riquadro Origini per analizzare 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 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 quello console.dirxml()
.
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);
Quando passi una funzione da ispezionare, la funzione apre il documento nel riquadro Origini per poterlo ispezionare.
getEventListeners(object)
getEventListeners(object)
restituisce i listener di eventi registrati per l'oggetto specificato. Il
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 ogni tipo. Ad esempio, di seguito sono elencati tutti i listener di eventi registrati nell'oggetto documento:
getEventListeners(document);
Se nell'oggetto specificato sono registrati più listener, l'array contiene un membro per ogni listener. Nell'esempio seguente, sono presenti due listener di eventi registrati nell'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 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 chiamata la funzione specificata, nella console viene registrato un messaggio che indica il nome della funzione insieme agli argomenti che vengono 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 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.
La tabella seguente monitora tutti gli eventi di ridimensionamento nell'oggetto finestra.
monitorEvents(window, "resize");
Di seguito viene definito un array per monitorare gli eventi di "ridimensionamento" e "scorrimento" nell'oggetto finestra:
monitorEvents(window, ["resize", "scroll"])
Puoi anche specificare uno dei "tipi" di eventi disponibili, ovvero stringhe associate a insiemi predefiniti di eventi. Nella tabella seguente sono elencati i tipi di eventi disponibili e le relative mappature di eventi:
Tipo di evento ed eventi mappati corrispondenti | |
---|---|
topo | "mousedown", "mouseup", "clic", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" |
chiave | "keydown", "keyup", "keypress", "textInput" |
touch | "touchstart", "touchmove", "touchend", "touchcancel" |
volume | "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset" |
Ad esempio, di seguito viene utilizzato il tipo di evento "chiave" 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 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 traccia 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:
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 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 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 chiamata, il debugger non sia più richiamato. Viene utilizzato insieme a debug(fn)
.
undebug(getData);
unmonitor(funzione)
unmonitor(function)
interrompe il monitoraggio della funzione specificata. Questo 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, quanto segue interrompe 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 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");
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);