De Console Utilities API bevat een verzameling handige functies voor het uitvoeren van veelvoorkomende taken: DOM-elementen selecteren en inspecteren, query's uitvoeren op objecten, gegevens tonen in een leesbare indeling, de profiler stoppen en starten, DOM-gebeurtenissen en functieaanroepen bijhouden en meer.
Zoek je console.log(), console.error() en de rest van de console.*-functies? Ga naar de
Console API-referentie.
$_
$_ retourneert de waarde van de meest recent geëvalueerde expressie.
In het volgende voorbeeld wordt een eenvoudige expressie (2 + 2) geëvalueerd. Daarna wordt de property $_ geëvalueerd, die dezelfde waarde bevat:
In het volgende voorbeeld bevat de geëvalueerde expressie in eerste instantie een reeks namen. Als je
$_.length evalueert om de lengte van de reeks te vinden, verandert de waarde die is opgeslagen in $_ in de laatst
geëvalueerde expressie, 4:
$0 - $4
De opdrachten $0, $1, $2, $3 en $4 werken als een historische referentie naar de laatste 5 DOM-elementen (waaronder pseudo-elementen zoals ::before of ::after) die zijn geïnspecteerd in het deelvenster Elementen of de laatste 5 JavaScript-heapobjecten die zijn geselecteerd in het deelvenster Profielen. $0 retourneert het meest recent geselecteerde element of JavaScript-object, $1 retourneert het op een na meest recent geselecteerde element, enzovoort.
In het volgende voorbeeld is een img-element geselecteerd in het deelvenster Elementen. In de lade Console is $0 geëvalueerd en wordt hetzelfde element getoond:
De afbeelding hieronder toont een ander element dat op dezelfde pagina is geselecteerd. $0 verwijst nu naar het nieuw geselecteerde element, terwijl $1 het eerder geselecteerde element retourneert:
$(selector [, startNode])
$(selector) retourneert de referentie naar het eerste DOM-element met de opgegeven css-kiezer. Als
deze functie met één argument wordt aangeroepen, is dit een snelkoppeling voor de document.querySelector().
Het volgende voorbeeld retourneert een referentie naar het eerste <img> element in het document:
Klik met de rechtermuisknop op het geretourneerde resultaat en selecteer Tonen in het deelvenster Elementen om het in de DOM te vinden of Naar weergave scrollen om het op de pagina te tonen.
Het volgende voorbeeld retourneert een referentie naar het op dit moment geselecteerde element en toont de property src:
Deze functie ondersteunt ook een 2e parameter, startNode, die een element of node specificeert van waaruit naar elementen moet worden gezocht. De standaardwaarde van deze parameter is document.
Het volgende voorbeeld retourneert een referentie naar het eerste img-element dat een afstammeling is van devsite-header-background en toont de property src:
$$(selector [, startNode])
Het volgende voorbeeld gebruikt $$(selector) retourneert een reeks elementen die overeenkomen met de opgegeven css-kiezer. Deze opdracht is
gelijk aan het aanroepen van 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>-elementen
die in het huidige document na de geselecteerde node worden getoond:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$x(path [, startNode])
$x(path) retourneert een reeks DOM-elementen die overeenkomen met de opgegeven XPath-expressie.
Het volgende retourneert bijvoorbeeld alle <p>-elementen op de pagina:
$x("//p")
Het volgende voorbeeld retourneert alle <p>-elementen die <a>-elementen bevatten:
$x("//p[a]")
Net als de andere selectiefuncties heeft $x(path) een optionele 2e parameter, startNode, die een element of node specificeert van waaruit naar elementen moet worden gezocht.
clear()
clear() wist de geschiedenis van de console.
clear();
copy(object)
copy(object) kopieert een tekenreeksweergave van het opgegeven object naar het klembord.
copy($0);
debug(function)
Als de opgegeven functie wordt aangeroepen, wordt de foutopsporing aangeroepen en wordt de uitvoering onderbroken in de functie in het deelvenster Bronnen. Zo kun je de code doorlopen en fouten opsporen.
debug(getData);
Gebruik undebug(fn) om het onderbreken van de functie te stoppen of gebruik de UI om alle breakpoints uit te zetten.
Ga naar Je code onderbreken met breakpoints voor meer informatie over breakpoints.
dir(object)
dir(object) toont een lijst in objectstijl van alle property's van het opgegeven object. Deze methode is een snelkoppeling voor de methode console.dir() van de Console API.
Het volgende voorbeeld toont het verschil tussen de directe evaluatie van document.body op de opdrachtregel en het gebruik van dir() om hetzelfde element te tonen:
document.body;
dir(document.body);
Ga naar het item console.dir() in de Console API voor meer informatie.
dirxml(object)
dirxml(object) drukt een XML-weergave van het opgegeven object af, zoals getoond in het deelvenster Elementen.
Deze methode is gelijk aan de console.dirxml() methode.
inspect(object/function)
inspect(object/function) opent en selecteert het opgegeven element of object in het juiste deelvenster: het deelvenster Elementen voor DOM-elementen of het deelvenster Profielen voor JavaScript-heapobjecten.
Het volgende voorbeeld opent document.body in het deelvenster Elementen:
inspect(document.body);
Als je een functie doorgeeft om te inspecteren, opent de functie het document in het deelvenster Bronnen zodat je het kunt inspecteren.
getEventListeners(object)
getEventListeners(object) retourneert de gebeurtenis-listeners die zijn geregistreerd voor het opgegeven object. De geretourneerde waarde is een object dat een reeks bevat voor elk geregistreerd gebeurtenistype (bijvoorbeeld click of keydown). De leden van elke reeks zijn objecten die de listener beschrijven die voor elk type is geregistreerd. Het volgende toont bijvoorbeeld alle gebeurtenis-listeners die zijn geregistreerd voor het documentobject:
getEventListeners(document);
Als er meer dan één listener is geregistreerd voor het opgegeven object, bevat de reeks een lid voor elke listener. In het volgende voorbeeld zijn er 2 gebeurtenis-listeners geregistreerd voor het documentelement voor de gebeurtenis click:
Je kunt elk van deze objecten verder uitvouwen om de property's te verkennen:
Ga naar Objectproperty's inspecteren voor meer informatie.
keys(object)
keys(object) retourneert een reeks met de namen van de property's die bij het opgegeven object horen. Gebruik values() om de bijbehorende waarden van dezelfde property's op te halen.
Stel dat je app het volgende object heeft gedefinieerd:
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
Als player is gedefinieerd in de globale naamruimte (voor de eenvoud), leidt het typen van keys(player) en
values(player) in de console tot het volgende:
monitor(function)
Als de opgegeven functie wordt aangeroepen, wordt er een bericht in de console geregistreerd dat de functienaam aangeeft, samen met de argumenten die aan de functie worden doorgegeven toen deze werd aangeroepen.
function sum(x, y) {
return x + y;
}
monitor(sum);
Gebruik unmonitor(function) om de monitoring te stoppen.
monitorEvents(object [, events])
Als een van de opgegeven gebeurtenissen plaatsvindt voor het opgegeven object, wordt het gebeurtenisobject in de console geregistreerd. Je kunt één gebeurtenis opgeven om bij te houden, een reeks gebeurtenissen of een van de algemene gebeurtenistypen die zijn toegewezen aan een vooraf gedefinieerde verzameling gebeurtenissen. Voorbeelden staan hieronder.
Het volgende houdt alle gebeurtenissen voor het wijzigen van de grootte bij voor het window-object.
monitorEvents(window, "resize");
Het volgende definieert een reeks om zowel de gebeurtenissen resize als scroll bij te houden voor het window-object:
monitorEvents(window, ["resize", "scroll"])
Je kunt ook een van de beschikbare gebeurtenistypen opgeven, tekenreeksen die zijn toegewezen aan vooraf gedefinieerde sets gebeurtenissen. De tabel hieronder bevat de beschikbare gebeurtenistypen en de bijbehorende gebeurtenistoewijzingen:
| Gebeurtenistype en bijbehorende toegewezen gebeurtenissen | |
|---|---|
| muis | "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" |
| sleutel | "keydown", "keyup", "keypress", "textInput" |
| aanraken | "touchstart", "touchmove", "touchend", "touchcancel" |
| controle | "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset" |
Het volgende gebruikt bijvoorbeeld het gebeurtenistype key voor alle bijbehorende toetsgebeurtenissen in een invoertekstveld dat op dit moment is geselecteerd in het deelvenster Elementen.
monitorEvents($0, "key");
Hieronder staat een voorbeeld van de uitvoer nadat je een aantal tekens in het tekstveld hebt getypt:
Gebruik unmonitorEvents(object[, events]) om de monitoring te stoppen.
profile([name]) en profileEnd([name])
profile() start een JavaScript CPU-profileringssessie met een optionele naam. profileEnd()
voltooit het profiel, opent automatisch het deelvenster Prestaties en toont de resultaten in de track Hoofd.
Zo start je de profilering:
profile("Profile 1")
Zo stop je de profilering en bekijk je de resultaten in de track Prestaties > Hoofd:
profileEnd("Profile 1")
Resultaat in de track Prestaties > Hoofd:
Je kunt profielen ook nesten. Dit werkt bijvoorbeeld in elke volgorde:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
queryObjects(Constructor)
Roep queryObjects(Constructor) aan vanuit de console om een reeks objecten te retourneren die zijn gemaakt met de opgegeven constructor. Bijvoorbeeld:
queryObjects(Promise). Retourneert alle instanties vanPromise.queryObjects(HTMLElement). Retourneert alle HTML-elementen.queryObjects(foo), waarbijfooeen klassenaam is. Retourneert alle objecten die zijn geïnstantieerd vianew foo().
Het bereik van queryObjects() is de op dit moment geselecteerde uitvoeringscontext in de console.
table(data [, columns])
Registreer objectgegevens met tabelopmaak door een gegevensobject door te geven met optionele kolomkoppen.
Dit is een snelkoppeling voor console.table().
Als je bijvoorbeeld een lijst met namen wilt tonen met een tabel in de console, doe je het volgende:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
Als je een geregistreerde tabel naar het klembord wilt kopiëren als een opgemaakte Markdown-tabel of csv-gegevens, klik je met de rechtermuisknop op de tabel in de console en selecteer je de bijbehorende kopieeroptie in het contextmenu.
undebug(function)
undebug(function) stopt de foutopsporing van de opgegeven functie, zodat de foutopsporing niet meer wordt aangeroepen als de functie wordt aangeroepen. Dit wordt gebruikt in combinatie met debug(fn).
undebug(getData);
unmonitor(function)
unmonitor(function) stopt de monitoring van de opgegeven functie. Dit wordt gebruikt in combinatie met monitor(fn).
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events]) stopt de monitoring van gebeurtenissen voor het opgegeven object en de opgegeven gebeurtenissen. Het volgende stopt bijvoorbeeld alle gebeurtenismonitoring voor het window-object:
unmonitorEvents(window);
Je kunt ook selectief stoppen met het bijhouden van specifieke gebeurtenissen voor een object. De volgende code start bijvoorbeeld de monitoring van alle muisgebeurtenissen voor het op dit moment geselecteerde element en stopt daarna de monitoring van mousemove-gebeurtenissen (misschien om ruis in de console-uitvoer te verminderen):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
values(object)
values(object) retourneert een reeks met de waarden van alle property's die bij het opgegeven object horen.
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);
