De Console Utilities API bevat een verzameling handige functies voor het uitvoeren van algemene taken: het selecteren en inspecteren van DOM-elementen, het opvragen van objecten, het weergeven van gegevens in een leesbaar formaat, het stoppen en starten van de profiler, het monitoren van DOM-gebeurtenissen en functieaanroepen, en meer.
Op zoek naar console.log() , console.error() en de rest van de console.* -functies? Zie 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. Vervolgens wordt de eigenschap $_ geëvalueerd, die dezelfde waarde bevat:
In het volgende voorbeeld bevat de geëvalueerde expressie aanvankelijk een array met namen. Bij het evalueren $_.length om de lengte van de array te vinden, verandert de waarde die is opgeslagen in $_ en wordt de laatst geëvalueerde expressie, 4:
$0 - $4
De opdrachten $0 , $1 , $2 , $3 en $4 werken als een historische verwijzing naar de laatste vijf DOM-elementen die zijn geïnspecteerd in het paneel Elementen of de laatste vijf JavaScript-heap-objecten die zijn geselecteerd in het paneel 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 paneel Elementen . In de Console- lade is $0 geëvalueerd en wordt hetzelfde element weergegeven:
De onderstaande afbeelding toont een ander element dat op dezelfde pagina is geselecteerd. De $0 verwijst nu naar het nieuw geselecteerde element, terwijl $1 het eerder geselecteerde element retourneert:
$(selector [, startknooppunt])
$(selector) retourneert de verwijzing naar het eerste DOM-element met de opgegeven CSS-selector. Wanneer deze functie met één argument wordt aangeroepen, is deze een snelkoppeling voor de functie document.querySelector() .
Het volgende voorbeeld retourneert een verwijzing naar het eerste <img> -element in het document:
Klik met de rechtermuisknop op het geretourneerde resultaat en selecteer Reveal in Elements Panel om het in de DOM te vinden, of scroll naar View om het op de pagina weer te geven.
Het volgende voorbeeld retourneert een verwijzing naar het momenteel geselecteerde element en geeft de bijbehorende src eigenschap weer:
Deze functie ondersteunt ook een tweede parameter, startNode , die een 'element' of knooppunt specificeert van waaruit naar elementen moet worden gezocht. De standaardwaarde van deze parameter is document .
Het volgende voorbeeld retourneert een verwijzing naar het eerste img element dat een afstammeling is van devsite-header-background , en geeft de eigenschap src weer:
$$(selector [, startNode])
$$(selector) retourneert een array met elementen die overeenkomen met de gegeven CSS-selector. Deze opdracht is gelijk aan het aanroepen Array.from( document.querySelectorAll() ) .
In het volgende voorbeeld wordt gebruikt $$() 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 verschijnen na het geselecteerde knooppunt:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$x(pad [, startknooppunt])
$x(path) retourneert een array van DOM-elementen die overeenkomen met de gegeven 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 selectorfuncties heeft $x(path) een optionele tweede parameter, startNode , die een element of knooppunt specificeert van waaruit naar elementen moet worden gezocht.
duidelijk()
clear() wist de console van zijn geschiedenis.
clear();
kopiëren(object)
copy(object) kopieert een tekenreeksrepresentatie van het opgegeven object naar het klembord.
copy($0);
debuggen(functie)
Wanneer de opgegeven functie wordt aangeroepen, wordt de debugger aangeroepen en wordt de functie in het paneel Bronnen afgebroken, waardoor u door de code kunt stappen en fouten kunt opsporen.
debug(getData);
Gebruik undebug(fn) om het breken van de functie te stoppen, of gebruik de gebruikersinterface om alle breekpunten uit te schakelen.
Zie Uw code pauzeren met breekpunten voor meer informatie over breekpunten.
dir(object)
dir(object) geeft een lijst in objectstijl weer met alle eigenschappen van het opgegeven object. Deze methode is een snelkoppeling voor de console.dir() -methode van de Console API.
Het volgende voorbeeld toont het verschil tussen het rechtstreeks evalueren document.body op de opdrachtregel en het gebruik van dir() om hetzelfde element weer te geven:
document.body;
dir(document.body);
Zie de vermelding console.dir() in de Console API voor meer informatie.
dirxml(object)
dirxml(object) drukt een XML-weergave af van het opgegeven object, zoals te zien in het paneel Elementen . Deze methode is equivalent aan de methode console.dirxml() .
inspecteren(object/functie)
inspect(object/function) opent en selecteert het opgegeven element of object in het juiste paneel: het paneel Elementen voor DOM-elementen of het paneel Profielen voor JavaScript-heap-objecten.
In het volgende voorbeeld wordt document.body geopend in het paneel Elementen :
inspect(document.body);
Wanneer u een functie doorgeeft om te inspecteren, opent de functie het document in het paneel Bronnen zodat u het kunt inspecteren.
getEventListeners(object)
getEventListeners(object) retourneert de gebeurtenislisteners die voor het opgegeven object zijn geregistreerd. De retourwaarde is een object dat een array bevat voor elk geregistreerd gebeurtenistype (bijvoorbeeld click of keydown ). De leden van elke array zijn objecten die de luisteraar beschrijven die voor elk type is geregistreerd. Hieronder ziet u bijvoorbeeld alle gebeurtenislisteners die voor het documentobject zijn geregistreerd:
getEventListeners(document);
Als er meer dan één luisteraar is geregistreerd op het opgegeven object, bevat de array een lid voor elke luisteraar. In het volgende voorbeeld zijn er twee gebeurtenislisteners geregistreerd op het documentelement voor de click :
U kunt elk van deze objecten verder uitbreiden om hun eigenschappen te verkennen:
Zie Objecteigenschappen inspecteren voor meer informatie.
sleutels(object)
keys(object) retourneert een array met de namen van de eigenschappen die bij het opgegeven object horen. Gebruik values() om de bijbehorende waarden van dezelfde eigenschappen te verkrijgen.
Stel dat uw toepassing bijvoorbeeld het volgende object heeft gedefinieerd:
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
Ervan uitgaande dat player is gedefinieerd in de globale naamruimte (voor de eenvoud), resulteert het typen van keys(player) en values(player) in de console in het volgende:
monitor(functie)
Wanneer de opgegeven functie wordt aangeroepen, wordt er een bericht in de console geregistreerd waarin de functienaam wordt aangegeven, 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 [, gebeurtenissen])
Wanneer een van de opgegeven gebeurtenissen plaatsvindt op het opgegeven object, wordt het gebeurtenisobject in de console geregistreerd. U kunt één gebeurtenis opgeven die u wilt monitoren, een reeks gebeurtenissen, of een van de generieke gebeurtenistypen die zijn toegewezen aan een vooraf gedefinieerde verzameling gebeurtenissen. Zie voorbeelden hieronder.
Het volgende controleert alle resize-gebeurtenissen op het vensterobject.
monitorEvents(window, "resize");
Het volgende definieert een array om zowel de gebeurtenissen "resize" als "scroll" op het vensterobject te controleren:
monitorEvents(window, ["resize", "scroll"])
U kunt ook een van de beschikbare gebeurtenistypen opgeven, tekenreeksen die worden toegewezen aan vooraf gedefinieerde reeksen gebeurtenissen. In de onderstaande tabel worden de beschikbare gebeurtenistypen en de bijbehorende gebeurtenistoewijzingen vermeld:
| Type gebeurtenis en overeenkomstige toegewezen gebeurtenissen | |
|---|---|
| muis | "mousedown", "mouseup", "klik", "dblclick", "mousemove", "mouseover", "mouseout", "muiswiel" |
| sleutel | "keydown", "keyup", "keypress", "textInput" |
| aanraken | "touchstart", "touchmove", "touchend", "touchcancel" |
| controle | "formaat wijzigen", "scrollen", "zoomen", "focus", "vervagen", "selecteren", "wijzigen", "verzenden", "resetten" |
In het volgende wordt bijvoorbeeld het gebeurtenistype "sleutel" gebruikt, alle corresponderende sleutelgebeurtenissen in een invoertekstveld dat momenteel is geselecteerd in het paneel Elementen .
monitorEvents($0, "key");
Hieronder vindt u een voorbeelduitvoer na het typen van tekens in het tekstveld:
Gebruik unmonitorEvents(object[, events]) om de monitoring te stoppen.
profile([naam]) en profileEnd([naam])
profile() start een JavaScript CPU-profileringssessie met een optionele naam. profileEnd() voltooit het profiel en geeft de resultaten weer in het spoor Prestaties > Hoofd .
Om te beginnen met profileren:
profile("Profile 1")
Om het profileren te stoppen en de resultaten te bekijken in het spoor Prestaties > Hoofd :
profileEnd("Profile 1")
Resultaat in de Prestatie > Hoofdtrack :
Profielen kunnen ook worden genest. Dit werkt bijvoorbeeld in willekeurige volgorde:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
queryObjects(Constructor)
Roep queryObjects(Constructor) aan vanuit de console om een array met objecten te retourneren die met de opgegeven constructor zijn gemaakt. Bijvoorbeeld:
-
queryObjects(Promise). Retourneert alle exemplaren 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 momenteel geselecteerde uitvoeringscontext in de console.
tabel(gegevens [, kolommen])
Log objectgegevens met tabelopmaak door een gegevensobject in te voeren met optionele kolomkoppen. Dit is een snelkoppeling voor console.table() .
Om bijvoorbeeld een lijst met namen weer te geven met behulp van een tabel in de console, doet u het volgende:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
debuggen(functie)
undebug(function) stopt het debuggen van de opgegeven functie, zodat wanneer de functie wordt aangeroepen, de debugger niet langer wordt aangeroepen. Dit wordt gebruikt in combinatie met debug(fn) .
undebug(getData);
niet meer monitoren (functie)
unmonitor(function) stopt de monitoring van de opgegeven functie. Dit wordt gebruikt in combinatie met monitor(fn) .
unmonitor(getData);
unmonitorEvents(object [, gebeurtenissen])
unmonitorEvents(object[, events]) stopt met het monitoren van gebeurtenissen voor het opgegeven object en de opgegeven gebeurtenissen. Het volgende stopt bijvoorbeeld alle gebeurtenismonitoring op het vensterobject:
unmonitorEvents(window);
U kunt ook selectief stoppen met het monitoren van specifieke gebeurtenissen op een object. De volgende code begint bijvoorbeeld met het monitoren van alle muisgebeurtenissen op het momenteel geselecteerde element, en stopt vervolgens met het monitoren van "mousemove"-gebeurtenissen (misschien om ruis in de console-uitvoer te verminderen):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
waarden(object)
values(object) retourneert een array met de waarden van alle eigenschappen die bij het opgegeven object horen.
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);
