Console Utilities API-referentie

Sofia Emelianova
Sofia Emelianova

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:

$_ is de meest recent geëvalueerde expressie.

In het volgende voorbeeld bevat de geëvalueerde expressie aanvankelijk een array met namen. Bij het evalueren van $_.length om de lengte van de array te vinden, verandert de waarde die is opgeslagen in $_ en wordt de laatst geëvalueerde expressie, 4:

$_ verandert wanneer nieuwe opdrachten worden geëvalueerd.

$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:

Voorbeeld van $0.

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:

Voorbeeld van $ 1.

$(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:

Voorbeeld van $('img').

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:

Voorbeeld van $('img').src.

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:

Voorbeeld van $('img', div).src.

$$(selector [, startNode])

$$(selector) retourneert een array met elementen die overeenkomen met de gegeven CSS-selector. Deze opdracht is gelijk aan het aanroepen van 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 ); }

Voorbeeld van het gebruik van <!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> om een ​​array van alle <code translate= te maken <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);
}

Voorbeeld van het gebruik van $() om alle afbeeldingen te selecteren die verschijnen na het select div-element in het document en hun bronnen weer te geven.

$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")

Voorbeeld van het gebruik van een XPath-selector.

Het volgende voorbeeld retourneert alle <p> -elementen die <a> -elementen bevatten:

$x("//p[a]")

Voorbeeld van het gebruik van een ingewikkeldere XPath-selector.

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.

Voorbeeld van het gebruik van een XPath-selector met startNode.

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);

Een functie binnenbreken met debug().

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 van document.body op de opdrachtregel en het gebruik van dir() om hetzelfde element weer te geven:

document.body;
dir(document.body);

Document.body loggen met en zonder dir() functie.

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);

Een element inspecteren met inspect().

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);

Uitvoer van het gebruik van getEventListeners().

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 :

Meerdere luisteraars.

U kunt elk van deze objecten verder uitbreiden om hun eigenschappen te verkennen:

Uitgebreide weergave van luisteraarobject.

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:

Voorbeeld van de methoden sleutels() en waarden().

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);

Voorbeeld van de monitor()-methode.

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 controleren van gebeurtenissen voor het wijzigen van de grootte van vensters.

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:

Het monitoren van belangrijke gebeurtenissen.

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 :

Profiel 1 in het hoofdspoor van prestaties.

Profielen kunnen ook worden genest. Dit werkt bijvoorbeeld in willekeurige volgorde:

profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

queryObjects(Constructor)

Roep queryObjects(Constructor) vanuit de console om een ​​array met objecten te retourneren die met de opgegeven constructor zijn gemaakt. Bijvoorbeeld:

  • queryObjects(Promise) . Retourneert alle exemplaren van Promise .
  • queryObjects(HTMLElement) . Retourneert alle HTML-elementen.
  • queryObjects(foo) , waarbij foo een klassenaam is. Retourneert alle objecten die zijn geïnstantieerd via new 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);

Voorbeeld van de tabel()-methode.

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);

Resultaat van waarden (speler).