Referentie voor consolefuncties

Kayce Basques

Sofia Emelianova

Deze pagina dient als naslagwerk voor functies van de Chrome DevTools-console. Er wordt van uitgegaan dat u al bekend bent met het gebruik van de console om logberichten te bekijken en JavaScript uit te voeren. Zo niet, raadpleeg dan Aan de slag .

Als je de API-referentie zoekt voor functies zoals console.log() raadpleeg dan de API-referentie voor consoles . Voor de referentie voor functies zoals monitorEvents() raadpleeg dan de API-referentie voor consolehulpprogramma's .

Open de console

Je kunt de console openen als een paneel of als een tabblad in het zijmenu .

Open het consolepaneel

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

Om de console vanuit het opdrachtmenu te openen, typt u eerst Console en voert u vervolgens de opdracht 'Show Console' uit, die is gemarkeerd met het paneelpictogram .

Open de console in de lade.

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

Het zijpaneel verschijnt onderaan in je DevTools-venster, met het tabblad Console geopend.

Om het tabblad Console te openen vanuit het opdrachtmenu , typt u eerst Console en voert u vervolgens de opdracht Show Console uit, die is gemarkeerd met een lade- icoon.

Console-instellingen openen

Klik Console-instellingen in de rechterbovenhoek van de console .

De onderstaande links geven uitleg over elke instelling:

• Netwerk verbergen
• Bewaar logboek
• Alleen geselecteerde context
• Groepeer vergelijkbare berichten in de console
• CORS-fouten weergeven in de console
• Log XMLHttpRequests
• gretige evaluatie
• Automatisch aanvullen vanuit de geschiedenis

Open de zijbalk van de console

Klik op 'Console-zijbalk weergeven'. Om de zijbalk weer te geven, wat handig is voor het filteren.

Berichten bekijken

Deze sectie bevat functies waarmee u de weergave van berichten in de console kunt wijzigen. Zie Berichten bekijken voor een praktische handleiding.

Schakel berichtgroepering uit

Open de console-instellingen en schakel 'Groeperen' uit om het standaardgedrag voor het groeperen van berichten in de console uit te schakelen. Zie 'XHR- en Fetch-verzoeken loggen' voor een voorbeeld.

Bekijk berichten van breakpoints

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

• console.* roept voorwaardelijke breakpoints aan met een oranje vraagteken ?
• Logpoint -berichten met twee roze puntjes ..

Om naar de inline breakpoint-editor in het paneel Bronnen te gaan, klikt u op de ankerlink naast het breakpointbericht.

Stacktraceringen bekijken

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

Om een ​​stacktrace te bekijken, klikt u op de Uitklapicoon naast een fout of waarschuwing.

Bekijk de oorzaken van fouten in de stacktraces.

De console kan, indien aanwezig, de oorzaak van eventuele fouten in de stacktrace weergeven.

Om het debuggen te vereenvoudigen, kunt u bij het opvangen en opnieuw doorgeven van fouten de oorzaak van een fout specificeren . Terwijl de console de oorzaakketen doorloopt, print deze elke foutstack met het voorvoegsel Caused by: , zodat u de oorspronkelijke fout kunt vinden.

Bekijk asynchrone stacktraces

Als het framework dat u gebruikt dit ondersteunt, of wanneer u direct browser-planningsprimitieven gebruikt, zoals setTimeout , kunnen DevTools asynchrone bewerkingen traceren door beide delen van de asynchrone code aan elkaar te koppelen.

In dit geval laat de stacktrace het "volledige verhaal" van de asynchrone bewerking zien.

Toon bekende frames van derden in stacktraces.

Wanneer bronkaarten het veld ignoreList bevatten, verbergt de console standaard de frames van derden die afkomstig zijn van bronnen die gegenereerd zijn door bundlers (bijvoorbeeld webpack) of frameworks (bijvoorbeeld Angular) in de stacktracering.

Om de volledige stacktrace inclusief frames van derden te bekijken, klikt u onderaan de stacktrace op 'Toon N meer frames '.

Om altijd de volledige stacktrace te kunnen bekijken, schakelt u de optie uit. Instellingen > Negeerlijst > Instelling 'Bekende scripts van derden automatisch toevoegen aan de negeerlijst' .

Log XHR- en Fetch-verzoeken

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

Het bovenste bericht in het bovenstaande voorbeeld toont het standaard groeperingsgedrag van de console. Het onderstaande voorbeeld laat zien hoe hetzelfde logboek eruitziet nadat berichtgroepering is uitgeschakeld .

Behoud berichten, ook na het laden van de pagina.

Standaard wordt de console gewist zodra een nieuwe pagina wordt geladen. Om berichten te behouden bij het laden van een nieuwe pagina, opent u de console-instellingen en schakelt u het selectievakje 'Logboek behouden' in.

Netwerkberichten verbergen

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

Netwerkberichten verbergen:

1. Open de console-instellingen .
2. Schakel het selectievakje 'Netwerk verbergen' in.

CORS-fouten weergeven of verbergen

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

CORS-fouten weergeven of verbergen:

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

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

• om het verzoek te openen met een CORS-gerelateerde TypeError in het netwerkpaneel .
• Om een ​​mogelijke oplossing te vinden, ga naar het tabblad Problemen .

Filter berichten

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

Browserberichten filteren

Open de zijbalk van de console en klik op Gebruikersberichten om alleen berichten weer te geven die afkomstig zijn van de JavaScript-code van de pagina.

Filteren op logniveau

DevTools kent de meeste ernstniveaus toe aan console.* -methoden.

Er zijn vier niveaus:

• Verbose
• Info
• Warning
• Error

De functie console.log() valt bijvoorbeeld onder de groep Info , terwijl console.error() onder de groep Error valt. De API-referentie voor consoles beschrijft het ernstniveau van elke toepasselijke methode.

Elk bericht dat de browser naar de console logt, heeft ook een ernstniveau. Je kunt berichten van een bepaald niveau verbergen waarin je niet geïnteresseerd bent. Als je bijvoorbeeld alleen geïnteresseerd bent in Error , kun je de andere drie groepen verbergen.

Klik op het vervolgkeuzemenu 'Logniveaus' om de berichten Verbose , Info , Warning ' of Error in of uit te schakelen.

Je kunt ook filteren op logniveau. Open de zijbalk van de console en klik vervolgens op Fouten , Waarschuwingen , Info of Uitgebreid .

Filter berichten op URL

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

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

Om alle berichten van een specifieke URL te verbergen, typt -url: gevolgd door de URL, bijvoorbeeld https://b.wal.co . Dit is een negatief URL-filter.

Je kunt ook berichten van één enkele URL weergeven door de zijbalk van de console te openen , het gedeelte 'Gebruikersberichten' uit te vouwen en vervolgens op de URL te klikken van het script dat de berichten bevat waarop je je wilt concentreren.

Filter berichten uit verschillende contexten.

Stel dat je een advertentie op je pagina hebt. De advertentie is ingesloten in een <iframe> en genereert veel berichten in je console. Omdat deze advertentie zich in een andere JavaScript-context bevindt, kun je de berichten ervan verbergen door de console-instellingen te openen en het selectievakje 'Alleen geselecteerde context' in te schakelen.

Filter berichten eruit die niet overeenkomen met een patroon uit een reguliere expressie.

Typ een reguliere expressie zoals /[foo]\s[bar]/ in het tekstvak Filter om berichten te filteren die niet aan dat patroon voldoen. Spaties worden niet ondersteund; gebruik in plaats daarvan \s . DevTools controleert of het patroon in de berichttekst of in het script dat het bericht heeft gegenereerd, wordt gevonden.

Bijvoorbeeld, het volgende filtert alle berichten eruit die niet overeenkomen met /[gm][ta][mi]/ .

Zoek naar tekst in logbestanden

Om naar tekst in logberichten te zoeken:

1. Om de ingebouwde zoekbalk te openen, drukt u op Command + F (Mac) of Ctrl + F (Windows, Linux).
2. Typ je zoekopdracht in de zoekbalk. In dit voorbeeld is de zoekopdracht legacy . U kunt er ook voor kiezen om:
   • Klik Gebruik de filter 'Match Case' om uw zoekopdracht hoofdlettergevoelig te maken.
   • Klik Gebruik een reguliere expressie om te zoeken met behulp van een RegEx-uitdrukking.
3. Druk op Enter . Om naar het vorige of volgende zoekresultaat te gaan, drukt u op de pijltoetsen omhoog of omlaag.

JavaScript uitvoeren

Deze sectie bevat functies met betrekking tot het uitvoeren van JavaScript in de console. Zie JavaScript uitvoeren voor een praktische handleiding.

Opties voor het kopiëren van tekenreeksen

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

• Kopieer als JavaScript-literal . De juiste speciale tekens worden automatisch ontsnapt en de tekenreeks wordt tussen enkele aanhalingstekens, dubbele aanhalingstekens of backticks geplaatst, afhankelijk van de inhoud.
• Kopieert de tekenreeksinhoud . Kopieert de exacte, onbewerkte tekenreeks naar het klembord, inclusief nieuwe regels en andere speciale tekens.
• Kopiëren als JSON-literal . Formatteert de tekenreeks naar geldige JSON.

Herhaal eerdere expressies en wis de geschiedenis.

Druk op de pijltoets 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.

Om de consolegeschiedenis te wissen, klikt u met de rechtermuisknop op een lege ruimte in de console en selecteert u 'Consolegeschiedenis wissen' in het contextmenu.

Berichten wissen, kopiëren, uitvouwen, inklappen en opslaan.

Om het consolevenster leeg te maken, kunt u een van de volgende acties uitvoeren:

• Klik op het blok ' Console wissen' in de actiebalk bovenaan.
• Druk op Ctrl + L of Cmd + K.
• Klik met de rechtermuisknop op een lege ruimte in de console en selecteer 'Console wissen' in het contextmenu.

Om alle berichten uit te vouwen of in te klappen, klikt u op 'Uitvouwen ' of ' Inklappen ' in de actiebalk bovenaan.

Vanuit het contextmenu kunt u ook:

• Console kopiëren : Kopieer alle huidige berichten naar het klembord, maar niet de geschiedenis van eerdere opdrachten .
• Opslaan als... : Sla alle huidige berichten op in een platte tekstbestand met de extensie .log .

Bekijk de waarde van een expressie in realtime met Live Expressions.

Als je merkt dat je steeds dezelfde JavaScript-expressie in de console typt, kan het handiger zijn om een ​​Live Expression te maken. Met Live Expressions typ je een expressie één keer en zet je deze vervolgens vast bovenaan je console. De waarde van de expressie wordt vrijwel in realtime bijgewerkt. Zie JavaScript-expressiewaarden in realtime bekijken met Live Expressions .

Schakel Eager Evaluation uit

Wanneer je JavaScript-expressies in de console typt, toont Eager Evaluation een voorbeeld van de retourwaarde van die expressie. Open de console-instellingen en schakel het selectievakje Eager Evaluation uit om de voorbeelden van de retourwaarde uit te schakelen.

Activeer gebruikers met een evaluatie.

Gebruikersactivering 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 de pagina is geladen.

Om gebruikersactivering te activeren bij een evaluatie, opent u de console-instellingen en vinkt u deze optie aan. Beschouw code-evaluatie als een gebruikersactie .

Automatisch aanvullen uitschakelen in de geschiedenis

Terwijl u een expressie typt, toont het autocomplete-venster van de console expressies 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 de console-instellingen en schakel het selectievakje 'Automatisch aanvullen vanuit geschiedenis' uit om te voorkomen dat uitdrukkingen uit je geschiedenis worden weergegeven.

Selecteer JavaScript-context

Standaard staat het vervolgkeuzemenu JavaScript-context ingesteld op 'top' , wat de browsecontext van het hoofddocument vertegenwoordigt.

Stel, u hebt een advertentie op uw pagina die is ingesloten in een <iframe> . U wilt JavaScript uitvoeren om de DOM van de advertentie aan te passen. Om dit te doen, moet u eerst de browsecontext van de advertentie selecteren in het vervolgkeuzemenu 'JavaScript-context' .

Objecteigenschappen inspecteren

De console kan een interactieve lijst met eigenschappen van een door u opgegeven JavaScript-object weergeven.

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

Om de eigenschappen van DOM-objecten te inspecteren, volg je de stappen in ' De eigenschappen van DOM-objecten bekijken' .

Eigen en geërfde eigendommen

De console sorteert eerst de eigenschappen van het object zelf en markeert deze in een vet lettertype.

Eigenschappen die zijn overgeërfd van de prototypeketen worden weergegeven in een normaal lettertype. De console toont ze op het object zelf door de overeenkomstige native accessors van ingebouwde objecten te evalueren.

Evalueer aangepaste accessoires

Standaard evalueert DevTools de door u gemaakte accessors niet. Om een ​​aangepaste accessor op een object te evalueren, klikt u op (...) .

Identificeer opsombare en niet-opsombare eigenschappen

Telbare eigenschappen hebben een heldere kleur. Niet-telbare eigenschappen hebben een gedempte kleur. Opsombare eigenschappen kunnen worden doorlopen met een for … in lus of Object.keys() methode.

Zoek privé-eigenschappen van klasse-instanties

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

De console kan ook privé-eigenschappen automatisch aanvullen, zelfs wanneer u deze buiten de klasse-scope evalueert.

Inspecteer interne JavaScript-eigenschappen

De console gebruikt de ECMAScript-notatie om bepaalde eigenschappen die intern zijn aan JavaScript tussen dubbele vierkante haken te plaatsen. Je kunt in je code niet met deze eigenschappen interageren. Het kan echter wel nuttig zijn om ze te inspecteren.

Je kunt de volgende interne eigenschappen op verschillende objecten aantreffen:

• Elk object heeft een [[Prototype]] .
• Primitieve wrappers hebben een [[PrimitiveValue]] eigenschap.
• ArrayBuffer objecten hebben de volgende eigenschappen:
  • [[Int8Array]] , [[Uint8Array]] , [[Int16Array]] , [[Int32Array]]
  • [[ArrayBufferByteLength]] , [[ArrayBufferData]]
• Naast ArrayBuffer -specifieke eigenschappen hebben WebAssembly.Memory objecten ook een [[WebAssemblyMemory]] eigenschap.
• Gekoppelde collecties (maps en sets) hebben een [[Entries]] eigenschap die hun gekoppelde items 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]] (uitgeschakeld of niet).

Inspecteer functies

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

Om de interne eigenschappen van een JavaScript-functie 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 een lijst van waarden en expressies waartoe de functie toegang heeft. Zie Lokale, closure- en globale eigenschappen bekijken en bewerken om de scopes van een functie tijdens het debuggen te inspecteren.
• Gebonden functies hebben de volgende eigenschappen:
  • [[TargetFunction]] . Het doel van bind() .
  • [[BoundThis]] . De waarde van this .
  • [[BoundArgs]] . Een array met functieargumenten.
• Generatorfuncties zijn gemarkeerd met een [[IsGenerator]]: true eigenschap.
• Generatoren retourneren iteratorobjecten en deze 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.

Wis de console

Je 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 vervolgens 'Console wissen' .
• Typ clear() in de console en druk vervolgens op Enter .
• Roep console.clear() aan vanuit de JavaScript-code van je webpagina.
• Druk op Control + L terwijl de console is geselecteerd.

Kayce Basques

Sofia Emelianova

Deze pagina dient als naslagwerk voor functies van de Chrome DevTools-console. Er wordt van uitgegaan dat u al bekend bent met het gebruik van de console om logberichten te bekijken en JavaScript uit te voeren. Zo niet, raadpleeg dan Aan de slag .

Als je de API-referentie zoekt voor functies zoals console.log() raadpleeg dan de API-referentie voor consoles . Voor de referentie voor functies zoals monitorEvents() raadpleeg dan de API-referentie voor consolehulpprogramma's .

Open de console

Je kunt de console openen als een paneel of als een tabblad in het zijmenu .

Open het consolepaneel

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

Om de console vanuit het opdrachtmenu te openen, typt u eerst Console en voert u vervolgens de opdracht 'Show Console' uit, die is gemarkeerd met het paneelpictogram .

Open de console in de lade.

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

Het zijpaneel verschijnt onderaan in je DevTools-venster, met het tabblad Console geopend.

Om het tabblad Console te openen vanuit het opdrachtmenu , typt u eerst Console en voert u vervolgens de opdracht Show Console uit, die is gemarkeerd met een lade- icoon.

Console-instellingen openen

Klik Console-instellingen in de rechterbovenhoek van de console .

De onderstaande links geven uitleg over elke instelling:

• Netwerk verbergen
• Bewaar logboek
• Alleen geselecteerde context
• Groepeer vergelijkbare berichten in de console
• CORS-fouten weergeven in de console
• Log XMLHttpRequests
• gretige evaluatie
• Automatisch aanvullen vanuit de geschiedenis

Open de zijbalk van de console

Klik op 'Console-zijbalk weergeven'. Om de zijbalk weer te geven, wat handig is voor het filteren.

Berichten bekijken

Deze sectie bevat functies waarmee u de weergave van berichten in de console kunt wijzigen. Zie Berichten bekijken voor een praktische handleiding.

Schakel berichtgroepering uit

Open de console-instellingen en schakel 'Groeperen' uit om het standaardgedrag voor het groeperen van berichten in de console uit te schakelen. Zie 'XHR- en Fetch-verzoeken loggen' voor een voorbeeld.

Bekijk berichten van breakpoints

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

• console.* roept voorwaardelijke breakpoints aan met een oranje vraagteken ?
• Logpoint -berichten met twee roze puntjes ..

Om naar de inline breakpoint-editor in het paneel Bronnen te gaan, klikt u op de ankerlink naast het breakpointbericht.

Stacktraceringen bekijken

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

Om een ​​stacktrace te bekijken, klikt u op de Uitklapicoon naast een fout of waarschuwing.

Bekijk de oorzaken van fouten in de stacktraces.

De console kan, indien aanwezig, de oorzaak van eventuele fouten in de stacktrace weergeven.

Om het debuggen te vereenvoudigen, kunt u bij het opvangen en opnieuw doorgeven van fouten de oorzaak van een fout specificeren . Terwijl de console de oorzaakketen doorloopt, print deze elke foutstack met het voorvoegsel Caused by: , zodat u de oorspronkelijke fout kunt vinden.

Bekijk asynchrone stacktraces

Als het framework dat u gebruikt dit ondersteunt, of wanneer u direct browser-planningsprimitieven gebruikt, zoals setTimeout , kunnen DevTools asynchrone bewerkingen traceren door beide delen van de asynchrone code aan elkaar te koppelen.

In dit geval laat de stacktrace het "volledige verhaal" van de asynchrone bewerking zien.

Toon bekende frames van derden in stacktraces.

Wanneer bronkaarten het veld ignoreList bevatten, verbergt de console standaard de frames van derden die afkomstig zijn van bronnen die gegenereerd zijn door bundlers (bijvoorbeeld webpack) of frameworks (bijvoorbeeld Angular) in de stacktracering.

Om de volledige stacktrace inclusief frames van derden te bekijken, klikt u onderaan de stacktrace op 'Toon N meer frames '.

Om altijd de volledige stacktrace te kunnen bekijken, schakelt u de optie uit. Instellingen > Negeerlijst > Instelling 'Bekende scripts van derden automatisch toevoegen aan de negeerlijst' .

Log XHR- en Fetch-verzoeken

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

Het bovenste bericht in het bovenstaande voorbeeld toont het standaard groeperingsgedrag van de console. Het onderstaande voorbeeld laat zien hoe hetzelfde logboek eruitziet nadat berichtgroepering is uitgeschakeld .

Behoud berichten, ook na het laden van de pagina.

Standaard wordt de console gewist zodra een nieuwe pagina wordt geladen. Om berichten te behouden bij het laden van een nieuwe pagina, opent u de console-instellingen en schakelt u het selectievakje 'Logboek behouden' in.

Netwerkberichten verbergen

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

Netwerkberichten verbergen:

1. Open de console-instellingen .
2. Schakel het selectievakje 'Netwerk verbergen' in.

CORS-fouten weergeven of verbergen

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

CORS-fouten weergeven of verbergen:

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

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

• om het verzoek te openen met een CORS-gerelateerde TypeError in het netwerkpaneel .
• Om een ​​mogelijke oplossing te vinden, ga naar het tabblad Problemen .

Filter berichten

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

Browserberichten filteren

Open de zijbalk van de console en klik op Gebruikersberichten om alleen berichten weer te geven die afkomstig zijn van de JavaScript-code van de pagina.

Filteren op logniveau

DevTools kent de meeste ernstniveaus toe aan console.* -methoden.

Er zijn vier niveaus:

• Verbose
• Info
• Warning
• Error

De functie console.log() valt bijvoorbeeld onder de groep Info , terwijl console.error() onder de groep Error valt. De API-referentie voor consoles beschrijft het ernstniveau van elke toepasselijke methode.

Elk bericht dat de browser naar de console logt, heeft ook een ernstniveau. Je kunt berichten van een bepaald niveau verbergen waarin je niet geïnteresseerd bent. Als je bijvoorbeeld alleen geïnteresseerd bent in Error , kun je de andere drie groepen verbergen.

Klik op het vervolgkeuzemenu 'Logniveaus' om de berichten Verbose , Info , Warning ' of Error in of uit te schakelen.

Je kunt ook filteren op logniveau. Open de zijbalk van de console en klik vervolgens op Fouten , Waarschuwingen , Info of Uitgebreid .

Filter berichten op URL

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

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

Om alle berichten van een specifieke URL te verbergen, typt -url: gevolgd door de URL, bijvoorbeeld https://b.wal.co . Dit is een negatief URL-filter.

Je kunt ook berichten van één enkele URL weergeven door de zijbalk van de console te openen , het gedeelte 'Gebruikersberichten' uit te vouwen en vervolgens op de URL te klikken van het script dat de berichten bevat waarop je je wilt concentreren.

Filter berichten uit verschillende contexten.

Stel dat je een advertentie op je pagina hebt. De advertentie is ingesloten in een <iframe> en genereert veel berichten in je console. Omdat deze advertentie zich in een andere JavaScript-context bevindt, kun je de berichten ervan verbergen door de console-instellingen te openen en het selectievakje 'Alleen geselecteerde context' in te schakelen.

Filter berichten eruit die niet overeenkomen met een patroon uit een reguliere expressie.

Typ een reguliere expressie zoals /[foo]\s[bar]/ in het tekstvak Filter om berichten te filteren die niet aan dat patroon voldoen. Spaties worden niet ondersteund; gebruik in plaats daarvan \s . DevTools controleert of het patroon in de berichttekst of in het script dat het bericht heeft gegenereerd, wordt gevonden.

Bijvoorbeeld, het volgende filtert alle berichten eruit die niet overeenkomen met /[gm][ta][mi]/ .

Zoek naar tekst in logbestanden

Om naar tekst in logberichten te zoeken:

1. Om de ingebouwde zoekbalk te openen, drukt u op Command + F (Mac) of Ctrl + F (Windows, Linux).
2. Typ je zoekopdracht in de zoekbalk. In dit voorbeeld is de zoekopdracht legacy . U kunt er ook voor kiezen om:
   • Klik Gebruik de filter 'Match Case' om uw zoekopdracht hoofdlettergevoelig te maken.
   • Klik Gebruik een reguliere expressie om te zoeken met behulp van een RegEx-uitdrukking.
3. Druk op Enter . Om naar het vorige of volgende zoekresultaat te gaan, drukt u op de pijltoetsen omhoog of omlaag.

JavaScript uitvoeren

Deze sectie bevat functies met betrekking tot het uitvoeren van JavaScript in de console. Zie JavaScript uitvoeren voor een praktische handleiding.

Opties voor het kopiëren van tekenreeksen

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

• Kopieer als JavaScript-literal . De juiste speciale tekens worden automatisch ontsnapt en de tekenreeks wordt tussen enkele aanhalingstekens, dubbele aanhalingstekens of backticks geplaatst, afhankelijk van de inhoud.
• Kopieert de tekenreeksinhoud . Kopieert de exacte, onbewerkte tekenreeks naar het klembord, inclusief nieuwe regels en andere speciale tekens.
• Kopiëren als JSON-literal . Formatteert de tekenreeks naar geldige JSON.

Herhaal eerdere expressies en wis de geschiedenis.

Druk op de pijltoets 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.

Om de consolegeschiedenis te wissen, klikt u met de rechtermuisknop op een lege ruimte in de console en selecteert u 'Consolegeschiedenis wissen' in het contextmenu.

Berichten wissen, kopiëren, uitvouwen, inklappen en opslaan.

Om het consolevenster leeg te maken, kunt u een van de volgende acties uitvoeren:

• Klik op het blok ' Console wissen' in de actiebalk bovenaan.
• Druk op Ctrl + L of Cmd + K.
• Klik met de rechtermuisknop op een lege ruimte in de console en selecteer 'Console wissen' in het contextmenu.

Om alle berichten uit te vouwen of in te klappen, klikt u op 'Uitvouwen ' of ' Inklappen ' in de actiebalk bovenaan.

Vanuit het contextmenu kunt u ook:

• Console kopiëren : Kopieer alle huidige berichten naar het klembord, maar niet de geschiedenis van eerdere opdrachten .
• Opslaan als... : Sla alle huidige berichten op in een platte tekstbestand met de extensie .log .

Bekijk de waarde van een expressie in realtime met Live Expressions.

Als je merkt dat je steeds dezelfde JavaScript-expressie in de console typt, kan het handiger zijn om een ​​Live Expression te maken. Met Live Expressions typ je een expressie één keer en zet je deze vervolgens vast bovenaan je console. De waarde van de expressie wordt vrijwel in realtime bijgewerkt. Zie JavaScript-expressiewaarden in realtime bekijken met Live Expressions .

Schakel Eager Evaluation uit

Wanneer je JavaScript-expressies in de console typt, toont Eager Evaluation een voorbeeld van de retourwaarde van die expressie. Open de console-instellingen en schakel het selectievakje Eager Evaluation uit om de voorbeelden van de retourwaarde uit te schakelen.

Activeer gebruikers met een evaluatie.

Gebruikersactivering 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 de pagina is geladen.

Om gebruikersactivering te activeren bij een evaluatie, opent u de console-instellingen en vinkt u deze optie aan. Beschouw code-evaluatie als een gebruikersactie .

Automatisch aanvullen uitschakelen in de geschiedenis

Terwijl u een expressie typt, toont het autocomplete-venster van de console expressies 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 de console-instellingen en schakel het selectievakje 'Automatisch aanvullen vanuit geschiedenis' uit om te voorkomen dat uitdrukkingen uit je geschiedenis worden weergegeven.

Selecteer JavaScript-context

Standaard staat het vervolgkeuzemenu JavaScript-context ingesteld op 'top' , wat de browsecontext van het hoofddocument vertegenwoordigt.

Stel, u hebt een advertentie op uw pagina die is ingesloten in een <iframe> . U wilt JavaScript uitvoeren om de DOM van de advertentie aan te passen. Om dit te doen, moet u eerst de browsecontext van de advertentie selecteren in het vervolgkeuzemenu 'JavaScript-context' .

Objecteigenschappen inspecteren

De console kan een interactieve lijst met eigenschappen van een door u opgegeven JavaScript-object weergeven.

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

Om de eigenschappen van DOM-objecten te inspecteren, volg je de stappen in ' De eigenschappen van DOM-objecten bekijken' .

Eigen en geërfde eigendommen

De console sorteert eerst de eigenschappen van het object zelf en markeert deze in een vet lettertype.

Eigenschappen die zijn overgeërfd van de prototypeketen worden weergegeven in een normaal lettertype. De console toont ze op het object zelf door de overeenkomstige native accessors van ingebouwde objecten te evalueren.

Evalueer aangepaste accessoires

Standaard evalueert DevTools de door u gemaakte accessors niet. Om een ​​aangepaste accessor op een object te evalueren, klikt u op (...) .

Identificeer opsombare en niet-opsombare eigenschappen

Telbare eigenschappen hebben een heldere kleur. Niet-telbare eigenschappen hebben een gedempte kleur. Opsombare eigenschappen kunnen worden doorlopen met een for … in lus of Object.keys() methode.

Zoek privé-eigenschappen van klasse-instanties

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

De console kan ook privé-eigenschappen automatisch aanvullen, zelfs wanneer u deze buiten de klasse-scope evalueert.

Inspecteer interne JavaScript-eigenschappen

Borrowing the ECMAScript notation , the Console encloses some properties internal to JavaScript in double square brackets. You can't interact with such properties in your code. However, it might be useful to inspect them.

You might see the following internal properties on different objects:

• Any object has a [[Prototype]] .
• Primitive wrappers have a [[PrimitiveValue]] property.
• ArrayBuffer objects have the following properties:
  • [[Int8Array]] , [[Uint8Array]] , [[Int16Array]] , [[Int32Array]]
  • [[ArrayBufferByteLength]] , [[ArrayBufferData]]
• In addition to ArrayBuffer -specific properties, WebAssembly.Memory objects have a [[WebAssemblyMemory]] property.
• Keyed collections (maps and sets) have an [[Entries]] property that contains their keyed entries.
• Promise objects have the following properties:
  • [[PromiseState]] : pending, fulfilled, or rejected
  • [[PromiseResult]] : undefined if pending, <value> if fulfilled, <reason> if rejected
• Proxy objects have the following properties: [[Handler]] object, [[Target]] object, and [[isRevoked]] (switched off or not).

Inspect functions

In JavaScript, functions are also objects with properties. However, if you type a function name into the Console , DevTools calls it instead of displaying its properties.

To view function properties internal to JavaScript, use the console.dir() command.

Functions have the following properties:

• [[FunctionLocation]] . A link to the line with the function definition in a source file.
• [[Scopes]] . Lists values and expressions the function has access to. To inspect function scopes during debugging, see View and edit local, closure, and global properties .
• Bound functions have the following properties:
  • [[TargetFunction]] . The target of bind() .
  • [[BoundThis]] . The value of this .
  • [[BoundArgs]] . An array of function arguments.
• Generator functions are marked with a [[IsGenerator]]: true property.
• Generators return iterator objects and they have following properties:
  • [[GeneratorLocation]] . A link to a line with the generator definition in a source file.
  • [[GeneratorState]] : suspended , closed , or running.
  • [[GeneratorFunction]] . The generator that returned the object.
  • [[GeneratorReceiver]] . An object that receives the value.

Clear the Console

You can use any of the following workflows to clear the Console:

• Click Clear Console .
• Right-click a message and then select Clear Console .
• Type clear() in the Console and then press Enter .
• Call console.clear() from your webpage's JavaScript.
• Press Control + L while the Console is in focus.

Kayce Basques

Sofia Emelianova

This page is a reference of features related to the Chrome DevTools Console. It assumes that you're already familiar with using the Console to view logged messages and run JavaScript. If not, see Get Started .

If you're looking for the API reference on functions like console.log() see Console API Reference . For the reference on functions like monitorEvents() see Console Utilities API Reference .

Open the Console

You can open the Console as a panel or as a tab in the Drawer .

Open the Console panel

Press Control + Shift + J or Command + Option + J (Mac).

To open the Console from the Command Menu , start typing Console and then run the Show Console command that has the Panel badge next to it.

Open the Console in the Drawer

Press Escape or click Customize And Control DevTools and then select Show Console Drawer .

The Drawer pops up at the bottom of your DevTools window, with the Console tab open.

To open the Console tab from the Command Menu , start typing Console and then run the Show Console command that has the Drawer badge next to it.

Open Console Settings

Klik Console Settings in the top-right corner of the Console .

The links below explain each setting:

• Hide network
• Preserve log
• Selected context only
• Group similar messages in console
• Show CORS errors in console
• Log XMLHttpRequests
• Eager evaluation
• Autocomplete from history

Open the Console Sidebar

Click Show Console Sidebar to show the Sidebar, which is useful for filtering.

View messages

This section contains features that change how messages are presented in the Console. See View messages for a hands-on walkthrough.

Disable message grouping

Open Console Settings and disable Group similar to disable the Console's default message grouping behavior. See Log XHR and Fetch requests for an example.

View messages from breakpoints

The Console marks messages triggered by breakpoints in the following way:

• console.* calls in conditional breakpoints with an orange question mark ?
• Logpoint messages with pink two dots ..

To jump to the inline breakpoint editor in the Sources panel, click the anchor link next to the breakpoint message.

View stack traces

The Console automatically captures stack traces for errors and warnings. A stack trace is a history of function calls (frames) that led to the error or warning. The Console shows them in reverse order: the latest frame is at the top.

To view a stack trace, click the expand icon next to an error or warning.

View error causes in stack traces

The Console can show you chains of error causes in the stack trace, if any.

To make debugging easier, you can specify error causes when catching and rethrowing errors. As the Console walks up the cause chain, it prints each error stack with a Caused by: prefix, so you can find the original error.

View async stack traces

If supported by the framework you are using or when directly using browser scheduling primitives, such as setTimeout , DevTools can trace async operations by linking both parts of the async code together.

In this case, the stack trace shows the "full story" of the async operation.

Show known third-party frames in stack traces

When source maps include the ignoreList field, by default, the Console hides from stack traces the third-party frames from sources generated by bundlers (for example, webpack) or frameworks (for example, Angular).

To view the full stack trace including third-party frames, click Show N more frames at the bottom of the stack trace.

To always view the full stack trace, disable the Settings > Ignore List > Automatically add known third-party scripts to ignore list setting.

Log XHR and Fetch requests

Open Console Settings and enable Log XMLHttpRequests to log all XMLHttpRequest and Fetch requests to the Console as they happen.

The top message in the example above shows the Console's default grouping behavior. The example below shows how the same log looks after disabling message grouping .

Persist messages across page loads

By default the Console clears whenever you load a new page. To persist messages across page loads, Open Console Settings and then enable the Preserve Log checkbox.

Hide network messages

By default the browser logs network messages to the Console . For example, the top message in the following example represents a 404.

To hide network messages:

1. Open Console Settings .
2. Enable the Hide Network checkbox.

Show or hide CORS errors

The Console can show CORS errors if network requests fail due to Cross-Origin Resource Sharing (CORS) .

To show or hide CORS errors:

1. Open Console Settings .
2. Check or clear the Show CORS errors in the console checkbox.

If the console is set to show CORS errors and you encounter them, you can click the following buttons next to errors:

• to open the request with a CORS-related TypeError in the Network panel.
• to get a potential solution on the Issues tab .

Filter messages

There are many ways to filter out messages in the Console.

Filter out browser messages

Open the Console Sidebar and click User Messages to only show messages that came from the page's JavaScript.

Filter by log level

DevTools assigns most of console.* methods severity levels.

There are four levels:

• Verbose
• Info
• Warning
• Error

For example, console.log() is in the Info group, whereas console.error() is in the Error group. The Console API Reference describes the severity level of each applicable method.

Every message that the browser logs to the Console has a severity level too. You can hide any level of messages that you're not interested in. For example, if you're only interested in Error messages, you can hide the other 3 groups.

Click the Log Levels drop-down to enable or disable Verbose , Info , Warning or Error messages.

You can also filter by log level by opening the Console Sidebar and then clicking Errors , Warnings , Info , or Verbose .

Filter messages by URL

Type url: followed by a URL to only view messages that came from that URL. After you type url: DevTools shows all relevant URLs.

Domains also work. For example, if https://example.com/a.js and https://example.com/b.js are logging messages, url:https://example.com enables you to focus on the messages from these 2 scripts.

To hide all messages from a specified URL, type -url: followed by the URL, for example, https://b.wal.co . This is a negative URL filter.

You can also show messages from a single URL by opening the Console Sidebar , expanding the User Messages section, and then clicking the URL of the script containing the messages you want to focus on.

Filter out messages from different contexts

Suppose that you've got an ad on your page. The ad is embedded in an <iframe> and is generating a lot of messages in your Console. Because this ad is in a different JavaScript context , one way to hide its messages is to open Console Settings and enable the Selected Context Only checkbox.

Filter out messages that don't match a regular expression pattern

Type a regular expression such as /[foo]\s[bar]/ in the Filter text box to filter out any messages that don't match that pattern. Spaces are not supported, use \s instead. DevTools checks if the pattern is found in the message text or the script that caused the message to be logged.

For example, the following filters out all messages that don't match /[gm][ta][mi]/ .

Search for text in logs

To search for text in log messages:

1. To open a built-in search bar, press Command + F (Mac) or Ctrl + F (Windows, Linux).
2. In the bar, type your query. In this example the query is legacy . Optionally, you can:
   • Klik Match Case to make your query case-sensitive.
   • Klik Use Regular Expression to search using a RegEx expression.
3. Press Enter . To jump to previous or next search result, press the up or down button.

Run JavaScript

This section contains features related to running JavaScript in the Console. See Run JavaScript for a hands-on walkthrough.

String copy options

The console outputs strings as valid JavaScript literals by default. Right-click an output and choose between three copy options:

• Copy as JavaScript literal . Escapes appropriate special characters and wraps the string in either single quotes, double quotes, or backticks depending on the content.
• Copy string contents . Copies the exact raw string to the clipboard, including new lines and other special characters.
• Copy as JSON literal . Formats the string to valid JSON.

Re-run previous expressions and clear history

Press the Up Arrow key to cycle through the history of JavaScript expressions that you ran earlier in the Console . Press Enter to run that expression again.

To clear the console history, right-click an empty space in the Console and select Clear console history from the context menu.

Clear, copy, expand, collapse, and save messages

To clear the Console window, do one of the following:

• Click block Clear console in the action bar at the top.
• Press Ctrl + L or Cmd + K .
• Right-click an empty space in the Console and select Clear console from the context menu.

To expand or collapse all messages, click expand Expand all or compress Collapse all in the action bar at the top.

From the context menu, you can also:

• Copy console : Copy all current messages to clipboard, but not the history of previous commands .
• Save as... : Save all current messages to a plaintext .log file.

Watch an expression's value in real-time with Live Expressions

If you find yourself typing the same JavaScript expression in the Console repeatedly, you might find it easier to create a Live Expression . With Live Expressions , you type an expression once and then pin it to the top of your Console. The value of the expression updates in near real-time. See Watch JavaScript Expression Values In Real-Time With Live Expressions .

Disable Eager Evaluation

As you type JavaScript expressions in the Console, Eager Evaluation shows a preview of that expression's return value. Open Console Settings and disable the Eager Evaluation checkbox to turn off the return value previews.

Trigger user activation with evaluation

User activation is the state of a browsing session that depends on user actions. An "active" state means the user is currently interacting with the page or has interacted since page load.

To trigger user activation with any evaluation, open Console Settings and check Treat code evaluation as user action .

Disable autocomplete from history

As you type out an expression, the Console's autocomplete popup shows expressions that you ran earlier. These expressions are prepended with the > character. In the following example, DevTools earlier evaluated document.querySelector('a') and document.querySelector('img') .

Open Console Settings and disable the Autocomplete From History checkbox to stop showing expressions from your history.

Select JavaScript context

By default the JavaScript Context drop-down is set to top , which represents the main document's browsing context .

Suppose you have an ad on your page embedded in an <iframe> . You want to run JavaScript in order to tweak the ad's DOM. To do this, you first need to select the ad's browsing context from the JavaScript Context drop-down.

Inspect object properties

The Console can display an interactive list of properties of a JavaScript object you specify.

To browse the list, type the object name into the Console and press Enter .

To inspect the properties of DOM objects, follow the steps in View the properties of DOM objects .

Spot own and inherited properties

The Console sorts own object properties first and highlights them in bold font.

Properties inherited from the prototype chain are in regular font. The Console displays them on the object itself by evaluating the corresponding native accessors of built-in objects.

Evaluate custom accessors

By default, DevTools doesn't evaluate accessors you create. To evaluate a custom accessor on an object, click (...) .

Spot enumerable and non-enumerable properties

Enumerable properties are bright in color. Non-enumerable properties are muted. Enumerable properties can be iterated over with the for … in loop or Object.keys() method.

Spot private properties of class instances

The Console designates private properties of class instances with a # prefix.

The Console can also autocomplete private properties even when you evaluate them ouside the class scope.

Inspect internal JavaScript properties

Borrowing the ECMAScript notation , the Console encloses some properties internal to JavaScript in double square brackets. You can't interact with such properties in your code. However, it might be useful to inspect them.

You might see the following internal properties on different objects:

• Any object has a [[Prototype]] .
• Primitive wrappers have a [[PrimitiveValue]] property.
• ArrayBuffer objects have the following properties:
  • [[Int8Array]] , [[Uint8Array]] , [[Int16Array]] , [[Int32Array]]
  • [[ArrayBufferByteLength]] , [[ArrayBufferData]]
• In addition to ArrayBuffer -specific properties, WebAssembly.Memory objects have a [[WebAssemblyMemory]] property.
• Keyed collections (maps and sets) have an [[Entries]] property that contains their keyed entries.
• Promise objects have the following properties:
  • [[PromiseState]] : pending, fulfilled, or rejected
  • [[PromiseResult]] : undefined if pending, <value> if fulfilled, <reason> if rejected
• Proxy objects have the following properties: [[Handler]] object, [[Target]] object, and [[isRevoked]] (switched off or not).

Inspect functions

In JavaScript, functions are also objects with properties. However, if you type a function name into the Console , DevTools calls it instead of displaying its properties.

To view function properties internal to JavaScript, use the console.dir() command.

Functions have the following properties:

• [[FunctionLocation]] . A link to the line with the function definition in a source file.
• [[Scopes]] . Lists values and expressions the function has access to. To inspect function scopes during debugging, see View and edit local, closure, and global properties .
• Bound functions have the following properties:
  • [[TargetFunction]] . The target of bind() .
  • [[BoundThis]] . The value of this .
  • [[BoundArgs]] . An array of function arguments.
• Generator functions are marked with a [[IsGenerator]]: true property.
• Generators return iterator objects and they have following properties:
  • [[GeneratorLocation]] . A link to a line with the generator definition in a source file.
  • [[GeneratorState]] : suspended , closed , or running.
  • [[GeneratorFunction]] . The generator that returned the object.
  • [[GeneratorReceiver]] . An object that receives the value.

Clear the Console

You can use any of the following workflows to clear the Console:

• Click Clear Console .
• Right-click a message and then select Clear Console .
• Type clear() in the Console and then press Enter .
• Call console.clear() from your webpage's JavaScript.
• Press Control + L while the Console is in focus.