►
From YouTube: Making the most out of Chrome Dev Tools - Simon Stewart
Description
It’s a set of tooling that’s just for us developers and it’s been baked into Chrome for years without any non-techies even knowing or caring about it.
This technical talk will show you how to make the most out of Chrome Dev Tools through a dozen or so demos covering everything from profiling to debugging to styling with a few console.logs throw in for good measure. No alerts though!
This talk was recorded at the Jozi.JS meetup group on 16 August 2018.
https://www.meetup.com/Jozi-JS/events/252392124/
Disclaimer: The opinions in this talk are those of the individual and do not necessarily represent those of this channel, the meetup group, or it’s sponsors.
A
All
right
so,
like
Mike
said,
my
name
is
Simon
Stewart
and
I'm
going
to
talk
about
chrome,
dev
tools.
So
the
intention
is
not
to
pretend
to
be
an
expert
which
is
normally
what
you
do
when
you,
when
you
give
a
talk,
I'm
really
just
here
to
kind
of
throw
a
whole
bunch
of
things
that
I've
seen
that
I
think
are
pretty
useful.
A
A
Just
in
case
you
leave
kind
of
halfway
through
the
information
slide.
I'll
show
you
at
the
end,
chrome,
dev
tools.
It's
got
a
really
good
Twitter
account,
as
I
really
recommend
just
kind
of
keeping
an
eye
on
it.
You
don't
have
to
do
it
every
day,
but
just
going
to
keep
an
eye
on
what's
happening
and
Clarice
did
a
really
good
article
for
Arthas
in
at
one.
So
definitely
have
a
look
at
that.
There's
also
a
whole
bunch
of
stuff.
A
A
The
only
thing
I'm
gonna
ask
because
I
know
how
much
we
like
to
interact
as
as
developers,
it's
just
kind
of
put
your
hand
up
if
it's
something
that
you
haven't
seen
before
you
don't
have
to
like,
be
too
enthusiastic,
just
to
kind
of
give
me
an
idea
whether
I
missed
the
mark
or
not.
Quite
mr.
mark,
okay.
So
the
first
one
just
like
completely
out
of
context
but
I'm
just
kind
of
showed
anyway,
because
it
was
quite
cool,
is.
B
A
So
that's
the
one.
The
next
one
is
they've
unified.
The
way
you
can
do
searching
so
they're
actually
two
ways
to
do
it.
The
one
is
control,
come
home
should
come
on
P
and
so
on,
a
Mac
which
brings
up
that
one
and
the
other
one.
It's
just
come
on
P,
but
actually
the
same
thing,
because
there
once
it's
got
a
chevron
in
front
of
it.
So
this
is
a
nice
way
to
get
into
a
whole
bunch
of
the
different
bits
of
functionality
inside
a
chrome,
dev
tools.
A
A
Okay,
the
next
one
is,
let's
get
rid
of
dev
tools,
so
obviously
you
can
click
in
the
top
left
corner
to
to
refresh
that's
not
new
to
anyone
else.
But
this
dev
tools
is
open.
You
can
double
finger.
Click
I,
don't
know
what
it
is
on
a
Windows
machine
for
guys
right
click,
that's
what
I
meant
and
it
brings
up
a
couple
of
options.
So,
instead
of
having
to
remember
how
to
do
a
hard
refresh
or
anything,
you
can
do
it.
A
A
B
A
I'm
also
color
blind
as
well,
so
that's
just
to
kind
of
add
insult
to
injury
so
anyway,
but
that's
not
really
the
actual
thing
I
wanted
to
show
you,
okay,
so
that
what
you
can
do
really
really
simply
now
is
without
having
to
use
an
external
back
extensions.
Is
you
can
do
screenshots,
so
you
can
do
a
full-screen
screenshot
to
resume
right
down
to
the
bottom.
There's
the
thing
that
says
below
the
fold.
A
So,
if
I
do
a
capture
full
size,
screenshot
and
I
open,
it
then
can
see
you
at
the
bottom,
which
is
pretty
useful.
So
occasionally
you
want
a
demo
like
the
full
glory
of
what
you've
done
and
you
don't
it
just
kind
of
do
it
manually
or
zoom
all
the
way
out
which
I
tend
to
do
so
now.
You
can
do
it
in
a
much
better
way.
A
B
A
Anyway,
that
that
is
pretty
useful.
The
next
thing
you
can
do,
obviously
it
is
or
not,
obviously,
because
a
whole
bunch
of
these
things,
I
haven't
known
like
for
a
whole
lot
of
time,
is
you
can
search
for
a
file?
So
this
is
the
file
within
the
context
of
your
site,
so
I
just
have
an
external
script
called
full
utilities
jeaious.
So
you
can.
You
can
search
for
that
which
is
pretty
useful
and
you
can
obviously
kind
of
view
it.
A
A
Okay,
so
I've
just
got
a
for
those
not
familiar
with
that
angular.
It
doesn't
really
matter.
I
just
want
to
read
reload
that
so
this
is
the
kind
of
mimic
minified
file,
so
I'm
really
minify
they're,
just
black
took
little
hand
breaks
out,
but
for
all
intents
and
purposes
it's
meant
to
find
enough.
So
if
I
find
the
same
file,
I
can
see
it
there,
but
obviously
it's
it's
not
as
readable,
so
in
the
bottom
left
corner
little
curly
braces
is
a
way
to
pretty
fine.
So
this
is
not
getting
the
original.
A
So
if
I
click
on
that
left
cool
button,
the
rendered
joannec
is
also
called
callback
and
as
a
as
a
class,
you
can
come
on
click
on
the
actual
CSS
and
it
will
take
you
to
their
part
of
the
CSS
file,
which
is
pretty
useful
because
occasionally
you
want
to
actually
go
and
find
the
place
in
the
file
and
actually
kind
of
figure
out.
What's
going
on.
A
So
these
guys
iam
at
like
really
difficult
look
at
it
when
it's
so
small
and
what
you
most
probably
know
about
is
the
ability
to
add
effect
to
the
inline
styles,
except
in
dev
tools.
So
you
can
start
kind
of
experimenting
with
stuff.
The
other
thing
that
you
can
do
is
to
actually
add
an
entirely
funny
new
CSS
property.
A
So
if
you
wanted
to
actually
of
adding
your
property
and
go
and
do
some
stuff
instead
of
just
putting
it
as
an
inline
thing,
you
can
just
take
that
first
backing
and
it
will
look
at
the
the
element
that
you're
on
and
try
and
infer
what
what
that
Jeff
selector
should
be.
So,
in
this
case
it's
a
button
and
it's
a
it's
got
the
call
button
class.
So
it
tries
to
kind
of
make
make
a
guess
about
that
which
is
pretty
usable.
A
So
if
you
wanted
to
figure
out
what
the
hover
state
would
be
instead
of
trying
to
hover
and
then
move
your
mouse
really
quickly,
I
think
you're
gonna.
You
got
a
trick
crying
which
I'm
sure
we've
all
done
it.
You
know
what
you
can
do
is
you
can
you
can
go
on
top
of
the
state
of
that
element
which
is
pretty
useful,
so
you
can
top
of
the
state
and
if
you've
got
specific
things
that
are
going
to
apply
to
that
element
in
that
state.
A
A
All
right,
so
the
next
thing,
which
I'm
sure
we've
all
done
and
I
tend
to
do
it
like
more
than
I
I've
cared
to
admit,
is
I'm
just
going
to
refresh
just
to
kind
of
give
back
to
a
nine
state.
Is
you
go
make
a
whole
bunch
of
changes
in
in
CSS
in
dev
tools
and
then
you
refresh
or
something
happens,
and
you
lose
all
those
changes,
and
you
can't
remember
what
you
type
right
at
the
time
that
I
wasted
is
unbelievable.
So
for
those
that
don't
know
what
I
meant.
A
So,
if
you
go
and
change
the
background
to
red
and
then
you
refresh,
obviously
it's
lost
all
those
things
because
there's
no,
it
doesn't
understand
what
there's
no
state
because
you're
not
actually
modifying
the
file
he's
just
modifying
the
state.
So
one
of
the
cool
things
that
you
can
do,
which
in
two
demos
time
will
be
the
pinnacle
of
my
of
my
talk.
You'll
see.
Why
is
what
you
can
do?
Is
you
can
actually
add
an
override
folder.
A
A
And
now
what
you
can
do
is
you
can
actually
go
and
I
can
go
into
the
same
demo.
So
if
I
click
on
that
and
I
change
this
to,
let's
just
change
it
to
blue
something
cool
like
that
and
and
I'll
do
a
refresh.
It
actually
keeps
the
state
which
is
pretty
useful.
So
what
it's
doing-
and
it's
so
similar
to
Chrome-
has
have
this
idea
of
folders
or
workspaces
for
a
long
time
which
I've
never
used,
because
I
thought
it
was
a
bit
of
a
hack.
Maybe
that
was
just
me.
A
This
is
pretty
much
the
same
thing
except
you're
kind
of
doing
it
on
a
like
a
diff
level.
So
doesn't
you
don't
take
all
your
source
code
and
put
it
somewhere
separate
it
just
kind
of
stores,
those
dos
which
is
pretty
useful?
So
if
you
want
to
go
make
those
changes,
you
can
then
make
the
changes.
You
can
refresh
you're
not
going
to
lose
anything
and
then
at
the
bottom,
which
is
called
the
drawers.
A
You
can
actually
get
it.
If
you
can't
really
see
it
very
well
and
you
zoom
in
you
can
actually
get
a
diff
from.
What's
been
added
to
the
original
and
you
can
actually
figure
out,
and
hopefully
from
that
point
you
can
then
merge
it
back
into
your
code,
but
we'll
see
the
other
thing
that
you
can
do,
which
is
pretty
useful.
Is
you
can
actually
do
the
same
thing.
B
A
Hits
the
issue
of
tools
is
it
it
does
so
much
stuff?
You
actually
got
to
trying
to
remember
where
the
thing
is
or
what
filter
you're
applying.
So,
if
I
open
up
an
image
in
in
the
sources
view,
so
you
can
see
the
image.
There's
nothing
really
to
see
there,
but
using
these
local
overrides,
you
can
actually
go
an
overwrite,
an
image.
So
let's
go
and
pick
a
random
image
for
my
with
my
hard
drive.
What
could
go
wrong.
A
Maybe
that
all
backfire,
but
what's
pretty
cool,
is
you
can
actually
go
and
modify
a
whole
bunch
of
images.
You
can
don't
drag
your
new
version
em
and
you
can
test
how
the
rendering
works
in
in
the
site
and
then
obviously,
if
you
actually
want
to
commit
those
changes,
you
can
go
and
go
and
do
the
diff
and
then
you
can
actually
go
and
make
whatever
change
you
want.
So
it's
not
going
to
do
the
diff
on
the
binary
data,
but
that's
what
I
was
pretty
cool,
so
that
was
that
let's
have
a
look.
A
Okay,
so
that's
image
overriding
the
other
thing
that
you
can
do,
which
I
can't
really
see
a
use
case.
For
that
I
mean
it
might
be
useful
if
you're
like
waiting
to
do
like
some
major
demo
and
you
needed
a
whole
bunch
of
changes
them
is,
you
can
set
design
mode
on
the
entire
document,
which
means
you
can
go
in
and
actually
gonna
make
come
in
line
changes
which
is
quite
useful.
Those
ones
are
not
going
to
be
committed
from
there's
these
override
styles.
A
A
There
was
somebody
else:
do
you
actually
I
think
it
was
actually
the
sources
so
in
the
sources
you
have
to
go
and
open
up
that
HTML
file
make
the
changes,
and
then
it
stalls
the
diff
and
then,
when
the
browser
renders
its
gonna
figure
out
how
to
actually
merge
those
two
together
darling
is
pretty
cool
and
then
you
can
done
in
able
the
local
and
overrides
and
then
that
image
doesn't
exist.
Okay,
so
that's
just
a
couple
of
things
that
you
can
do
using
the
elements.
A
A
A
So
one
of
the
ways
that
you
can
do
it,
and
obviously
you
can
use
a
third-party
component
to
do
that,
but
there's
a
script
that
the
grammys
shot
put
together,
I'm
just
putting
useful
so
I'm
just
going
to
run
that
so
presuming
that
that's
run
as
part
of
your
kind
of
bootstrapping
of
your
application-
and
this
is
clear,
the
logs
and
if
I
do
it.
Click
now
looks
a
whole
bunch
messier
than
it
than
it
was
before,
and
you
can
obviously
clean
it
up.
A
But
the
benefit
is
you
actually
get
the
the
function
and
the
whole
kind
of
stack
trace
of
where
you
work,
which
is
pretty
useful.
So
that
might
be
something
you
want
to
switch
on
and
off,
but
it's
definitely
something
that
I'm
getting
some
some
use
on
it,
which
is
cool
the
next
one,
which
is
one
of
these
things
that
I
think's
been
there
forever,
but
I
never
knew
about.
A
It
is
styling
your
console
lock,
which
is
pretty
useful,
so
you
can
actually
do
like
a
whole
Manchester,
but
one
of
the
things
that
I'm
using
it
for
with
one
of
our
clients
is
to
actually
allow
them
to
kind
of
decorate.
The
console
logs
depending
on
the
severity
there's
other
ways
to
do
it,
but
it
was
just
a
easy
way
to
actually
get
that
that
going.
So
that's
that's
styling
the
contour
logs
and
you
can
put
you
know,
that's
just
CSS.
It
just
happens
to
be
in
one
string.
A
B
C
A
So
the
next
thing,
which
is
pretty
useful,
is
to
preserve
the
lungs.
So
if
you
refresh
your
browser
window,
it
clears
out
the
console
log,
which
is
often
what
you
want,
but
sometimes
not
what
you
want.
So
it's
just
a
built-in
toggle,
so
I
refresh
now
it
just
depends
it
doesn't
it
doesn't
destroy
the
log
which
can
be
pretty
useful.
Obviously
you
can
delete
at
any
point
by
doing
that.
A
A
A
You
can
obviously
filter
by
type
as
well,
and
you
can
also
pretty
easily
kind
of
negate
it
and
say
something,
and
it
will
then
exclude
anything
that
has
that
match
I'm
sure
you
can
use
regex
for
those
I
just
want
to
kind
of
type
out
the
whole
bunch
of
Ajax
I'm
sure
you
can
do
that
as
well.
I'll
skip
that
part
of
the
demo.
A
There's
also
the
performance,
you
actually
do
a
whole
bunch
of
forms
counters
as
well,
but
you
know
both
inside
of
the
browser
I'm
not
going
to
demo
that,
but
certainly
have
a
look
at
the
performance
object
to
give
you
a
lot
better
control
over
measuring
functions
and
different
measuring
kind
of
groups
of
functions
as
well.
It's
much
better
than
just
trying
to
manipulate
the
date/time.
A
A
A
A
Okay,
so
if
we
wanted
to
go
and
debug
those
bad
numbers
and
I
purposely
kept
it
really
simple
to
store,
doesn't
kind
of
triskin
to
anything,
we
could
go
and
put
a
breakpoint
which
I'm
sure
you've
all
done.
That's
really
simple.
The
other
way
to
do
it
is
to
go
on
into
the
code
base
itself
and
go
and
add
debugger,
which
we're
gonna
force
a
breakpoint.
A
So
I
can
I
can
actually
say,
debug,
give
it
the
function
variable
and
then,
if
I
click
without
having
to
put
a
debugger
in
their
door
action
break
in
there,
which
was
also
pretty
useful
so
either
putting
debugger
or
putting
a
breakpoint
or
if
using,
that
Key
Bank,
and
it's
just
going
to
wrap
the
function.
So
it's
a
very
simple
thing
about
what
it's
doing,
but
if
I
think
it's
pretty
useful,
all
right.
A
Okay,
I'm
gonna
skip
doing
great
points
within
the
lines
you
can
actually
do
a
breakpoint.
If
you
had
a
bunch
of
nested
statements,
which
I
guess
is
an
anti-pattern
in
itself,
you
could
go
and
put
a
breakpoint
somewhere
along
that
line,
which
is
which
is
quite
a
cool
thing.
Conditional
breakpoints
are
also
useful,
and
this
is
something
that
we've
had
in
in
their
proper
languages
in
in
other
languages
for
a
long
time.
So
it's
useful
that
they've
actually
added
it
now
into
into
dev
tools.
They've
also
added
that
continue
to
here.
A
So
if
you're
debugging
and
you
want
to
you,
know
not
debug-
and
you
want
to
just
continue
to
you
bug
you
at
a
certain
point-
you
can
now
use
the
continue
to
hear
gesture
and
they've.
Also
fixed
I
can
usability
thing
of
your
side
of
your
page
was
stuck
in
an
infinite
loop.
You
can
actually
break
out
of
there
and
get
a
breakpoint
going
again.
A
A
So
what
you
can
do,
which
is
a
nice
thing
to
do?
It's
not
always
going
to
be
that
useful.
Depending
on
what
kind
of
frameworks
you
using
is,
we
can
put
a
breakpoint
on
an
xhr
request,
so
I
can
say
break
whenever
the
URL
contains
the
word
to
do
this
and
then,
when
I
click,
it's
gonna
put
a
breakpoint
somewhere
random
in
one
of
the
frameworks
that
I'm
using
but
there's
kind
of
ways
around
that
which
I'll
show
now.
But
this
is
pretty
useful.
A
So
you
can
search
on
Connery's
here
from
the
bottom
left
corner,
but
you
can
search
on
headers,
which
is
pretty
useful.
So
if
you
know
that
one
of
your
calls
is
fast
in
a
certain
header
or
receiving
a
certain
header,
you
can
search
based
on
the
actual
headers
that
are
getting
tracked
in
the
network
layer
and
you
can
also
simply
filter
out
based
on
certain
methods.
A
If
you
leave
the
Fed
commando,
you
can't
really
see
a
property
there,
but
if
you
wanted
to
do
some
really
quick
prototyping
for
something-
and
you
want
to
copy
that
out,
this
is
similar
to
what
you
get
with
with
postman
the
way
it
will
do
a
little
bit
of
courage
in
around
the
network,
call
itself
and
there's
a
cool
as
well,
and
they
are
as
well
so,
depending
on
what
tuning
you
use
outside
of
dev
tools.
You
can.
You
can
use
things
like
app,
which
is
pretty
small.
A
So
one
of
the
issues
that
you
have
is,
for
instance
in
and
the
network
tab.
The
initiator
is
not
necessarily
your
client
code.
It
could
be
something
you
know
further
down
the
the
framework
stack
that
you're
using
which
doesn't
really
help
you,
because
I
don't
really
care
what
zone
is
doing.
Maybe
I
should
but
I.
Definitely
don't
so
seeing
it
as
the
initiator
for
the
core
doesn't
really
help
me.
A
So
what
you
can
do
is
you
can
mouse
over
it,
so
things
after
saw
huge
Tulsa,
which
is
fine
and
now
they've
introduced
something
called
black
box,
and
you
can
actually
feel
like
box
or
script,
and
what
that
means
is
it
is
it
kind
of
removes
it
from
from
your
kind
of
field
of
ISM?
So
if
we
go
to
the
top,
which
is
the
one
that
was
kind
of
locking
the
meaningfulness
of
that
that
column
I
can
right
click
or
double
click
whatever
it
is
and
say
black
box
the
script,
and
what
that
does.
A
Is
it
actually
just
removes
that
script
completely?
From
and
again
from
kind
of
how
you're
perceiving
once
what's
happening,
it's
still
there
functionally,
but
it's
not
gonna,
it's
something
to
show
it
so
now
we
can
see
that
the
initiator
is
actually
the
thing
that
we
you
actually
care
about,
which
is
pretty
cool.
A
And
you
can
also
use
that
same
thing
from
sources,
so
we're
gonna
count
debug
and
just
show
you
the
before
and
after
so
I'm,
just
gonna
I'm
gonna
step
into
because
it's
my
code,
it's
not
going
to
be
like
an
angular
thing
that
disappears
for
like
half
an
hour,
so
I've
got
two
scripts,
so
it's
coming
on
from
one
to
the
other.
So
let's
presume
that
this
one
is
is
not
doing
anything
that
we
care
about.
A
And
at
some
point
you
want
to
figure
out
what
you've
actually
black
box
tan
and
black
box
it
because
you're
going
to
black
box
the
wrong
thing.
So
there
is
a
there
is
a
setting.
You
can
go
into
it
and
you
can
just
remove
that
that
exclusion
really
something
and
you
can
also
use
patterns
as
well.
So
if
you've
got
certain
patterns
of
scripts
that
you
know
you
must
always
ignore,
you
can
use
them
the
regex
instead
of
going
into
India,
individual
ones
which,
which
is
pretty
useful.
A
Okay,
so
you
had
a
look
at
black
boxing,
so
one
of
the
things
that
I'm
definitely
guilty
of
is
is
not
throttling.
My
CPU
in
my
networking
when
I'm
testing
I
can't
believe
I'll
know
anyone
who
doesn't
do
that
so
typically
you're
sitting
on
like
a
hundred
mega
bit
line
and
you've
got
a
MacBook
that
cost
more
than
like
a
bunch
of
people's
cars
and
like
a
fancy
phone.
Anything
hard
works,
fine
for
me
less
like
Shepherds,
which
is
not
always
the
best
thing.
A
So
if
using
chrome,
dev
tools
is
very
simple:
to
throttle
your
your
performance
and
your
networking
as
well,
it's
probably
not
going
to
be
the
right.
The
most
realistic,
but
I
know
it
is
something
that
they've
been
improving.
So
you
get
a
like
a
high
end
at
a
lower
in
3G,
and
you
can,
you
know,
throttle
the
CPU.
So
it's
probably
a
lot
better
than
doing
nothing.
A
So,
depending
on
how
many
animations
you're
doing
and
kind
of
really
how
much
you
care
about
the
the
finer-grained
performance,
it's
it's
trivial
to
add
the
frames
per
second,
so
you
can
track.
You
know,
what's
happening
from
a
you
know,
from
an
like
a
UI,
a
performance
point
of
view,
which
is
pretty
cool.
Let's
turn
that
off.
A
A
Going
to
chrome
inspect
and
because
of
the
fact
that
this
you
know
a
bunch
of
standards,
kind
of
being
being
used
here,
we
can
actually
go
and
inspect
that
note
process.
So
there's
our
code
and
we
can
put
a
breakpoint
and
we
can
hit
it
as
a
normal
HTTP
server
and
we
can
actually
break
point
can
I
step
through
and
things
like
that,
which
is
pretty
useful.
A
B
A
Okay,
so
the
next
thing,
which
I'm
not
actually
going
to
go
into
I'm,
just
going
to
kind
of
show
it
for
those
that
are
unaware,
although
I
guess
I
can
run
it.
It's
worth
it
used
to
be
an
external
tool
called
lighthouse
and
after
an
internal
tool,
is
part
of
chrome
now
or
part
of
the
dev
tools,
and
this
is
a
really
easy
way
of
getting
a
quick
performance
metric
of
your
of
your
site.
A
A
I,
don't
think
that's
gonna
help
the
nemetrix
very
much.
Oh
here
we
go
okay,
so
here's
the
here's,
the
report,
we'll
just
zoom
in
a
little
bit
obviously
just
gives
you
very
high-level
stats
where
you
are
and
then
you
can,
you
can
drill
down
and
actually
get
a
lot
more
detail
about
the
profiler
and
what's
actually
happening.
It's
definitely
not
something.
I'm
gonna
cover
at
all,
because
we've
pretty
much
out
of
time.
A
But
if
you,
if
you
care
enough
about
the
performance,
I
think
this
is
definitely
a
place
that
you
need
to
go
in
and
actually
figure
out.
You
know
the
nitty-gritty
of.
What's
going
on
because
fairly
often
we
do
simple
things
that
seem
to
work
fine
and
then
suddenly,
you've
got.
You
know
a
thousand
rows
instead
of
a
hundred
rows
and
things
kind
of
grind
to
a
halt.
And
it's
it's
this
area
of
dev
tools.
It's
really
going
to
help
you
figure
it
out.
A
A
And
two
of
the
things
that
are
really
important
as
well
is:
it
gives
you
timing
on
the
first
meaningful
paint,
which
is
one
of
the
metrics.
It's
kind
of
got
more
and
more
popular
over
the
last
two
to
two
years,
and
that
is
how
long
does
art
a
consult
until
something
meaningful
actually
get
painted
on
screen.
There's
no
point
having
banner
ads
and
whatever
else
as
the
first
thing
that
gets
rendered.
A
You
want
to
have
your
your
news
headline
or
whatever
it's
going
to
be
as
the
main
thing
that
gets
rendered
first
and
the
first
meaningful
paint
is
the
metric.
That's
going
to
help
you
figure
out
how
long
it
takes
to
do
that.
There's
a
timeline
at
the
bottom
that
you
can
actually
figure
out
after
X
number
of
seconds.
Where
is
the
rendering
you
know
is
if
meaning
balls
are
not
meaningful.
So
first,
meaningful
paint
is
really
important
and
also
the
time
to
to
interact
interactivity
as
well
is
really
important.
A
A
A
A
A
Whatever,
whatever
the
slow
3G
is,
and
you
can
actually
see
the
rendering
speed
aparcar
quickly,
it
actually
takes,
and
they
give
you
the
code.
So
you
can
just
go
and
modify
it
if
you
want,
but
it's
a
pretty
cool
metric
to
get,
and
this
is
probably
something
that
you
could
footage
to
a
bulk
pipeline
as
well,
so
to
figure
out
how
long
it
actually
takes
at
all
until
the
network
activity
is
stopped,
which
is
where
that
metric
comes
in,
which
is
quite
course
you
don't
have
to
design
ball
it.
A
You
can
actually
get
that
data
turned
out
and
that's
using
the
puppeteer
all
right
cool.
So
that's
pretty
much
that
the
end
of
what
I'm
going
to
show
you
there's
a
whole
bunch
more
so
I
really
do
encourage
you
to
go
in
and
have
a
look
things
like
code
coverage
are
really
useful.
So
again
it
doesn't
negate
all
the
other
tooling
that
we
use.
But
the
fact
is
that
it's
built
in-
and
it's
probably
you
know
directly
in
the
browser
that
you're
testing
it.