Log berichten in de console

Kayce Basques

Deze interactieve tutorial laat zien hoe u berichten logt en filtert in de Chrome DevTools Console.

Het is de bedoeling dat deze tutorial in volgorde wordt voltooid. Er wordt van uitgegaan dat u de grondbeginselen van webontwikkeling begrijpt, zoals hoe u JavaScript kunt gebruiken om interactiviteit aan een pagina toe te voegen.

Stel de demo en DevTools in

Deze tutorial is zo ontworpen dat u de demo kunt openen en alle workflows zelf kunt uitproberen. Wanneer u fysiek meevolgt, 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 bevindt de tutorial zich 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: Dock DevTools aan de onderkant van het venster of koppel het los in een apart venster .

   DevTools vastgezet aan de onderkant van de demo:

   DevTools losgekoppeld in een apart venster:

Bekijk berichten die zijn vastgelegd vanuit JavaScript

De meeste berichten die u in de console ziet, zijn afkomstig van de webontwikkelaars die het JavaScript voor de pagina hebben geschreven. Het doel van deze sectie is om u kennis te laten maken met de verschillende berichttypen die u waarschijnlijk in de console zult tegenkomen, en uit te leggen hoe u elk berichttype zelf kunt loggen vanuit uw eigen JavaScript.

1. Klik op de knop Loginfo in de demo. Hello, Console! wordt aangemeld bij de console.

   

2. Naast de Hello, Console! bericht in de Console klikt u op log.js:2 . Het Bronnenpaneel wordt geopend en markeert de coderegel die ervoor zorgde dat het bericht in de console werd geregistreerd.

   

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

3. Navigeer 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 scherpgesteld is.
   • Open het Commandomenu , begin Console te typen, selecteer de opdracht Consolepaneel weergeven en druk vervolgens op Enter .

4. Klik op de knop Logwaarschuwing in de demo. Abandon Hope All Ye Who Enter wordt ingelogd op de console.

   

   Berichten die op deze manier zijn opgemaakt, zijn waarschuwingen.

5. Optioneel: klik op log.js:12 om de code te bekijken die ervoor heeft gezorgd dat het bericht op deze manier is opgemaakt en navigeer vervolgens terug naar Console als u klaar bent. Doe dit wanneer u de code wilt zien die ervoor zorgde dat een bericht op een bepaalde manier werd geregistreerd.

6. Klik op Uitvouwen pictogram voor Abandon Hope All Ye Who Enter . DevTools toont de stacktrace die naar de oproep leidt.

   

   De stacktrace vertelt u dat een functie met de naam logWarning is aangeroepen, die op zijn beurt een functie met de naam quoteDante heeft aangeroepen. Met andere woorden: de oproep die het eerst plaatsvond, bevindt zich onderaan de stacktrace. U kunt op elk gewenst moment stacktraces vastleggen door console.trace() aan te roepen.

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

   

8. Klik op Logtabel . Een tabel over beroemde artiesten wordt in de console geregistreerd.

   

   Merk op dat de birthday slechts voor één rij wordt ingevuld. Controleer de code om erachter te komen waarom dat zo is.

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

   

10. Klik op Aangepast loggen . Een bericht met een rode rand en blauwe achtergrond wordt in de console geregistreerd.

    

Het belangrijkste idee hier is dat wanneer u vanuit JavaScript berichten naar de console wilt loggen, u een van de console gebruikt. Elke methode formatteert berichten anders.

Er zijn zelfs meer methoden dan wat in deze sectie is gedemonstreerd. Aan het einde van de tutorial leert u hoe u de rest van de methoden kunt verkennen.

Bekijk berichten die door de browser zijn geregistreerd

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

1. Klik op Oorzaak 404 . De browser registreert een 404 netwerkfout omdat het JavaScript van de pagina heeft geprobeerd een bestand op te halen dat niet bestaat.

   

2. Klik op Oorzaak fout . De browser registreert een niet-afgevangen TypeError omdat JavaScript probeert een DOM-knooppunt bij te werken dat niet bestaat.

   

3. Klik op de vervolgkeuzelijst Logniveaus en schakel de uitgebreide optie in als deze is uitgeschakeld. In het volgende gedeelte leert u meer over filteren. U moet dit doen om er zeker van te zijn dat het volgende bericht dat u logt, zichtbaar is. Opmerking: als de vervolgkeuzelijst Standaardniveaus is uitgeschakeld, moet u mogelijk de consolezijbalk sluiten. Filter hieronder op berichtbron voor meer informatie over de consolezijbalk.

   

4. Klik op Oorzaak overtreding . De pagina reageert een paar seconden niet meer en vervolgens registreert de browser het bericht [Violation] 'click' handler took 3000ms naar de console te gaan. De exacte duur kan variëren.

   

Filter berichten

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

Filter op logniveau

Aan elke console.* methode wordt een ernstniveau toegewezen: Verbose , Info , Warning of Error . console.log() is bijvoorbeeld een bericht op Info , terwijl console.error() een bericht op Error is.

Filteren op logniveau:

1. Klik op de vervolgkeuzelijst Logniveaus en schakel Fouten uit. Een niveau is uitgeschakeld als er niet langer een vinkje naast staat. De foutmeldingen op Error verdwijnen.

   

2. Klik nogmaals op de vervolgkeuzelijst Logniveaus en schakel Fouten opnieuw in. De berichten op Error verschijnen opnieuw.

Filter op tekst

Als u alleen berichten wilt bekijken die een exacte tekenreeks bevatten, typt u die tekenreeks in het tekstvak Filter .

1. Typ Dave in het tekstvak Filter . Alle berichten die de string Dave niet bevatten, zijn verborgen. Mogelijk ziet u ook het label Adolescent Irradiated Espionage Tortoises . Dat is een bug.

   

2. Verwijder Dave uit het tekstvak Filter . Alle berichten verschijnen opnieuw.

Filter op reguliere expressie

Als u alle berichten wilt weergeven die een tekstpatroon bevatten, in plaats van een specifieke tekenreeks, gebruikt u een reguliere expressie .

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

   

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

Filter op berichtbron

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

1. Klik op Consolezijbalk weergeven .

   

2. Klik op Uitvouwen pictogram naast 12 Berichten . De zijbalk toont een lijst met URL's die ervoor hebben gezorgd dat berichten zijn geregistreerd. log.js veroorzaakte bijvoorbeeld 11 berichten.

   

Filter op gebruikersberichten

Als u eerder op Log Info klikte, werd er een script met de naam console.log('Hello, Console!') om het bericht in de console te loggen. Berichten die op deze manier vanuit JavaScript worden vastgelegd, worden gebruikersberichten genoemd. Wanneer u daarentegen op Oorzaak 404 klikte, registreerde de browser een bericht op Error waarin stond dat de gevraagde bron niet kon worden gevonden. Dergelijke berichten worden beschouwd als browserberichten . U 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 opnieuw weer te geven.

Gebruik de console naast elk ander paneel

Wat als u stijlen aan het bewerken bent, maar u snel het Console- logboek op iets moet controleren? Gebruik de lade.

1. Klik op het tabblad Elementen .

2. Druk op Ontsnappen . Het tabblad Console van de lade wordt geopend. Het beschikt over alle functies van de console die u in deze zelfstudie hebt gebruikt.

   

Volgende stappen

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

• Zie Consolereferentie voor meer functies en workflows gerelateerd aan de console- gebruikersinterface.
• Zie Console API Reference voor meer informatie over alle console die zijn gedemonstreerd in Berichten bekijken die zijn vastgelegd vanuit JavaScript en de andere console verkennen die niet in deze zelfstudie zijn behandeld.
• Zie Aan de slag om te ontdekken wat u nog meer kunt doen met DevTools.
• Zie Opmaak- en stijlberichten in de console voor meer informatie over alle console indelingen en stijlmethoden.