Log berichten in de console

Kayce Basques

Deze interactieve handleiding laat je zien hoe je berichten kunt loggen en filteren in de Chrome DevTools- console.

Deze handleiding is bedoeld om in de juiste volgorde te worden doorlopen. Er wordt van uitgegaan dat u de basisprincipes van webontwikkeling begrijpt, zoals hoe u JavaScript kunt gebruiken om een ​​pagina interactief te maken.

De demo en DevTools instellen

Deze handleiding is zo ontworpen dat u de demo kunt openen en alle workflows zelf kunt uitproberen. Door de stappen fysiek te volgen, is de kans groter dat u de workflows later onthoudt.

1. Open de demo .

2. Optioneel: Verplaats de demo naar een apart venster. In dit voorbeeld staat de handleiding aan de linkerkant en de demo aan de rechterkant.

   

3. Focus op de demo en druk vervolgens op Control + Shift + J of Command + Option + J (Mac) om DevTools te openen. Standaard wordt DevTools rechts van de demo geopend.

   

4. Optioneel: Veranker DevTools onderaan het venster of open het in een apart venster .

   DevTools is onderaan de demo vastgezet:

   DevTools losgekoppeld in een apart venster:

Bekijk berichten die zijn vastgelegd met JavaScript.

De meeste berichten die je in de console ziet, zijn afkomstig van de webontwikkelaars die de JavaScript-code van de pagina hebben geschreven. Het doel van dit gedeelte is om je kennis te laten maken met de verschillende berichttypen die je waarschijnlijk in de console zult zien, en uit te leggen hoe je elk berichttype zelf kunt loggen vanuit je eigen JavaScript.

1. Klik in de demo op de knop 'Log Info' . Hello, Console! wordt in de console weergegeven.

   

2. Klik naast het bericht Hello, Console! in de console op log.js:2 . Het paneel "Bronnen" wordt geopend en markeert de regel code die ervoor zorgde dat het bericht in de console werd weergegeven.

   

   Het bericht werd vastgelegd toen de JavaScript-code van de pagina de functie ` console.log('Hello, Console!') aanriep.

3. Ga terug naar de console met behulp van een van de volgende workflows:

   • Klik op het tabblad Console .
   • Druk op Control + [ of Command + [ (Mac) totdat de console actief is.
   • Open het opdrachtmenu , begin met het typen van Console , selecteer de opdracht 'Toon consolevenster' en druk vervolgens op Enter .

4. Klik in de demo op de knop 'Log Warning' . Abandon Hope All Ye Who Enter wordt in de console gelogd.

   

   Berichten die op deze manier zijn opgemaakt, zijn waarschuwingen.

5. Optioneel: Klik op log.js:12 om de code te bekijken die ervoor zorgde dat het bericht op deze manier werd opgemaakt, en ga vervolgens terug naar Console als je klaar bent. Doe dit wanneer je de code wilt zien die ervoor zorgde dat een bericht op een bepaalde manier werd gelogd.

6. Klik op Uitbreiden pictogram voor ' Abandon Hope All Ye Who Enter . DevTools toont de stacktrace die aan de aanroep voorafgaat.

   

   De stacktrace laat zien dat een functie met de naam logWarning is aangeroepen, die op haar beurt een functie met de naam quoteDante heeft aangeroepen. Met andere woorden, de aanroep die als eerste plaatsvond, staat onderaan de stacktrace. Je kunt op elk moment stacktraces loggen door console.trace() aan te roepen.

7. Klik op Fout registreren . Het volgende foutbericht wordt geregistreerd: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Klik op Logtabel . Er wordt een tabel met informatie over beroemde artiesten in de console weergegeven.

   

   Let op hoe de kolom birthday slechts voor één rij wordt ingevuld. Bekijk de code om te achterhalen waarom dat zo is.

9. Klik op Logboekgroep . De namen van 4 beroemde, misdaadbestrijdende schildpadden zijn gegroepeerd onder het label Adolescent Irradiated Espionage Tortoises .

   

10. Klik op 'Aangepast loggen' . Er wordt een bericht met een rode rand en een blauwe achtergrond in de console vastgelegd.

    

Het belangrijkste idee hier is dat wanneer je berichten vanuit je JavaScript naar de console wilt loggen, je een van de console gebruikt. Elke methode formatteert berichten op een andere manier.

Er zijn nog meer methoden dan in dit gedeelte zijn gedemonstreerd. Aan het einde van de handleiding leer je hoe je de overige methoden kunt verkennen.

Bekijk berichten die door de browser zijn vastgelegd.

De browser logt ook berichten naar de console. Dit gebeurt meestal wanneer er een probleem is met de pagina.

1. Klik op Oorzaak 404. De browser registreert een 404 netwerkfout omdat de JavaScript-code van de pagina een bestand probeerde op te halen dat niet bestaat.

   

2. Klik op Fout veroorzaken . De browser registreert een niet-afgevangen TypeError omdat de JavaScript-code probeert een DOM-element bij te werken dat niet bestaat.

   

3. Klik op het vervolgkeuzemenu 'Logniveaus' en schakel de optie 'Uitgebreid' in als deze is uitgeschakeld. In het volgende gedeelte leest u meer over filteren. Dit is nodig om ervoor te zorgen dat het volgende bericht dat u logt, zichtbaar is. Opmerking: Als het vervolgkeuzemenu 'Standaardniveaus' is uitgeschakeld, moet u mogelijk de zijbalk van de console sluiten. Zie 'Filteren op berichtbron' hieronder voor meer informatie over de zijbalk van de console.

   

4. Klikken veroorzaakt een overtreding . De pagina reageert een paar seconden niet en vervolgens logt de browser het bericht [Violation] 'click' handler took 3000ms in de console. De exacte duur kan variëren.

   

Filter berichten

Op sommige pagina's zie je dat de console overspoeld wordt met berichten. DevTools biedt verschillende manieren om berichten te filteren die niet relevant zijn voor de taak waar je mee bezig bent.

Belangrijk punt: De console filtert alleen de uitvoerberichten eruit; alle invoer die je in de console hebt getypt, blijft behouden.

Filteren op logniveau

Aan elke console.* methode wordt een ernstniveau toegekend: Verbose , Info , Warning of Error . Zo is console.log() een bericht met het niveau Info , terwijl console.error() een bericht met het niveau Error is.

Opmerking: Voor een volledige lijst van console.* methoden en hun ernstniveaus, raadpleeg de API-referentie voor de console .

Om te filteren op logniveau:

1. Klik op het vervolgkeuzemenu 'Logniveaus' en schakel 'Fouten' uit. Een niveau is uitgeschakeld wanneer er geen vinkje meer naast staat. De Error verdwijnen dan.

   

2. Klik nogmaals op het vervolgkeuzemenu 'Logniveaus' en schakel 'Fouten' weer in. De Error verschijnen opnieuw.

Belangrijk punt: De console onthoudt altijd het filter dat je in het dropdownmenu toepast. Dit filter blijft behouden op alle pagina's, ook na het opnieuw laden van de pagina, de ontwikkelaarstools en Chrome. Om snel een tijdelijk filter toe te passen, gebruik je de zijbalk .

Filteren op tekst

Als u alleen berichten wilt zien die een specifieke tekenreeks bevatten, typt u die tekenreeks in het filtervak .

1. Typ ' Dave in het filtervak . Alle berichten die de tekenreeks Dave niet bevatten, worden verborgen.

   

2. Verwijder Dave uit het filter . Alle berichten verschijnen opnieuw.

Filteren op reguliere expressie

Als je alle berichten wilt weergeven die een bepaald tekstpatroon bevatten, in plaats van een specifieke tekenreeks, gebruik dan een reguliere expressie .

1. Typ /^[AH]/ in het filtervak . Typ dit patroon in RegExr voor een uitleg van wat het doet.

   

2. Verwijder /^[AH]/ uit het filtervak . Alle berichten zijn weer zichtbaar.

Filteren op berichtbron

Als je alleen berichten wilt zien die afkomstig zijn van een bepaalde URL, gebruik dan de zijbalk .

Belangrijk punt: filters in de zijbalk zijn tijdelijk. De console bewaart deze filters niet op alle pagina's, noch na het herladen van de pagina, de ontwikkelaarstools en Chrome.

1. Klik op 'Console-zijbalk weergeven'. .

   

2. Klik op Uitbreiden pictogram naast 12 berichten . De zijbalk toont een lijst met URL's die ervoor zorgden dat berichten werden gelogd. log.js heeft bijvoorbeeld 11 berichten gegenereerd.

   

Filteren op gebruikersberichten

Eerder, toen je op 'Log Info' klikte, riep een script console.log('Hello, Console!') aan om het bericht naar de console te loggen. Berichten die op deze manier door JavaScript worden gelogd, worden gebruikersberichten genoemd. Daarentegen logde de browser een foutmelding op het niveau Error toen je op 'Cause 404' klikte, waarin stond dat de gevraagde bron niet kon worden gevonden. Dergelijke berichten worden browserberichten genoemd. Je kunt de zijbalk gebruiken om browserberichten te filteren en alleen gebruikersberichten weer te geven.

1. Klik op 9 gebruikersberichten . De browserberichten zijn verborgen.

   

2. Klik op 12 berichten om alle berichten weer te tonen.

Gebruik de console in combinatie met elk ander paneel.

Wat als je stijlen aan het bewerken bent, maar je snel even de consolelog wilt controleren? Gebruik dan het zijpaneel.

1. Klik op het tabblad Elementen .

2. Druk op Escape . Het tabblad Console van het zijmenu wordt geopend. Het bevat alle functies van de console die je gedurende deze handleiding hebt gebruikt.

   

Volgende stappen

Gefeliciteerd, je hebt de tutorial voltooid. Klik op 'Trofee uitdelen' om je trofee te ontvangen.

• Raadpleeg de Console-referentie voor meer informatie over functies en workflows met betrekking tot de Console- gebruikersinterface.
• Raadpleeg de API-referentie voor de console voor meer informatie over alle console die zijn gedemonstreerd in ' Berichten bekijken die vanuit JavaScript zijn gelogd' en ontdek de andere console die niet in deze handleiding aan bod zijn gekomen.
• Zie Aan de slag om te ontdekken wat je nog meer met DevTools kunt doen.
• Zie Berichten opmaken en stylen in de console voor meer informatie over alle opmaak- en stylingmethoden in de console .