Referentie voor consolefuncties

Sofia Emelianova
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).

De console.

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

De opdracht voor het weergeven van het consolepaneel.

Open de console in de lade

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

Laat de consolelade zien.

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

Het tabblad Console in de lade.

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.

De opdracht voor het weergeven van het tabblad Console in de lade.

Open Console-instellingen

Klik Instellingen. Console-instellingen in de rechterbovenhoek van de console .

Console-instellingen.

Via onderstaande links wordt elke instelling uitgelegd:

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

Console-zijbalk.

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 Log XHR en Ophaalverzoeken voor een voorbeeld.

Bekijk berichten van breekpunten

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

De console markeert berichten die zijn gemaakt door voorwaardelijke breekpunten en logpunten.

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 laatste frame staat bovenaan.

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

Sporen stapelen.

Bekijk foutoorzaken in stacktraces

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

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

Een keten van foutoorzaken voorafgegaan door 'Veroorzaakt door:' in de stacktrace.

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.

Asynchrone stacktrace.

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.

Toon N meer frames.

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

Voeg automatisch bekende scripts van derden toe aan de negeerlijst.

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.

Logboekregistratie van XMLHttpRequest- en Fetch-aanvragen.

Het bovenste bericht in het bovenstaande voorbeeld toont het standaardgroeperingsgedrag van de console. Het onderstaande voorbeeld laat zien hoe hetzelfde logbestand eruitziet na het uitschakelen van berichtgroepering .

Hoe de geregistreerde XMLHttpRequest- en Fetch-verzoeken er uitzien na het opheffen van de groepering.

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.

Een 404-bericht in de console.

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.

Toon CORS-fouten in de console.

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

Knoppen Netwerk en 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.

Gebruikersberichten bekijken.

Filter op logniveau

DevTools wijst de ernstniveaus van de meeste 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.

De vervolgkeuzelijst Logniveaus.

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

De zijbalk gebruiken om waarschuwingen te bekijken.

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.

Een URL-filter.

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.

Een filter voor negatieve URL's. DevTools verbergt alle berichten die overeenkomen met de opgegeven URL.

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.

De berichten van een specifiek script bekijken.

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 uit 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]/ .

Alle berichten eruit filteren die niet overeenkomen met /[gm][ta][mi]/.

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 . Een vraag typen. Optioneel kunt u:
    • Klik Match geval. Match Case om uw zoekopdracht hoofdlettergevoelig te maken.
    • Klik RegEx-knop. 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.

De kopieeropties.

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 eenvoudiger om een ​​Live Expression te maken. Met Live Expressions 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 Selectievakje. 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.

De pop-up voor automatisch aanvullen toont uitdrukkingen uit de geschiedenis.

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.

De vervolgkeuzelijst JavaScript-context.

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 .

Een andere JavaScript-context selecteren.

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.

Objecteigenschappen weergeven.

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.

Overgeërfde eigenschappen weergeven.

Evalueer aangepaste accessoires

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

Ontdek opsombare en niet-opsombare eigenschappen

De talloze eigenschappen zijn helder van kleur. Niet-opsombare eigenschappen zijn gedempt. Opsombare en niet-opsombare eigenschappen. 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.

Privé-eigendom van een klasse-instantie.

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

Automatische aanvulling van privé-eigendommen.

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:

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() .

Eigenschappen van een functie inspecteren.

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. Gebonden functie.
  • Generatorfuncties zijn gemarkeerd met de eigenschap [[IsGenerator]]: true . Generatorfunctie.
  • 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. Iterator-object.

Maak de console leeg

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

  • Klik op Console wissen Duidelijk. .
  • 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.