Console Utilities API-referentie

let images = $$('img'); for (let each of images) { console.log(each.src); } 

l10n-placeholder3 () om een ​​array te maken van alle <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 laat het verschil zien 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:

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 :

Hoofdspoor." breedte = "800" hoogte = "606">

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

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