loggning av meddelanden till konsolen är ett mycket grundläggande sätt att diagnostisera och felsöka mindre problem i din kod.
men visste du att det finns mer att console än bara log? I den här artikeln visar jag hur du skriver ut till konsolen i JS, liksom alla saker du inte visste console kunde göra.
Firefox Multi-line Editor Console
om du aldrig har använt multi-line editor-läget i Firefox, bör du prova just nu!,
Öppna bara konsolen, Ctrl+Shift+K eller F12, och längst upp till höger ser du en knapp som säger”Växla till redigeringsläge för flera rader”. Alternativt kan du trycka på Ctrl+B.
detta ger dig en multi-line code editor precis inuti Firefox.
konsol.logga
låt oss börja med ett mycket grundläggande loggexempel.
let x = 1console.log(x)skriv in det i Firefox-konsolen och kör koden. Du kan klicka på” Kör ” – knappen eller trycka på Ctrl+Enter.
i det här exemplet bör vi se ”1” i konsolen., Ganska enkelt, eller hur?
flera värden
visste du att du kan inkludera flera värden? Lägg till en sträng i början för att enkelt identifiera vad det är du loggar.
let x = 1console.log("x:", x)men vad händer om vi har flera värden som vi vill logga?
let x = 1let y = 2let z = 3istället för att skriva console.log() tre gånger kan vi inkludera dem alla. Och vi kan lägga till en sträng före var och en av dem om vi ville också.
let x = 1let y = 2let z = 3console.log("x:", x, "y:", y, "z:", z)men det är för mycket arbete. Bara linda dem med lockiga hängslen!, Nu får du ett objekt med de angivna värdena.
let x = 1let y = 2let z = 3console.log( {x, y, z} )Du kan göra samma sak med ett objekt.
let user = { name: 'Jesse', contact: { email: '[email protected]' }}console.log(user)console.log({user})den första loggen skriver ut egenskaperna inom användarobjektet. Den andra identifierar objektet som ”användare” och skriver ut egenskaperna inom den.
om du loggar många saker till konsolen kan det hjälpa dig att identifiera varje logg.
variabler i loggen
visste du att du kan använda delar av loggen som variabler?,
console.log("%s is %d years old.", "John", 29)i det här exemplet hänvisar %s till ett strängalternativ som ingår efter det ursprungliga värdet. Detta skulle hänvisa till ”John”.
%d avser ett sifferalternativ som ingår efter det ursprungliga värdet. Detta skulle hänvisa till 29.
resultatet av detta uttalande skulle vara: ”John är 29 år gammal.”.
varianter av loggar
det finns några varianter av loggar. Det finns den mest använda console.log(). Men det finns också:
dessa variationer lägger styling till våra loggar i konsolen., Till exempel kommer warn att färgas gul, och error kommer att färgas röd.
Obs! stilar varierar från webbläsare till webbläsare.
valfria loggar
Vi kan skriva ut meddelanden till konsolen villkorligt medconsole.assert().
let isItWorking = falseconsole.assert(isItWorking, "this is the reason why")om det första argumentet är falskt loggas meddelandet.
om vi skulle ändraisItWorking tilltrue loggas inte meddelandet.
räkna
visste du att du kan räkna med console?,
for(i=0; i<10; i++){ console.count()}varje iteration av denna slinga kommer att skriva ut en räkning till konsolen. Du kommer att se ”default: 1, default: 2”, och så vidare tills den når 10.
om du kör samma slinga igen ser du att räkningen plockar upp där den slutade; 11 – 20.
för att återställa räknaren kan vi användaconsole.countReset().
och om du vill namnge disken till något annat än ”standard” kan du!
for(i=0; i<10; i++){ console.count('Counter 1')}console.countReset('Counter 1')Nu när vi har lagt till en etikett ser du ”Counter 1, Counter 2” och så vidare.,
och för att återställa denna räknare måste vi skicka namnet till countReset. På så sätt kan du ha flera räknare som körs samtidigt och bara återställa specifika.
spårtid
förutom att räkna, kan du också tid något som ett stoppur.
för att starta en timer kan vi använda console.time(). Detta kommer inte att göra någonting av sig själv. Så i det här exemplet använder vi setTimeout() för att emulera kod som körs. Sedan, inom timeout, kommer vi att stoppa vår timer med console.timeEnd().,
console.time()setTimeout(() => { console.timeEnd()}, 5000)som du förväntar dig kommer vi efter 5 sekunder att ha en timerslutlogg på 5 sekunder.
Vi kan också logga den aktuella tiden för vår timer medan den är igång, utan att stoppa den. Vi gör detta genom att använda console.timeLog().
console.time()setTimeout(() => { console.timeEnd()}, 5000)setTimeout(() => { console.timeLog()}, 2000)i det här exemplet får vi vår 2 andra timeLog först, sedan vår 5 andra timeEnd.
precis som räknaren kan vi märka timers och ha flera kör samtidigt.,
grupper
en annan sak som du kan göra medlog är gruppera dem. ?
vi startar en grupp genom att använda console.group(). Och vi avslutar en grupp med console.groupEnd().
denna grupp av loggar kommer att vara hopfällbar. Detta gör det enkelt att identifiera uppsättningar av stockar.
som standard kollapsas inte gruppen. Du kan ställa in att den kollapsade genom att använda console.groupCollapsed() I stället för console.group().
etiketter kan också skickas in igroup() för att bättre identifiera dem.,
Stack Trace
Du kan också göra en stack trace medconsole. Lägg bara till den i en funktion.
function one() { two()}function two() { three()}function three() { console.trace()}one() i det här exemplet har vi mycket enkla funktioner som bara kallar varandra. Sedan, i den sista funktionen, kallar vi console.trace().
tabeller
Här är en av de mest mind-blowing användningsområden för konsolen:console.table().,
så låt oss ställa in några data för att logga:
let devices = nu loggar vi dessa data medconsole.table(devices).
men vänta – det blir bättre!
om vi bara vill ha varumärkena, bara console.table(devices, )!
vad sägs om ett mer komplext exempel? I det här exemplet använder vi jsonplaceholder.
Här skriver vi bara ut ”namn” och ”e-post”., Om du console.log Alla data ser du att det finns många fler egenskaper för varje användare.
stil ?
visste du att du kan använda CSS-egenskaper för att formatera dina loggar?
för att göra detta använder vi %c för att ange att vi har stilar att lägga till. Stilarna skickas in i det andra argumentet för log.
console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")Du kan använda detta för att få dina loggar att sticka ut.,
rensa
om du försöker felsöka ett problem med hjälp av loggar kan du uppdatera mycket och konsolen kan bli rörig.
lägg bara till console.clear() till toppen av din kod och du får en ny konsol varje gång du uppdaterar. ?
lägg bara inte till den i botten av din kod, lol.
Tack för att du läste!
om du vill se över begreppen i den här artikeln via video kan du kolla in den här videoversionen jag gjorde här.,
Jag är Jesse från Texas. Kolla in mitt andra innehåll och låt mig veta hur jag kan hjälpa dig på din resa till att bli en webbutvecklare.
- prenumerera på min YouTube
- Säg hej! Instagram / Twitter
- registrera dig för mitt nyhetsbrev