Ready to go beyond console.log? The JavaScript console can do much more than just log... 

#JavaScript #100SecondsOfCode

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:22:33.734Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
e90e3fdb-9967-4f3e-8b6f-2e3d2e09635d
afeaa83225ea3b0d894e620d9b77a1719d7cd0e87824da28f9569a5412a6cb70
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Console.
It's the browser's built in debugger.
You may have heard of it before, but try running console log console.
It does a lot more than you may have realized.
In some cases, you only want to console log something if a condition is false.
In that case, you're probably looking for assert.
When the first argument is false, it logs the second argument as An error.
Another trick you'll often see people do is use console.
Log along with braces to provide labels for the things that they're logging.
That's cool and all, but change log Do table and you get a much prettier output.
As JS developers, we often like to abuse console.
And that can make things pretty messy.
Use console.
Group to group things together with a label.
Then collapse And, by default, to save space in the console.
Things can also get ugly if you're logging a bunch of objects.
Change log to dir and you get a much cleaner triangle drop down.
Do you ever find yourself manually incrementing a number in your console logs?
If so, you might be able to save your sanity by using console count.
It takes an optional label, and every time it's called, it will increment the count by 1.
On a similar note, you can also keep track of the amount of time between your console logs.
Calling time will start a timer, then time log will log the amount of time elapsed since that timer started.
Now, in JavaScript, we're often working in the context of deeply nested functions and objects.
When debugging, it may be necessary to traverse through the stack trace of your code.
Use console trace and the function you would expect to be at the top of the call stack.
And now we can see exactly what happened before this function was pushed onto the top of the call stack.
And, lastly, every good JS developer should give their console logs some flair.
Use percent c as the first character in a string, then pass in some CSS styling as your second argument.
And now the console is your canvas.
If you wanna see more short videos like this, make sure to hit the like button.
Thanks for watching, and I will see you in the next one.

Speaker 0: Console. It's the browser's built in debugger. You may have heard of it before, but try running console log console. It does a lot more than you may have realized. In some cases, you only want to console log something if a condition is false.

In that case, you're probably looking for assert. When the first argument is false, it logs the second argument as An error. Another trick you'll often see people do is use console. Log along with braces to provide labels for the things that they're logging. That's cool and all, but change log Do table and you get a much prettier output.

As JS developers, we often like to abuse console. And that can make things pretty messy. Use console. Group to group things together with a label. Then collapse And, by default, to save space in the console.

Things can also get ugly if you're logging a bunch of objects. Change log to dir and you get a much cleaner triangle drop down. Do you ever find yourself manually incrementing a number in your console logs? If so, you might be able to save your sanity by using console count. It takes an optional label, and every time it's called, it will increment the count by 1.

On a similar note, you can also keep track of the amount of time between your console logs. Calling time will start a timer, then time log will log the amount of time elapsed since that timer started. Now, in JavaScript, we're often working in the context of deeply nested functions and objects. When debugging, it may be necessary to traverse through the stack trace of your code. Use console trace and the function you would expect to be at the top of the call stack.

And now we can see exactly what happened before this function was pushed onto the top of the call stack. And, lastly, every good JS developer should give their console logs some flair. Use percent c as the first character in a string, then pass in some CSS styling as your second argument. And now the console is your canvas. If you wanna see more short videos like this, make sure to hit the like button.

Thanks for watching, and I will see you in the next one.
Console. It's the browser's built in debugger. You may have heard of it before, but try running console log console. It does a lot more than you may have realized. In some cases, you only want to console log something if a condition is false. In that case, you're probably looking for assert. When the first argument is false, it logs the second argument as An error.
Another trick you'll often see people do is use console. Log along with braces to provide labels for the things that they're logging. That's cool and all, but change log Do table and you get a much prettier output. As JS developers, we often like to abuse console. And that can make things pretty messy.
programming
Use console. Group to group things together with a label. Then collapse And, by default, to save space in the console. Things can also get ugly if you're logging a bunch of objects. Change log to dir and you get a much cleaner triangle drop down. Do you ever find yourself manually incrementing a number in your console logs? If so, you might be able to save your sanity by using console count. It takes an optional label, and every time it's called, it will increment the count by 1. On a similar note, you can also keep track of the amount of time between your console logs. Calling time will start a timer, then time log will log the amount of time elapsed since that timer started. Now, in JavaScript, we're often working in the context of deeply nested functions and objects. When debugging, it may be necessary to traverse through the stack trace of your code. Use console trace and the function you would expect to be at the top of the call stack. And now we can see exactly what happened before this function was pushed onto the top of the call stack. And, lastly, every good JS developer should give their console logs some flair. Use percent c as the first character in a string, then pass in some CSS styling as your second argument. And now the console is your canvas.
If you wanna see more short videos like this, make sure to hit the like button. Thanks for watching, and I will see you in the next one.
youtube
Console. It's the browser's built in debugger. You may have heard of it before, but try running console log console. It does a lot more than you may have realized. In some cases, you only want to console log something if a condition is false. In that case, you're probably looking for assert. When the first argument is false, it logs the second argument as An error. Another trick you'll often see people do is use console. Log along with braces to provide labels for the things that they're logging. That's cool and all, but change log Do table and you get a much prettier output. As JS developers, we often like to abuse console. And that can make things pretty messy. Use console. Group to group things together with a label. Then collapse And, by default, to save space in the console. Things can also get ugly if you're logging a bunch of objects. Change log to dir and you get a much cleaner triangle drop down. Do you ever find yourself manually incrementing a number in your console logs? If so, you might be able to save your sanity by using console count. It takes an optional label, and every time it's called, it will increment the count by 1. On a similar note, you can also keep track of the amount of time between your console logs. Calling time will start a timer, then time log will log the amount of time elapsed since that timer started. Now, in JavaScript, we're often working in the context of deeply nested functions and objects. When debugging, it may be necessary to traverse through the stack trace of your code. Use console trace and the function you would expect to be at the top of the call stack. And now we can see exactly what happened before this function was pushed onto the top of the call stack. And, lastly, every good JS developer should give their console logs some flair. Use percent c as the first character in a string, then pass in some CSS styling as your second argument. And now the console is your canvas. If you wanna see more short videos like this, make sure to hit the like button. Thanks for watching, and I will see you in the next one.
Console.
console
It's
it's
the
the
browser's
browser's
built
built
in
in
debugger.
debugger
You
you
may
may
have
have
heard
heard
of
of
it
it
before,
before
but
but
try
try
running
running
console
console
log
log
console.
console
It
it
does
does
a
a
lot
lot
more
more
than
than
you
you
may
may
have
have
realized.
realized
In
in
some
some
cases,
cases
you
you
only
only
want
want
to
to
console
console
log
log
something
something
if
if
a
a
condition
condition
is
is
false.
false
In
in
that
that
case,
case
you're
you're
probably
probably
looking
looking
for
for
assert.
assert
When
when
the
the
first
first
argument
argument
is
is
false,
false
it
it
logs
logs
the
the
second
second
argument
argument
as
as
An
an
error.
error
Another
another
trick
trick
you'll
you'll
often
often
see
see
people
people
do
do
is
is
use
use
console.
console
Log
log
along
along
with
with
braces
braces
to
to
provide
provide
labels
labels
for
for
the
the
things
things
that
that
they're
they're
logging.
logging
That's
that's
cool
cool
and
and
all,
all
but
but
change
change
log
log
Do
do
table
table
and
and
you
you
get
get
a
a
much
much
prettier
prettier
output.
output
As
as
JS
js
developers,
developers
we
we
often
often
like
like
to
to
abuse
abuse
console.
console
And
and
that
that
can
can
make
make
things
things
pretty
pretty
messy.
messy
Use
use
console.
console
Group
group
to
to
group
group
things
things
together
together
with
with
a
a
label.
label
Then
then
collapse
collapse
And,
and
by
by
default,
default
to
to
save
save
space
space
in
in
the
the
console.
console
Things
things
can
can
also
also
get
get
ugly
ugly
if
if
you're
you're
logging
logging
a
a
bunch
bunch
of
of
objects.
objects
Change
change
log
log
to
to
dir
dir
and
and
you
you
get
get
a
a
much
much
cleaner
cleaner
triangle
triangle
drop
drop
down.
down
Do
do
you
you
ever
ever
find
find
yourself
yourself
manually
manually
incrementing
incrementing
a
a
number
number
in
in
your
your
console
console
logs?
logs
If
if
so,
so
you
you
might
might
be
be
able
able
to
to
save
save
your
your
sanity
sanity
by
by
using
using
console
console
count.
count
It
it
takes
takes
an
an
optional
optional
label,
label
and
and
every
every
time
time
it's
it's
called,
called
it
it
will
will
increment
increment
the
the
count
count
by
by
1.
1
On
on
a
a
similar
similar
note,
note
you
you
can
can
also
also
keep
keep
track
track
of
of
the
the
amount
amount
of
of
time
time
between
between
your
your
console
console
logs.
logs
Calling
calling
time
time
will
will
start
start
a
a
timer,
timer
then
then
time
time
log
log
will
will
log
log
the
the
amount
amount
of
of
time
time
elapsed
elapsed
since
since
that
that
timer
timer
started.
started
Now,
now
in
in
JavaScript,
javascript
we're
we're
often
often
working
working
in
in
the
the
context
context
of
of
deeply
deeply
nested
nested
functions
functions
and
and
objects.
objects
When
when
debugging,
debugging
it
it
may
may
be
be
necessary
necessary
to
to
traverse
traverse
through
through
the
the
stack
stack
trace
trace
of
of
your
your
code.
code
Use
use
console
console
trace
trace
and
and
the
the
function
function
you
you
would
would
expect
expect
to
to
be
be
at
at
the
the
top
top
of
of
the
the
call
call
stack.
stack
And
and
now
now
we
we
can
can
see
see
exactly
exactly
what
what
happened
happened
before
before
this
this
function
function
was
was
pushed
pushed
onto
onto
the
the
top
top
of
of
the
the
call
call
stack.
stack
And,
and
lastly,
lastly
every
every
good
good
JS
js
developer
developer
should
should
give
give
their
their
console
console
logs
logs
some
some
flair.
flair
Use
use
percent
percent
c
c
as
as
the
the
first
first
character
character
in
in
a
a
string,
string
then
then
pass
pass
in
in
some
some
CSS
css
styling
styling
as
as
your
your
second
second
argument.
argument
And
and
now
now
the
the
console
console
is
is
your
your
canvas.
canvas
If
if
you
you
wanna
wanna
see
see
more
more
short
short
videos
videos
like
like
this,
this
make
make
sure
sure
to
to
hit
hit
the
the
like
like
button.
button
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker discusses the features of console logging, including logging conditions, responses, and output. They also suggest using console count and the console trace to save space and ensure proper logging. The speaker provides tips on how to log and suggests using console logs for short videos.
Beyond Console Log in 100 Seconds
Console. It's the browser's built in debugger. You may have heard of it before, but try running console log console. It does a lot more than you may have realized. In some cases, you only want to console log something if a condition is false. In that case, you're probably looking for assert. When the first argument is false, it logs the second argument as An error. Another trick you'll often see people do is use console. Log along with braces to provide labels for the things that they're logging. That's cool and all, but change log Do table and you get a much prettier output. As JS developers, we often like to abuse console. And that can make things pretty messy. Use console. Group to group things together with a label. Then collapse And, by default, to save space in the console. Things can also get ugly if you're logging a bunch of objects. Change log to dir and you get a much cleaner triangle drop down. Do you ever find yourself manually incrementing a number in your console logs? If so, you might be able to save your sanity by using console count. It takes an optional label, and every time it's called, it will increment the count by 1. On a similar note, you can also keep track of the amount of time between your console logs. Calling time will start a timer, then time log will log the amount of time elapsed since that timer started. Now, in JavaScript, we're often working in the context of deeply nested functions and objects. When debugging, it may be necessary to traverse through the stack trace of your code. Use console trace and the function you would expect to be at the top of the call stack. And now we can see exactly what happened before this function was pushed onto the top of the call stack. And, lastly, every good JS developer should give their console logs some flair. Use percent c as the first character in a string, then pass in some CSS styling as your second argument. And now the console is your canvas. If you wanna see more short videos like this, make sure to hit the like button. Thanks for watching, and I will see you in the next one.
The speaker discusses the features of console logging, including logging conditions, responses, and output. They also suggest using console count and the console trace to save space and ensure proper logging. The speaker provides tips on how to log and suggests using console logs for short videos.