JavaScript Console.log () voorbeeld-hoe af te drukken naar de Console in JS

het loggen van berichten naar de console is een zeer eenvoudige manier om kleine problemen in uw code te diagnosticeren en op te lossen.

maar wist u dat er meer is aan console dan alleen log? In dit artikel zal ik je laten zien hoe je naar de console in JS moet afdrukken, evenals alle dingen die je niet wist dat console kon doen.

Firefox multi-line Editor Console

Als u nog nooit de multi-line editor modus in Firefox hebt gebruikt, moet u het nu eens proberen!,

open gewoon de console, Ctrl+Shift+K of F12, en in de rechterbovenhoek ziet u een knop die zegt”Switch to multi-line editor mode”. U kunt ook op Ctrl+Bdrukken.

Dit geeft u een multi-line code editor direct in Firefox.

console.log

laten we beginnen met een zeer basic log voorbeeld.

let x = 1console.log(x)

Typ dat in de Firefox console en voer de code. U kunt op de knop “Uitvoeren” klikken of op Ctrl+Enterdrukken.

in dit voorbeeld zien we” 1 ” in de console., Vrij eenvoudig, toch?

meerdere waarden

wist u dat u meerdere waarden kunt opnemen? Voeg een tekenreeks toe aan het begin om eenvoudig te identificeren wat het is dat u inlogt.

let x = 1console.log("x:", x)

maar wat als we meerdere waarden hebben die we willen loggen?

let x = 1let y = 2let z = 3

in plaats van console.log() drie keer te typen kunnen we ze allemaal opnemen. En we kunnen een string voor elk van hen toe te voegen als we willen, ook.

let x = 1let y = 2let z = 3console.log("x:", x, "y:", y, "z:", z)

maar dat is te veel werk. Wikkel ze gewoon met krullende beugels!, Nu krijg je een object met de benoemde waarden.

let x = 1let y = 2let z = 3console.log( {x, y, z} )

u kunt hetzelfde doen met een object.

let user = { name: 'Jesse', contact: { email: '[email protected]' }}console.log(user)console.log({user})

de eerste log zal de eigenschappen binnen het gebruikersobject afdrukken. De tweede zal het object als “gebruiker” identificeren en de eigenschappen erin afdrukken.

als u veel dingen logt op de console, kan dit u helpen om elk logboek te identificeren.

variabelen binnen het log

wist u dat u delen van uw log als variabelen kunt gebruiken?,

console.log("%s is %d years old.", "John", 29)

in dit voorbeeld verwijst %s naar een stringoptie die is opgenomen na de beginwaarde. Dit zou verwijzen naar “John”.

de %d verwijst naar een cijferoptie die is opgenomen na de beginwaarde. Dit zou betrekking hebben op 29.

De uitvoer van dit statement zou zijn: “John is 29 jaar oud.”.

variaties van logs

Er zijn enkele variaties van logs. Er is de meest gebruikte console.log(). Maar er is ook:

deze variaties voegen styling toe aan onze logs in de console., Bijvoorbeeld, de warn zal geel gekleurd zijn, en de error zal rood gekleurd zijn.

opmerking: de stijlen variëren van browser tot browser.

optionele Logs

We kunnen berichten voorwaardelijk afdrukken naar de console met console.assert().

let isItWorking = falseconsole.assert(isItWorking, "this is the reason why")

als het eerste argument onwaar is, wordt het bericht gelogd.

als we isItWorking zouden veranderen in true, dan zal het bericht niet worden gelogd.

Counting

Wist u dat u kunt tellen met console?,

for(i=0; i<10; i++){ console.count()}

elke iteratie van deze lus zal een telling naar de console afdrukken. Je ziet “default: 1, default: 2”, enzovoort totdat het 10 bereikt.

Als u deze zelfde lus opnieuw uitvoert, zult u zien dat de telling verder gaat waar het gebleven was; 11 – 20.

om de teller te resetten kunnen we console.countReset()gebruiken.

en, als je de teller een naam wilt geven aan iets anders dan “standaard”, kun je dat!

for(i=0; i<10; i++){ console.count('Counter 1')}console.countReset('Counter 1')

nu we een label hebben toegevoegd, ziet u” Counter 1, Counter 2″, enzovoort.,

en om deze teller te resetten, moeten we de naam doorgeven aan countReset. Op deze manier kunt u meerdere tellers tegelijkertijd laten draaien en alleen specifieke tellers resetten.

Track Time

naast het tellen kunt u ook iets als een stopwatch Timen.

om een timer te starten kunnen we console.time()gebruiken. Dit zal op zichzelf niets doen. In dit voorbeeld zullen we setTimeout() gebruiken om draaiende code te emuleren. Dan, binnen de time-out, stoppen we onze timer met console.timeEnd().,

console.time()setTimeout(() => { console.timeEnd()}, 5000)

zoals je zou verwachten, hebben we na 5 seconden een timer einde log van 5 seconden.

we kunnen ook de huidige tijd van onze timer registreren terwijl deze draait, zonder deze te stoppen. We doen dit door gebruik te maken van console.timeLog().

console.time()setTimeout(() => { console.timeEnd()}, 5000)setTimeout(() => { console.timeLog()}, 2000)

in dit voorbeeld krijgen we eerst onze 2 seconden timeLog, dan onze 5 seconden timeEnd.

net als de teller, kunnen we timers labelen en meerdere draaien op hetzelfde moment.,

groepen

een ander ding dat u kunt doen met log is ze groeperen. ?

we starten een groep met console.group(). En we eindigen een groep met console.groupEnd().

deze groep logs zal inklapbaar zijn. Dit maakt het gemakkelijk om sets logs te identificeren.

standaard wordt de groep niet ingeklapt. U kunt het instellen op ingeklapt door console.groupCollapsed() te gebruiken in plaats van console.group().

Labels kunnen ook worden doorgegeven aan de group() om ze beter te identificeren.,

Stack Trace

u kunt ook een stack trace uitvoeren met console. Voeg het gewoon toe aan een functie.

function one() { two()}function two() { three()}function three() { console.trace()}one()

in dit voorbeeld hebben we zeer eenvoudige functies die elkaar gewoon aanroepen. In de laatste functie noemen we dan console.trace().

tabellen

Dit is een van de meest verbazingwekkende toepassingen voor console: console.table().,

dus laten we wat gegevens Instellen om te loggen:

let devices = 

nu zullen we deze gegevens loggen met console.table(devices).

maar wacht – het wordt beter!

als we alleen de merken willen, gewoon console.table(devices, )!

wat dacht je van een complexer voorbeeld? In dit voorbeeld gebruiken we jsonplaceholder.

hier drukken we alleen de “name” en “email”af., Als u console.log alle gegevens, zult u zien dat er veel meer eigenschappen voor elke gebruiker.

stijl ?

Wist u dat u CSS-eigenschappen kunt gebruiken om uw logs op te stylen?

om dit te doen, gebruiken we %c om aan te geven dat we stijlen moeten toevoegen. De stijlen worden doorgegeven aan het tweede argument van de log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

u kunt dit gebruiken om uw logs te laten opvallen.,

Clear

Als u probeert een probleem op te lossen met behulp van logs, kunt u veel verversen en uw console kan rommelig worden.

voeg gewoon console.clear() toe aan de bovenkant van uw code en u zult een nieuwe console hebben elke keer dat u vernieuwt. ?

voeg het gewoon niet toe aan de onderkant van je code, lol.

Bedankt voor het lezen!

Als u de concepten in dit artikel via video opnieuw wilt bekijken, kunt u deze video-Versie bekijken die ik hier gemaakt heb.,

Ik ben Jesse uit Texas. Bekijk mijn andere content en laat me weten hoe ik u kan helpen op uw reis naar het worden van een web developer.

• Abonneer je op mijn YouTube
• zeg hallo! Instagram / Twitter
• Meld u aan voor mijn nieuwsbrief