Referentie voor consolefuncties

Kayce Basques

Sofia Emelianova

Deze pagina is een verwijzing naar functies die verband houden met de Chrome DevTools Console. Er wordt van uitgegaan dat u al bekend bent met het gebruik van de console om vastgelegde berichten te bekijken en JavaScript uit te voeren. Als dit niet het geval is, raadpleegt u Aan de slag .

Als u op zoek bent naar de API-referentie voor functies als console.log() raadpleeg dan Console API Reference . Voor de referentie over functies zoals monitorEvents() zie Console Utilities API Reference .

Open de console

U kunt de Console openen als paneel of als tabblad in de Lade .

Open het consolepaneel

Druk op Control + Shift + J of Command + Option + J (Mac).

Om de Console te openen vanuit het Commandomenu , typt u Console en voert u vervolgens de opdracht Console tonen uit, met de Paneelbadge ernaast.

Open de console in de lade

Druk op Escape of klik op DevTools aanpassen en beheren en selecteer vervolgens Consolelade weergeven .

De lade verschijnt onder aan uw DevTools-venster, met het tabblad Console geopend.

Om het tabblad Console vanuit het Commandomenu te openen, begint u Console te typen en voert u vervolgens de opdracht Console tonen uit met de Lade -badge ernaast.

Open Console-instellingen

Klik Console-instellingen in de rechterbovenhoek van de console .

Belangrijk punt: niet te verwarren met DevTools-instellingen boven en naast het menu met drie stippen.

Via onderstaande links wordt elke instelling uitgelegd:

• Netwerk verbergen
• Logboek bewaren
• Alleen geselecteerde context
• Groepeer vergelijkbare berichten in de console
• Toon CORS-fouten in de console
• XMLHttpRequests registreren
• Enthousiaste evaluatie
• Automatisch aanvullen vanuit de geschiedenis

Open de consolezijbalk

Klik op Consolezijbalk weergeven om de zijbalk weer te geven, wat handig is bij het filteren.

Bekijk berichten

Deze sectie bevat functies die de manier wijzigen waarop berichten in de console worden gepresenteerd. Zie Berichten bekijken voor een praktische uitleg.

Schakel berichtgroepering uit

Open Console-instellingen en schakel Groep vergelijkbaar uit om het standaardgedrag van de console voor het groeperen van berichten uit te schakelen. Zie XHR- en ophaalverzoeken registreren voor een voorbeeld.

Bekijk berichten van breekpunten

De console markeert berichten die door breekpunten worden geactiveerd, op de volgende manier:

• console.* roept voorwaardelijke breekpunten op met een oranje vraagteken ?
• Logpoint -berichten met roze twee stippen ..

Om naar de inline breakpoint-editor in het Bronnenpaneel te gaan, klikt u op de ankerlink naast het breakpoint-bericht.

Bekijk stapeltraceringen

De console legt automatisch stacktraces vast voor fouten en waarschuwingen. Een stacktrace is een geschiedenis van functieaanroepen (frames) die tot de fout of waarschuwing hebben geleid. De console toont ze in omgekeerde volgorde: het nieuwste frame staat bovenaan.

Om een ​​stapeltracering te bekijken, klikt u op de vouw het pictogram uit naast een fout of waarschuwing.

Bekijk foutoorzaken in stacktraces

De console kan eventuele ketens van foutoorzaken in de stacktracering weergeven.

Om het opsporen van fouten eenvoudiger te maken, kunt u de oorzaken van fouten opgeven bij het onderscheppen en opnieuw genereren van fouten. Terwijl de console de oorzaakketen oploopt, wordt elke foutenstapel afgedrukt met het voorvoegsel Caused by: zodat u de oorspronkelijke fout kunt vinden.

Bekijk asynchrone stacktraces

Indien ondersteund door het raamwerk dat u gebruikt of wanneer u rechtstreeks browserplanningsprimitieven gebruikt, zoals setTimeout , kan DevTools asynchrone bewerkingen traceren door beide delen van de asynchrone code aan elkaar te koppelen.

In dit geval toont de stacktracering het "volledige verhaal" van de asynchrone bewerking.

Belangrijk punt: DevTools implementeert deze "Async Stack Tagging" -functie op basis van de console.createTask() API-methode. DevTools moedigt raamwerken en abstracties aan om deze API te gebruiken. Angular ondersteunt deze functie bijvoorbeeld.

Toon bekende frames van derden in stapelsporen

Wanneer brontoewijzingen het veld ignoreList bevatten, verbergt de console standaard de frames van derden voor stacktraces van bronnen die zijn gegenereerd door bundelaars (bijvoorbeeld webpack) of raamwerken (bijvoorbeeld Angular).

Om de volledige stapeltracering, inclusief frames van derden, te bekijken, klikt u op N meer frames weergeven onder aan de stapeltracering.

Als u altijd de volledige stacktrace wilt bekijken, schakelt u de Instellingen > Lijst negeren > Voeg automatisch bekende scripts van derden toe om de lijstinstelling te negeren .

Registreer XHR- en ophaalverzoeken

Open Console-instellingen en schakel Log XMLHttpRequests in om alle XMLHttpRequest en Fetch -verzoeken naar de console te loggen zodra ze plaatsvinden.

Het bovenste bericht in het bovenstaande voorbeeld toont het standaardgroeperingsgedrag van de console. In het onderstaande voorbeeld ziet u hoe hetzelfde logboek eruitziet na het uitschakelen van berichtgroepering .

Houd berichten vast tijdens het laden van pagina's

Standaard wordt de console gewist wanneer u een nieuwe pagina laadt. Om berichten te behouden tijdens het laden van pagina's, opent u Console-instellingen en schakelt u vervolgens het selectievakje Logboek behouden in.

Netwerkberichten verbergen

Standaard registreert de browser netwerkberichten naar de console . Het bovenste bericht in het volgende voorbeeld vertegenwoordigt bijvoorbeeld een 404.

Netwerkberichten verbergen:

1. Open Console-instellingen .
2. Schakel het selectievakje Netwerk verbergen in.

CORS-fouten weergeven of verbergen

De console kan CORS-fouten weergeven als netwerkaanvragen mislukken vanwege Cross-Origin Resource Sharing (CORS) .

CORS-fouten weergeven of verbergen:

1. Open Console-instellingen .
2. Schakel het selectievakje CORS-fouten weergeven in de console in of uit.

Als de console is ingesteld om CORS-fouten weer te geven en u deze tegenkomt, kunt u naast fouten op de volgende knoppen klikken:

• om het verzoek te openen met een CORS-gerelateerde TypeError in het netwerkpaneel .
• voor een mogelijke oplossing op het tabblad Problemen .

Filter berichten

Er zijn veel manieren om berichten in de console te filteren.

Browserberichten eruit filteren

Open de consolezijbalk en klik op Gebruikersberichten om alleen berichten weer te geven die afkomstig zijn van het JavaScript van de pagina.

Filter op logniveau

DevTools wijst de meeste ernstniveaus van console.* -methoden toe.

Er zijn vier niveaus:

• Verbose
• Info
• Warning
• Error

console.log() bevindt zich bijvoorbeeld in de groep Info , terwijl console.error() zich in de groep Error bevindt. In de Console API Reference wordt het ernstniveau van elke toepasselijke methode beschreven.

Elk bericht dat de browser bij de console registreert, heeft ook een ernstniveau. U kunt elk niveau van berichten verbergen waarin u niet geïnteresseerd bent. Als u bijvoorbeeld alleen geïnteresseerd bent in Error , kunt u de andere drie groepen verbergen.

Klik op de vervolgkeuzelijst Logniveaus om Verbose , Info , Warning of Error in of uit te schakelen.

U kunt ook filteren op logniveau door de consolezijbalk te openen en vervolgens op Fouten , Waarschuwingen , Info of Uitgebreid te klikken.

Filter berichten op URL

Typ url: gevolgd door een URL om alleen berichten te bekijken die afkomstig zijn van die URL. Nadat u url: DevTools toont alle relevante URL's.

Domeinen werken ook. Als https://example.com/a.js en https://example.com/b.js bijvoorbeeld berichten registreren, kunt u url:https://example.com u concentreren op de berichten van deze twee scripts.

Om alle berichten van een opgegeven URL te verbergen, typt -url: gevolgd door de URL, bijvoorbeeld https://b.wal.co . Dit is een filter voor uitgesloten URL's.

U kunt ook berichten van één enkele URL weergeven door de consolezijbalk te openen , de sectie Gebruikersberichten uit te vouwen en vervolgens op de URL te klikken van het script met de berichten waarop u zich wilt concentreren.

Filter berichten uit verschillende contexten

Stel dat u een advertentie op uw pagina heeft. De advertentie is ingesloten in een <iframe> en genereert veel berichten in uw console. Omdat deze advertentie zich in een andere JavaScript-context bevindt, kunt u de berichten verbergen door de Console-instellingen te openen en het selectievakje Alleen geselecteerde context in te schakelen.

Filter berichten eruit die niet overeenkomen met een reguliere-expressiepatroon

Typ een reguliere expressie zoals /[foo]\s[bar]/ in het tekstvak Filter om berichten eruit te filteren die niet met dat patroon overeenkomen. Spaties worden niet ondersteund. Gebruik in plaats daarvan \s . DevTools controleert of het patroon wordt gevonden in de berichttekst of het script dat ervoor zorgde dat het bericht werd geregistreerd.

Het volgende filtert bijvoorbeeld alle berichten eruit die niet overeenkomen met /[gm][ta][mi]/ .

Zoek naar tekst in logboeken

Zoeken naar tekst in logberichten:

1. Om een ​​ingebouwde zoekbalk te openen, drukt u op Command + F (Mac) of Ctrl + F (Windows, Linux).
2. Typ uw vraag in de balk. In dit voorbeeld is de query legacy . Optioneel kunt u:
   • Klik Match Case om uw zoekopdracht hoofdlettergevoelig te maken.
   • Klik Gebruik reguliere expressie om te zoeken met behulp van een RegEx-expressie.
3. Druk op Enter . Om naar het vorige of volgende zoekresultaat te gaan, drukt u op de knop omhoog of omlaag.

Voer JavaScript uit

Deze sectie bevat functies die verband houden met het uitvoeren van JavaScript in de console. Zie JavaScript uitvoeren voor een praktische uitleg.

Opties voor het kopiëren van tekenreeksen

De console voert tekenreeksen standaard uit als geldige JavaScript-literals. Klik met de rechtermuisknop op een uitvoer en kies uit drie kopieeropties:

• Kopieer als JavaScript letterlijk . Ontsnapt aan de juiste speciale tekens en plaatst de tekenreeks tussen enkele aanhalingstekens, dubbele aanhalingstekens of backticks, afhankelijk van de inhoud.
• Kopieer de tekenreeksinhoud . Kopieert de exacte onbewerkte tekenreeks naar het klembord, inclusief nieuwe regels en andere speciale tekens.
• Kopieer als JSON letterlijk . Formatteert de tekenreeks als geldige JSON.

Herhaal uitdrukkingen uit de geschiedenis

Druk op de pijl-omhoog om door de geschiedenis van JavaScript-expressies te bladeren die u eerder in de console hebt uitgevoerd. Druk op Enter om die expressie opnieuw uit te voeren.

Bekijk de waarde van een expressie in realtime met Live Expressions

Als u merkt dat u dezelfde JavaScript-expressie herhaaldelijk in de console typt, vindt u het wellicht gemakkelijker om een ​​Live Expression te maken. Met Live-expressies typt u een expressie één keer en zet u deze vervolgens vast aan de bovenkant van uw console. De waarde van de expressie wordt vrijwel in realtime bijgewerkt. Zie JavaScript-expressiewaarden in realtime bekijken met live-expressies .

Schakel enthousiaste evaluatie uit

Terwijl u JavaScript-expressies in de console typt, toont Eager Evaluation een voorbeeld van de geretourneerde waarde van die expressie. Open Console-instellingen en schakel het selectievakje Eager Evaluation uit om de voorbeelden van retourwaarden uit te schakelen.

Activeer gebruikersactivatie met evaluatie

Gebruikersactivatie is de status van een browsersessie die afhankelijk is van gebruikersacties. Een 'actieve' status betekent dat de gebruiker momenteel interactie heeft met de pagina of interactie heeft gehad sinds het laden van de pagina.

Om gebruikersactivatie bij een evaluatie te activeren, opent u Console-instellingen en vinkt u aan Beschouw code-evaluatie als gebruikersactie .

Schakel automatisch aanvullen uit de geschiedenis uit

Terwijl u een expressie typt, worden in de pop-up voor automatisch aanvullen van de console expressies weergegeven die u eerder hebt uitgevoerd. Deze expressies worden voorafgegaan door het teken > . In het volgende voorbeeld heeft DevTools eerder document.querySelector('a') en document.querySelector('img') geëvalueerd.

Open Console-instellingen en schakel het selectievakje Automatisch aanvullen uit geschiedenis uit om te voorkomen dat expressies uit uw geschiedenis worden weergegeven.

Selecteer JavaScript-context

Standaard is de vervolgkeuzelijst JavaScript-context ingesteld op top , wat de bladercontext van het hoofddocument vertegenwoordigt.

Stel dat u een advertentie op uw pagina heeft, ingebed in een <iframe> . U wilt JavaScript uitvoeren om de DOM van de advertentie aan te passen. Om dit te doen, moet u eerst de browsercontext van de advertentie selecteren in de vervolgkeuzelijst JavaScript-context .

Objecteigenschappen inspecteren

De console kan een interactieve lijst met eigenschappen weergeven van een JavaScript-object dat u opgeeft.

Om door de lijst te bladeren, typt u de objectnaam in de console en drukt u op Enter .

Om de eigenschappen van DOM-objecten te inspecteren, volgt u de stappen in De eigenschappen van DOM-objecten bekijken .

Ontdek eigen en geërfde eigendommen

De console sorteert eerst de eigen objecteigenschappen en markeert deze vetgedrukt.

Eigenschappen die zijn overgenomen van de prototypeketen hebben een normaal lettertype. De console geeft ze weer op het object zelf door de corresponderende native accessors van ingebouwde objecten te evalueren.

Evalueer aangepaste accessoires

Standaard evalueert DevTools de accessors die u maakt niet. Als u een aangepaste accessor voor een object wilt evalueren, klikt u op (...) .

Ontdek opsombare en niet-optelbare eigenschappen

De talloze eigenschappen zijn helder van kleur. Niet-opsombare eigenschappen zijn gedempt. Opsombare eigenschappen kunnen worden herhaald met de for … in loop- of Object.keys() -methode.

Ontdek privé-eigenschappen van klasse-instanties

De console wijst privé-eigenschappen van klasse-instanties aan met een # -voorvoegsel.

De console kan privé-eigenschappen ook automatisch aanvullen, zelfs als u deze buiten het klassenbereik evalueert.

Inspecteer interne JavaScript-eigenschappen

De console leent de ECMAScript-notatie en omsluit enkele eigenschappen die intern zijn voor JavaScript tussen dubbele vierkante haken. U kunt geen interactie hebben met dergelijke eigenschappen in uw code. Het kan echter nuttig zijn om ze te inspecteren.

Mogelijk ziet u de volgende interne eigenschappen voor verschillende objecten:

• Elk object heeft een [[Prototype]] .
• Primitieve wrappers hebben de eigenschap [[PrimitiveValue]] .
• ArrayBuffer objecten hebben de volgende eigenschappen:
  • [[Int8Array]] , [[Uint8Array]] , [[Int16Array]] , [[Int32Array]]
  • [[ArrayBufferByteLength]] , [[ArrayBufferData]]
    Belangrijk punt: Om een ​​JavaScripts ArrayBuffer te inspecteren waarnaar een view-object verwijst, klikt u op de knop.
• Naast ArrayBuffer -specifieke eigenschappen hebben WebAssembly.Memory objecten een eigenschap [[WebAssemblyMemory]] .
• Versleutelde verzamelingen (kaarten en sets) hebben de eigenschap [[Entries]] die hun ingetoetste vermeldingen bevat.
• Promise -objecten hebben de volgende eigenschappen:
  • [[PromiseState]] : in behandeling, vervuld of afgewezen
  • [[PromiseResult]] : undefined indien in behandeling, <value> indien vervuld, <reason> indien afgewezen
• Proxy objecten hebben de volgende eigenschappen: [[Handler]] object, [[Target]] object en [[isRevoked]] (al dan niet uitgeschakeld).

Functies inspecteren

In JavaScript zijn functies ook objecten met eigenschappen. Als u echter een functienaam in de Console typt, roept DevTools deze aan in plaats van de eigenschappen ervan weer te geven.

Om functie-eigenschappen intern in JavaScript te bekijken, gebruikt u de opdracht console.dir() .

Functies hebben de volgende eigenschappen:

• [[FunctionLocation]] . Een link naar de regel met de functiedefinitie in een bronbestand.
• [[Scopes]] . Geeft waarden en expressies weer waartoe de functie toegang heeft. Zie Lokale, afsluitings- en globale eigenschappen weergeven en bewerken om functiebereiken te inspecteren tijdens het opsporen van fouten.
• Gebonden functies hebben de volgende eigenschappen:
  • [[TargetFunction]] . Het doel van bind() .
  • [[BoundThis]] . De waarde this .
  • [[BoundArgs]] . Een array met functieargumenten.
• Generatorfuncties zijn gemarkeerd met de eigenschap [[IsGenerator]]: true .
• Generatoren retourneren iteratorobjecten en hebben de volgende eigenschappen:
  • [[GeneratorLocation]] . Een link naar een regel met de generatordefinitie in een bronbestand.
  • [[GeneratorState]] : suspended , closed of running.
  • [[GeneratorFunction]] . De generator die het object heeft geretourneerd.
  • [[GeneratorReceiver]] . Een object dat de waarde ontvangt.

Maak de console leeg

U kunt een van de volgende workflows gebruiken om de console leeg te maken:

• Klik op Console wissen .
• Klik met de rechtermuisknop op een bericht en selecteer Console wissen .
• Typ clear() in de console en druk vervolgens op Enter .
• Roep console.clear() aan vanuit het JavaScript van uw webpagina.
• Druk op Control + L terwijl de console scherpgesteld is.