logning af meddelelser til konsollen er en meget grundlæggende måde at diagnosticere og fejlfinde mindre problemer i din kode.
Men vidste du, at der er mere til console end blot log? I denne artikel viser jeg dig, hvordan du udskriver til konsollen i JS, samt alle de ting, du ikke vidste console kunne gøre.
Firefox Multi-line Editor-Konsol
Hvis du aldrig har brugt multi-line editor-funktion i Firefox, skal du give det en chance lige nu!,
bare åbn konsollen, Ctrl+Shift+K eller F12, og øverst til højre ser du en knap, der siger “Skift til multi-line editor mode”. Alternativt kan du trykke på Ctrl+B.
Dette giver dig en multi-line kode editor lige inde i Firefox.
konsol.log
lad os starte med et meget grundlæggende logeksempel.
let x = 1console.log(x)skriv det i Firefo. – konsollen, og kør koden. Du kan klikke på knappen “Kør”eller trykke på Ctrl+Enter.
i dette eksempel skal vi se “1” i konsollen., Ret ligetil, ikke?
flere værdier
vidste du, at du kan inkludere flere værdier? Tilføj en streng til begyndelsen for nemt at identificere, hvad det er, du logger.
let x = 1console.log("x:", x)men hvad nu hvis vi har flere værdier, som vi vil logge?
let x = 1let y = 2let z = 3i stedet for at skrive console.log() tre gange kan vi inkludere dem alle. Og vi kan tilføje en streng før hver af dem, hvis vi også ville.
let x = 1let y = 2let z = 3console.log("x:", x, "y:", y, "z:", z)men det er for meget arbejde. Bare pakk dem med krøllede seler!, Nu får du et objekt med de navngivne værdier.
let x = 1let y = 2let z = 3console.log( {x, y, z} )Du kan gøre det samme med et objekt.
let user = { name: 'Jesse', contact: { email: '[email protected]' }}console.log(user)console.log({user})den første log vil udskrive egenskaberne i brugerobjektet. Den anden identificerer objektet som “bruger” og udskriver egenskaberne i det.
Hvis du logger mange ting til konsollen, kan dette hjælpe dig med at identificere hver log.
variabler i loggen
vidste du, at du kan bruge dele af din log som variabler?,
console.log("%s is %d years old.", "John", 29)i dette eksempel henviser %s til en strengindstilling inkluderet efter den oprindelige værdi. Dette ville henvise til “John”.
%d henviser til en cifferindstilling inkluderet efter den oprindelige værdi. Dette vil henvise til 29.
udgangen af denne erklæring ville være: “John er 29 år gammel.”.
variationer af logfiler
Der er et par variationer af logfiler. Der er den mest anvendte console.log(). Men der er også:
disse variationer tilføjer styling til vores logfiler i konsollen., For eksempel vil warn være farvet gul, og error vil være farvet rødt.
Bemærk: typografierne varierer fra bro .ser til bro .ser.
Valgfri Logs
Vi kan udskrive meddelelser til konsollen betinget med console.assert().
let isItWorking = falseconsole.assert(isItWorking, "this is the reason why")Hvis det første argument er falsk, logges meddelelsen.
Hvis vi skulle ændre isItWorking til true, bliver meddelelsen ikke logget.
tæller
vidste du, at du kan tælle med konsol?,
for(i=0; i<10; i++){ console.count()}hver iteration af denne sløjfe udskriver et antal til konsollen. Du vil se “standard: 1, Standard: 2”, og så videre, indtil den når 10.
Hvis du kører den samme sløjfe igen, vil du se, at tællingen samler op, hvor den slap; 11 – 20.
for at nulstille tælleren kan vi bruge console.countReset().
og hvis du vil navngive tælleren til noget andet end “standard”, kan du!
for(i=0; i<10; i++){ console.count('Counter 1')}console.countReset('Counter 1')nu hvor vi har tilføjet en etiket, vil du se “Counter 1, Counter 2” og så videre.,
og for at nulstille denne tæller skal vi overføre navnet til countReset. På denne måde kan du have flere tællere kørende på samme tid og kun nulstille bestemte.
Spor tid
udover at tælle, kan du også tid noget som et stopur.
for at starte en timer kan vi bruge console.time(). Dette vil ikke gøre noget af sig selv. Så i dette eksempel bruger vi setTimeout() til at efterligne kode, der kører. Derefter stopper vi vores timer inden for timeout ved hjælp af console.timeEnd().,
console.time()setTimeout(() => { console.timeEnd()}, 5000)som du ville forvente, vil vi efter 5 sekunder have en timerslog på 5 sekunder.
Vi kan også logge den aktuelle tid for vores timer, mens den kører, uden at stoppe den. Vi gør dette ved at bruge console.timeLog().
console.time()setTimeout(() => { console.timeEnd()}, 5000)setTimeout(() => { console.timeLog()}, 2000)i dette eksempel får vi vores 2 sekund timeLogførst, derefter vores 5 sekund timeEnd.
bare det samme som tælleren, kan vi mærke timere og har flere kører på samme tid.,
Grupper
en Anden ting, du kan gøre med log er gruppere dem. ?
Vi starter en gruppe ved at bruge console.group(). Og vi slutter en gruppe med console.groupEnd().
denne gruppe af logfiler vil være sammenklappelig. Dette gør det nemt at identificere sæt logfiler.
som standard er gruppen ikke sammenbrudt. Du kan indstille den til at kollapse ved at bruge console.groupCollapsed() i stedet for console.group().
etiketter kan også overføres tilgroup() for bedre at identificere dem.,
Stack Trace
Du kan også lave en stack trace med console. Bare tilføj det til en funktion.
function one() { two()}function two() { three()}function three() { console.trace()}one() i dette eksempel har vi meget enkle funktioner, der bare kalder hinanden. Derefter kalder vi i den sidste funktion console.trace().
Tabeller
Her er en af de mest mind-blowing bruger til konsollen: console.table().,
så lad os oprette nogle data til at logge:
let devices = nu logger vi disse data ved hjælp af console.table(devices).
Men vent – det bliver bedre!
Hvis vi kun vil have mærkerne, bare console.table(devices, )!
hvad med et mere komplekst eksempel? I dette eksempel bruger vi jsonplaceholder.
Her udskriver vi bare “navn” og “email”., Hvis du console.log alle dataene, vil du se, at der er mange flere egenskaber for hver bruger.
stil ?
vidste du, at du kan bruge CSS-egenskaber til at style dine logfiler?
for at gøre dette bruger vi %c for at specificere, at vi har stilarter, der skal tilføjes. Stilarterne bliver overført til det andet argument af log.
console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")Du kan bruge dette til at få dine logfiler til at skille sig ud.,
Ryd
Hvis du forsøger at fejlfinde et problem ved hjælp af logfiler, kan du muligvis opdatere meget, og din konsol kan blive rodet.tilføj console.clear() til toppen af din kode, så får du en ny konsol, hver gang du opdaterer. ?
bare ikke tilføje det til bunden af din kode, lol.
tak for læsning!
Hvis du vil gense koncepterne i denne artikel via video, kan du tjekke denne video-version jeg lavede her.,
jeg er Jesse fra Texas. Tjek mit andet indhold, og lad mig vide, hvordan jeg kan hjælpe dig på din rejse til at blive webebudvikler.
- Abonner på min YouTube
- Sig Hej! Instagram/t Signitter
- Tilmeld dig mit nyhedsbrev