console.log
at least once (or over a thousand times...who's counting?) because that's the best debugging method! But did you know there are other console
methods? Taylor Swift's most recent album folklore is chock full of pensive metaphors, allusions, and symbolism, and this post will liken some of those lyrics to five lesser-known JavaScript console
methods.console
is a global object letting developers access the debugging console. It has a plethora of methods that make it easier to log statements, variables, functions, errors, and more--oh my!console.log
is the most commonly-used method. Used for general purpose logging, it displays the message passed to it in the web console. Did you know you can decorate it with CSS?console.log("%cWARNING: you will be obsessed with folklore", "font: 2em sans-serif; color: yellow; background-color: red;");
table
method takes either an object or an array and logs that input as a table, making it look cleaner: it's like a nicer version of log
. Like a mirrorball, table
can show different versions of the input by accepting an optional parameter columns
to select a subset of columns to display.log
.function Album(name, year, numSongs) { this.name = name; this.year = year; this.numSongs = numSongs; } const fearless = new Album("Fearless", 2008, 13); const speakNow = new Album("Speak Now", 2010, 19); const folklore = new Album("folklore", 2020, 16); console.log([fearless, speakNow, folklore]);
table
when given an array looks nicer:console.table([fearless, speakNow, folklore]);
columns
parameter like console.table([fearless, speakNow, folklore], ["name"]);
would show:name
) year
or numSongs
--like mirrorball, table
can show you every version of its input!console.assert(expression, message)
only prints if the expression is false. Taylor Swift's lyric "If you never bleed, you're never gonna grow" from the song the 1 agrees--if you never bleed, or fail, or are incorrect sometimes, you will never grow. assert
shows that by being false, you can grow as a developer because you can fix your error that the console so kindly helps you with by making the assertion a nice red.const numFolkloreSongs = 16; const num1989Songs = 13; console.assert(numFolkloreSongs > num1989Songs, 'folklore has more songs than 1989'); //won't run console.assert(num1989Songs + 3 > numFolkloreSongs, 'the number of songs on 1989 + 3 is not greater than the number of folklore songs');
console.time()
creates a timer to see how long some operation takes. It can take an optional parameter of a name or label to distinguish between up to 10,000 timers on a web page.console.timeEnd()
stops the timer, displaying the result in the console.console.time('sms timer'); let x = 0; while (x < 3) { console.log("They told me all of my cages were mental/So I got wasted like all my potential"); x+=1; } console.timeEnd('sms timer');
console.time()
, it would log default instead of sms timer.console.clear
is short, sweet, and succinct. It clears the console and in some environments, may print a message like "Console was cleared".clear
, you can start over, start afresh.console.group
signifies the start of an inline message group and console.groupEnd
marks the end of it. If the group contains logs, they are printed as a group, so the format is cleaner and you can more easily tell what the group contains.console.group("folklore"); console.log("the 1"); console.log("cardigan"); console.log("the last great american dynasty"); console.log("invisible string"); console.log("my tears ricochet"); console.groupEnd(); console.log("outside");