►
Description
Debugging Web Apps with Chrome Dev Tools
Ivan Bila (@ivanbila)
Debugging it’s usually what takes the largest chunk of software development(in my experience), by learning the Chrome Dev Tools tool-set we can speed this process up and make it more enjoyable and less painful. furthermore we can audit our code's impact to the browser and user experience.
In this presentation, I’ll talk about dev tools in general but most specifically:
- Elements tab
- Console and console functions
- Network Tab
- Sources Tab
I’ll talk about how to use the sources tab to debug web applications and set breakpoints based on XHR requests DOM nodes events, mouse click events, and more. I’ll also explain the most critical components of the network tab and how to use them to help debug your app. Lastly, I’ll also demo how to use local overrides to speed up testing, the new CSS grid inspector, and how to emulate mobile devices on the browser.
❓Q&A: slido.com - #55106
📢Submit a talk: https://goo.gl/forms/66MrplT1FogDX88Q2
💛Code of conduct: https://docs.google.com/document/d/1j-OfcTwYejEj-WiQq9F9AcVv2L-Ki81RuhFTjquDJyk/edit?usp=sharing
Meetup: https://www.meetup.com/Jozi-JS/events/276044212/
A
A
If
you
are
interested
in
speaking
about
anything
javascript
related,
please
submit
a
talk.
We
are
very
friendly
towards
new
speakers
we're
here
to
help
if
you
want
to
chat
up
to
us
about
an
idea,
but
it
hasn't
formed
yet
welcome
to
do
that.
I'm
still
not
sure
why
we
keep
the
qr
code
for
watching
past
talks
since
you're
already
on
this
youtube
channel,
which
means
you
must
know
where
our
past
talks
are,
but
it's
there
anyway
and
lastly,
we
use
slido
for
questions
and
you
can
scan
this
qr
code.
A
You
can
also
find
the
same
number
in
the
description
and
we're
going
to
post
the
link
in
the
chat
so
that
you
can
post
your
questions
on
there.
If
you
have
any
other
interesting
info
or
links
to
share,
please
post
them
in
the
chat
rather
than
in
slider,
because
they
do
get
lost
in
slider
after
the
meetup
is
done,
whereas
they'll
stay
there
in
the
chat
and
that's
it
from
me.
B
B
B
B
B
B
The
only
reason
the
presentation
is
a
light
theme
is
because
I'm
afraid
you
might
not
be
able
to
see
it
in
that
team
and
also
I
like
beams,
rather
than
I
I
rather
use
vims
rather
than
emacs,
and
I
like
to
use
z,
shell.
I
don't
like
to
use
bash.
It's
it's
lame.
I
don't
know
why
you
do
something
call
it
bash
so
yeah
and
I
like
edison
more
than
I
do
like
tesla.
So
that's
my
place
in
the
whole
divorce.
B
B
So
just
so,
you
know,
there's
a
lot
of
different
chrome
chrome
systems
built
everywhere
if
you're
a
developer.
What's
interesting
to
you
is
to
know
like
what
a
different
version
of
chrome
and
what
can
you
do
with
this
version?
So
there's,
I
think,
there's
five
of
them:
there's
the
the
official
chrome,
the
official
chrome
release
and
then
there's
the
dev
and
then
there's
the
beta
and
then
this
canary,
the
last
three.
B
So,
if
you're
a
developer,
maybe
that's
something
you
want
to
try
it
out,
it's
still
in
development,
but
you
want
to
test
it
and
see
how
it
goes.
So
that's
for
them
beta
and
canary,
I
think
chrome,
canary,
gets
updates
every
single
night
and
I
think
dev
and
beta
get
updates.
They
get
it
weekly.
It's
a
weekly
basis
updates
where
the
official
version
of
chrome
takes
six
weeks
to
get
a
new
update.
B
So
if
you
want
to
try
like
some
new
things
that
the
chrome
team
is
working
on,
oh
it's
about
your
base,
you
can
try
chrome,
canary
beta
and
that
so,
since
chrome
devtools
is
like
a
big
topic,
I
decided
just
select
four
five
of
five
of
these
tabs,
which
I'll
try
to
cover
in
this
presentation.
So
there's
the
elements
then
there's
the
console,
there's
the
sources,
the
network
and
the
application.
B
Personally,
I
think
most
developers
just
spend
the
most
time
in
the
elements
in
the
console
and
in
the
network
step.
This
is
where
you
you,
you
usually
go
when
there's
something
that's
not
working
or
when
there's
something
that's
working
and
we
don't
know
why
it's
working.
So
I'm
just
gonna
focus
on
these
five.
These
five
steps.
B
B
So,
like
I
said,
usually,
you
will
go
to
a
website
or
you're
building
your
own
web
app.
So
you
you
want
to
know
how
you
can
toggle
the
chrome
devtools
panel.
So
there's
many
there's
many
ways
of
doing
this.
The
easiest
one
is
just
right,
click
and
then
click
inspect
and
then
chrome
is
gonna.
It's
gonna
open
the
dev
tools
panel
and
inspect
the
the
specific,
the
specific
element
that
you
just
highlighted.
B
If
I,
if
I
inspect
this
one,
it's
going
to
highlight
that
element,
another
way
is
just
click,
ctrl
shift,
I,
if
you're
in
mac,
I
think
it's
comma
command
shift.
I
so
that
can
easily
open
the
the
depth
it
can.
It
can
quickly
open
the
dev
tools,
but
they
will
not
highlight
anything
so
here
in
the
dev
tools.
You'll
see
all
the
tabs
and
a
lot
of
instructions
here
on
the
desktop.
So
for
I'll
start.
A
B
The
elements
tab,
I
think
it's
one
of
the
it's
one
of
the
most
stressful
to
understand.
It's
pretty
practical
is
where
we
usually
go
first,
when
something
is
not
working
off.
When
I
say
something
is
working
so
in
the
elements
tab
we
have
this
section
of
the
page,
which
is
it
just
shows
all
the
nodes
or
elements
that
are
that
have
been
rendered,
and
then
we
have
another
style
for
the
another
pain
for
the
styles
and
and
other
things
just
something
so
here
like
these
are
all
the
nodes.
B
B
So
if
you
want
to
expand
them,
you
can
just
explain
with
this
icon
or
if
you
can
just
there's
an
option
to
explain
recursively,
so
it
will
expand
all
the
nodes
in
the
dom
tree
and,
depending
on
your
ram,
this
yeah,
your
computer,
might
stop
making
weird
sounds.
So
you
should
be
careful
with
that,
because
it's
going
to
expand
all
the
nodes
in
the
dom
tree.
B
So
it
will
expand
everything
recursively,
so
you
have
that
option
and
if
I
want,
if
I
just
want
to
inspect
one
specific
element,
I
can
just
click
this
icon
here
and
then
inspect
that
given
element
and
then
chrome
is
going
to
highlight
that
that
element-
and
I
can
just
I-
I
can
just
see
what
exactly
is
happening
also
if
I
just
want
to
quickly
search
for
an
element-
let's
say
I
know
exactly.
I
know
exactly
what
I
want,
so
this
is
different.
B
There's
different
searching
mechanisms,
so
I
the
one
that
I
like
the
most
is
called
xpath
so
with
expert.
Basically
just
this
slash-
and
you
say
I
want-
I
want
a
a
a
p
tag-
that's
inside
of
a
div,
so
it's
going
to
show
you
the
p
tag
that
that's
inside
of
the
div
a
different
way
you
can
just
search.
You
can
just
search
for
the
element
if
you
want,
if
you
want,
you
want
something
with
the
class
of
front
it's
going
to
search
for
every
occurrence
of
that
board.
B
B
A
B
So
this
is
a
model,
that's
hidden,
but
this
is
the
first
p,
the
first
paragraph
in
the
page.
So
this
is
actually
pretty
handy
if
you
don't
want,
if
you
do
not
want
to
search
for
the
items
using
this
this
this
mechanism,
you
can
quickly
just
write
like
the
class
in
here,
so
a
quick
test
would
be.
I
can
just
copy
this.
I
can
copy
this
class
and
then
I'll
come
and
search
for
it.
B
So
I
can
just
write
this
and
it's
going
to
highlight
this
specific
element
using
the
console
utility
function
called
inspect.
So
this
is
pretty
handy
if
you
don't
want,
if
you
do
not
want
to
search
for
the
element
that
you
know
exactly
the
glass
or
the
id,
so
that's
how
you
use
you
find
that
you
can
find
a
node
element.
So
usually,
when
you
highlight
when
you
inspect
something,
if
it's,
if
it's
text
it
will
tell
you,
it
will
tell
you
like
very
useful
information.
So
this
is
new
on
chrome.
B
B
Element
in
the
background
is
appropriate
or
not.
So
this
is
the
the
contrast.
Contrast
score
for
the
specific
element,
so
I'm
going
to
zoom
out
of
the
page
and
also
here
why
we're
here
on
the
on
the
elements
tab.
This
is
something
that
I
I'm
not
sure.
If
you
you
struggle
with
it.
So
generally
I
have
a
hover
I
have
over.
B
I
I
write
a
write,
a
rule
for
when
someone
over
over
something,
maybe
that
that
thing
changes
or
it
does
some
sort
of
animation,
so
usually
I'll,
just
I'll
just
struggle
with
that,
because
when
I
I
have
when
I
inspect
it,
so
when
I
inspected
the
thing
is
gone,
so
I
don't
know
if
this,
if
the
hover,
if
if
the
hover
has
been
applied
or
not
so
there's
something
on
chrome,
you
can
just
right
click
on
any
node
and
then
you
can
force
you
can
force.
You
can
force
state.
B
So
there's
multiple
states,
that's
active
over
focus,
so
you
can
just
force
the
overstate
so
it
will.
It
will
show
you
like
this
red
this,
this
orangish
icon
on
the
on
the
note.
So
this
is
how
it
would
be
if
it
wasn't
over.
I
can
force
a
different
state
which
is
active
so
for
this
one.
This
is
how
I
think
the
styles
are
applied
to
this
one.
B
So
this
is
pretty
handy
if
you
wanna
divide
your
app
for
different
states.
Also,
another
interesting
thing:
why,
on
the
node
on
the
elements
pane,
is
you
have
on
the
side?
You
have
the
styles
pane.
You
have
the
computer,
the
layout.
You
have
a
lot
of
things
here
on
the
side
that
you
can
work
with
so
here
in
the
style
element
it
will.
B
It
will
tell
you
everything:
that's
targeted
for
this
given
element
every
css
rule
that
was
written
and
is
targeted
for
this,
given
for
this
node
for
this
node
or
element
on
the
page.
So
for
this
one
it
will
show
me
all
the
all
the
rules
that
have
been
written
to
it,
and
also
here
you
can,
you
can
see
exactly
which
rules
have
not
been
applied
due
to
due
to
the
effect
of
cascading.
B
So
I
can
see
this
one
was
not
applied.
This
one
was
not
applied
and
this
one
was
not
applied.
So
this
is
useful
for
that
you
can.
You
can
see
every
row
that
was
written
for
this
node
element
and
the
rules
that
have
not
been
applied,
and
then
you
have
the
computer
tab.
Even
the
computer
tab
is
basically
how
the
browser
understands
your
rules.
B
So
if
I,
if
I,
if
I,
if
I
expand,
you
showed
me
how
you
understood
this
rule,
so
if
I
have
some
sort
of,
if
I
have,
if
I
have
a
measure-
that's
that's
relative,
then
here
I
can
see
exactly
how
much
that
translates.
So
if
I
say
I
have,
if
I
say
I
have
this
element
and
then
I
just
write
something
like
the
font
size
is
going
to
be.
B
Let's
see
if
you
have
a
relative
measurement
here.
If
you
have
like
some
reasons
like
the
the
position
of
this
element,
I
can
just
come
here
and
then
right
right,
okay,
great,
so
the
position,
if
you
see
the
position
here,
it
comes
with
values
whereas,
like
the
rule
that
was
used
for
it
is
relative,
is
in
relative
measurement.
So
here
is
like
minus
20,
000
amps,
but
this
actually
translates
to
the
44.
This
is
this.
Is
this
is
left,
so
it
is
minus
20,
000
m,
which
translates
to
minus
44
thousand
pixels.
B
So
in
the
computer
type
you
can
see
exactly
how
how
a
rule
translates,
how
the
how
the
browsers
really
understand
that
exactly
and
also
you
can
see
all
the
other,
all
the
styles
that
have
been
applied
to
a
given
node
element.
So
here
on
the
styles
pane,
you
see
everything
that
was
targeted
for
these
new
elements
in
the
computer
tab,
tab,
you'll,
see
all
the
sites
have
been
applied
to
this
node
element,
how
the
browsers
understands
them
this
is.
B
This
can
be
pretty
handy
if
you
wanted
the,
but
usually
when
something
is
not
working
on
a
css
oil
when
something
is
working
in
in
a
way
that
it
wasn't
intended
to.
You
can
quickly
come
to
the
computer
tab
and
search
exactly
for
that
property.
If
it's
a
color,
you
can
just
search
for
the
color
and
see
which
color
has
been
applied
and
which
rule
has
been
used
to
apply,
for
which
rule
is
is
being
is
being
is
it
is
that
is
the
highest
on
the
on
the
cascading
on
the
cast
on
the
cascade?
B
B
So
if
an
element
is
using
flexbox
or
css
grid
is
going
to
have
a
label
on
it
that
says:
okay,
this
is
using
flexbox
or
css
grid.
I
think
for
for
processors
great,
they
will
show
you
like
how
the
grid
is
looking
here
for
flexbox,
I'm
not
sure
if
they've
developed,
something
that
that
that
is
similar
to
the
great
one.
B
So,
okay,
I'm
going
to
I'm
going
to
jump
on
to
the
next
to
the
next
step,
which
is
the
console
tab,
also
something
that's
pretty
handy
for
developers,
you
can
you
can
open
the
settings
it's
here,
you
can
just
open
the
settings.
If
you
want
to
you
want
something
like
dark
mode,
if
you
want
to,
if
you,
if
you
want
to
customize
your
dev
tool
experience,
you
can
just
come
here
and
change
everything
that
you
think
should
be
different.
So
for
indentation
I
use
two
spaces.
B
I
don't
use
tabs,
so
you
can
pretty
much
like
just
change
everything
if
you
want
to
show
the
rulers,
and
so
this
is.
This
can
be
pretty
handy.
If
you
want
to
customize
things,
it
also
does
the
experiments
tab
tabs,
which
is
like
new
new
features
that
the
chrome
team
is
working
on,
but
they
have
not
been
widely
allowed.
So
there's
a
lot
of
things
and
also
one
thing:
that's
very
important
if
you
develop
apps
for
the
african
for
any
african
country,
is
that
you
you
can?
B
B
B
B
B
B
It's
gonna
take
some
time
great.
So
let's
say
I
was
inspecting
this
this
given
item-
and
I
want
to-
I
want
to
have
a
reference
of
it
on
the
console
tab.
If
you,
if
you
take
a
closer
look
at
it,
chrome
says
that
you
can
use
dollar
sign
0
in
the
console
to
reverse
this
element.
So
if
I
just
click
dollar
sign
zero,
it
would
just
give
me
a
reference
for
that
element.
So
I
can
I
can
change.
I
can
make
changes
to
this
element
and
it's
going
to
reflect
on
the
page.
B
So
that's
something
pretty
handy.
You
can
there's
also
a
different
thing.
If
you
want
to
select
a
different
element,
you
can
you
can
click
dollar
sign
as
a
dollar
sign
dollar
sign,
so
this
will
make
a
query
for
the
dom
if
you
wanna,
if
you
wanna
query
for
something,
let's
say
you
wanna
query
for
for
this
element-
an
element
with
every
element
with
this
class.
B
So
it's
going
to
is
going
to
bring
in
like
an
empty
array.
I
think
it
didn't
find
it.
This
usually
happens
because
this
page
is
using
jquery,
so
jquery
has
control
of
of
the
dollar
sign
of
the
dollar.
Sign
variable,
so
chrome
calls
the
when
you
call
dollar
sign,
and
then
you
make
these
queries
like
this
one.
I
think
it's
called
the
command
line
api
depending
on
on
the
page.
So
for
this
page
I
think,
like
jquery,
has
the
control
of
the
dollar
sign
variable.
B
So
I
think
if
I
just
write
this,
so
this
is
jquery
that
has
control
of
it.
But
if
I
just
try
on
this
page,
where
I
think
jquery
doesn't
have
control
of
the
dollar
sign
variable.
So
this
is
the
command
line
api
that
has
the
control
over
the
dollar
sign
variable.
So
for
this
one
I
think
there's
a
there's.
A
function
in
jquery
called
no
conflict,
no
conflict
pretty
much
just
it
just
gives
away
the
control
of
the
dollar
sign
variable.
B
So
now,
if
I
just
call
the
dollar
dollars-
and
that
is
undefined,
but
the
chrome
thing
I
don't
think
the
chrome
team
has
has
created
a
mechanism
for
giving
it
back
the
control
of
the
dollar
sign
variable.
So
if
you
have
jquery
on
your
page,
this
can
this
is
not
going
to
work
unless
the
chrome
team
fixes
this
or
they
have
a
mechanism
of
getting
back
the
control
of
the
dollar
sign
variable.
B
So
you
can
only
use
the
document
that
query
and
stuff
so
back
to
that
that
was
the
s0
is
going
to
return
the
last
element
of
the
page.
Another
utility
function.
That's
pretty
handy,
I
think
there's
a
variable
called
app
settings
here.
So
if
you
see
it's
an
object
with
a
lot
of
with
a
lot
of
attributes,
so
I,
if
I
want
to
copy
all
of
this
it
can,
it
can
be
really
challenging
so
there's,
actually
a
utility
function
called
copy.
B
If
I
write
copy
and
then
I
just
write
the
name
of
the
variable,
it's
going
to
copy
the
variable
to
the
the
value
of
the
variable
to
the
clipboard.
If
I
just
paste
it
in,
you
can
just
see
like
it
copy
everything
that
was
on
that
object,
so
this
can
be
pretty
can
be.
Pretty
can
be
really
handy
if
you
want
to
copy
something.
If
you
want
to
analyze
it
or
you
want
to
show
it
to
someone
that
this,
how
a
variable
is
looking.
B
I
think
I
already
showed
it.
I
already
talked
about
the
inspect
utility
function.
We
can
use
to
inspect
for
elements
for
this
case
you
you
have
to
do
like
document
that
query,
because
the
dollars
and
variable
jquery
owns
it
so
yeah.
So
this
is
another
utility
function.
I
think
it's
clear
if
your
console
is.
If,
if
your
console
has
a
lot
of
errors,
you
can
just
use
clear
it's
going
to
clear
your
console
and
then
there's
a
another
one.
That's
pretty
nice.
Let's
say
you
have
a
variable
called.
B
B
So
let's
say
you
have
an
array
like
this
one.
I
think
this
this
utility
function
is
called
console.table
and
then
you
can
just
type
in
like
attendees,
so
it's
gonna
show
you
like
that
array
in
a
in
a
very
well
formatted
manner,
so
you
can
see
here
the
index,
one
of
the
attributes
and
then
eight.
This
is
really.
This
can
be
really
handy
if
you
want
to
inspect
a
given
element
or
something,
because
I
think
also
that
log
doesn't
doesn't
do
a
nice
job
of
displaying
are
displaying.
B
So
this
is
the
main
difference,
and
this
is
the
the
result
of
concept
that
log
is
the
result
of
quantitative.
So
this
can
be
pretty
handy.
If
you
want
to
see
what's
inside
of
an
array
and
also
here
in
devtools,
you
can
actually
click
this
one
and
it
you
can
filter
the
errors
by.
If
you
want
to
see
the
errors,
if
you
want
to
see
the
warnings,
if
it's
info,
if
you,
if
it's
for
both
you
can
actually,
you
can
actually
filter
that
and
also
a
different
thing.
B
You
can
also
hide,
depending
on
the
level
that
you
want
to
see
you.
Can
you
can,
if
you
just
want
to
see
errors,
you
can
just
select
here
what
exactly
you
want
to
see
or
you
can
use
the
default
configuration,
and
you
can
also
filter
here
and
a
different
something.
That's
really
interesting.
You
can
change
here
on
this
gear
icon,
so
you
can
log
ajax
requests
to
your
to
your
console,
I'm
not
sure
like
depending
on
why
what
you
wanted
to
buy.
You
can
log
them
to
your
console
and
then
something.
A
B
That
can
you
can
help
clean
up
your
console.
So
here
you
have.
This
option
called
select
contact
only
if,
if
this
is
not
selected,
this
is
going
to
show
all
the
errors
of
the
ad
block.
If
you
have
extension,
it's
going
to
show
errors
from
extensions
and
all
other
scripts
that
are
not
really
important,
so
you
can
just
select
this.
B
You
can
check
this
box
that
says
selected
context
only,
and
this
is
going.
This
is
only
going
to
show
errors
or
information
from
this
domain.
That's
really
interesting!
I'm
going
to
skip
to
the
network
tab!
Oh
there's,
also
something
that
can
be
really
helpful
here.
It's
called
live
expressions,
so
I
can
just
type
in
any
variable
or
like
a
dom
element
here.
So
this
will
monitor
like
all
the
values
of
this
variable
and
update
them
as
they
change.
So
this
can
be
really
handy
for
you
to
understand.
How
does
the
state
of
the?
B
How
does
the
state
change
or
how
does
it?
What
happens
to
the
state?
Why
you
do
certain
activities
on
your
browser?
So
this
can
be
really
handful,
so
I'm
going
now
I'm
going
to
the
networks
tab,
which
is
also
another
very
interesting
part.
So
I
have
to
refresh
the
page
when
you
open
the
network
tab,
it's
going
to
be
like
it's
going
to
be
like
really
clean.
B
Nothing
is
going
to
be
here,
so
you
have
to
refresh
refresh
your
page
and
then
it's
going
to
load
every
resource
of
the
page,
so
by
default.
This
is
not
how
you
your.
This
is
not
how
your
networks
tab
is
going
to
be.
Looking
you
there's!
Oh
there's,
actually
a
couple
of
customizations
I've
made
here.
B
I
think
the
first
one
is.
This
is
probably
how
it's
going
to
look.
So
it's
going
to
show
like
very
small,
very
small
rows.
You
actually
have
to
click
this
icon
and
use
large
rows,
so
this
is
going
to
show
like
a
very
large
row
for
your
for
your
requests.
So
here
you
have
this
table
where
your
name
status
scheme
initiated
all
of
these
details.
You
can
actually
add
more
columns
to
these
tables,
depending
on
what
exactly
you're
trying
to
you're
trying
to
debug.
B
So
you
can
add
url.
You
can
add,
like
all
of
this
other,
all
of
the
other,
all
of
the
other
columns.
So
here
you
have
the
name
of
the
resource,
the
url
and
then
the
status.
The
scheme-
and
I
think
the
important
thing
here,
especially
for
performance,
I'm
going
to
hide
the
url
and
then
I'm
going
to
hide
here
so
especially
for
performance.
You
have
this
size,
this
size
column.
That
shows
you
two
sizes.
B
You
have
this
one.
You
have
62
kilobytes
for
this
specific
resource.
They
have
62
kilobytes
and
then
they
have
20
24
kilobytes.
So
if
you
hover
over
it,
it's
going
to
tell
you
exactly
what
does
each
value
stands
for
so
usually
the
the
smallest
amount
is
the
is
what
it's,
what
the
browser
downloaded
from
the
network
and
the
largest
amount?
B
So
if
these
values
are
not
different,
that
means
that
you're
not
compressing
your
your
files,
so
you
should
do
some
configuration
in
your
server
to
use
some
sort
of
compression
algorithm
can
be
gized
or
it
can
be
broadly,
depending
on
how
you're
going
to
configure
it.
So
yeah
there's
that
so
this
is
really
important
and
also
there's
this
column.
Initiator
is
going
to
tell
you
exactly
who
asked
for
this
resource
and-
and
it
can
show
like
the
the
line.
B
So
here
you
see
person,
so
the
person
was
the
one
that
went
and
fetched
this
resource,
but
you,
depending
on
how
the
page
is,
it
can
show
you
the
script
that
made
there
is
the
the
request
and
also
you
can
you
can
actually
filter
your
your
your
your
requests.
So
you
can
only
show
like
the
ajax
requests.
You
can
only
show
the
css
request.
B
B
So
the
transcript
is
what
it
downloaded
from
the
network
that
compresses
the
compressed
size
of
your
resource
and
then
the
resources
is
actually
the
uncompressed,
the
uncompressed,
the
unknown
commercial
size
of
your
resource
and
the
time
it
took
to
download
this
resource
and
do
the
parsing.
So
you
can
also
filter
by
this
there's.
Also
this
field
you
can
filter.
You
can
just
write
png.
It's
going
to
show
you
the
png.
You
can
write
css,
I
think,
there's
domain
you
can
filter
by
domain.
B
B
Yeah,
the
the
figure
that
you
can
use
to
select
only
what
you
want
so
here
and
the
method
I
think
you
can
get
so
you're
going
to
show
only
the
things
that
when
they
get,
you
can
show
posts
only
things
that
came
via
post.
So
you
can
feel
that
pretty
much
by
every
everything,
also
something
that
can
save
you.
A
lot
of
pain,
I've
seen
developers
going
white
hair
over
this
is
to
select
the
disabled
cache
option,
because,
usually
you
want
to
disable
cash
unless
you're
testing
something
related
to
cash.
B
You
want
to
click
disable
cash,
so
this
is
going
to
disable
the
cash
just
so
like
you,
don't
keep
debugging
something
that
was
already
fixed
and
also
there
is
this
option
where
you
can
set
the
network,
you
can,
you
can
set
it
on
online
or
you
can
set
like
first
regisload
or
you
can
add
your
own
custom
rules,
also
something
you
can
use
for
reloading
a
page
and
emptying
cash.
If
you
long
press
the
the
reload
page
button,
it
will
show
you,
like
normal
reload
hardware,
load,
empty
cache
and
hard
reload.
B
So
for
the
hard
reload,
I
think
it's
ctrl
shift
r
but
yeah.
If
you
wanna,
if
you'd
like
to
use
the
ui,
you
can
use
any
of
these
options
and
also
you
can
export
all
of
of
all
of
the
requests
or
resources
that
happen
to
your
browser.
So
you
can
there's
this
option
to
export
and
you
can
export
to
anywhere
and
then
you
can
just
send
someone
else
like
someone
else
can
import.
B
What
did
I
say?
Oh
yeah,
I
don't
remember
so.
Someone
else
can
kind
of
import
all
of
your
requests
and
then
they
can
see
exactly
what
happened
on
your
end.
So
this
can
help
you
debug
issues
that
a
user
had
or
different
developers
have.
So
you
don't
have
you
don't
face
the
the
old
dilemma
that
works
on
my
machine,
so
you
can
just
expose
the
request
to
the
person
and
then
the
person
can
quickly
divide
exactly
what
happened
on
their
end.
B
Also,
something
that's
a
different
thing.
You
can
actually
open
the
console.
You
can
actually
open
the
elements
tab
in
the
console
at
the
same
time.
So
I
think
it's,
oh
there's
a
ctrl
shift
key.
We
just
open
like
this
tab,
so
here
you
can
quickly
type
something
he
would
say
to
there.
If
I
just
write
network,
I
can
quickly
go
to
the
networks
and
if
I
just
write
console,
I
can
quickly
show
the
console.
B
B
It's
gonna
take
a
bit
of
time,
so
basically,
this
this
tab
is
going
to
show
me
exactly
like
what
is
being
used,
what's
being
used
versus
what
am
I
shipping
to
the
users
so
at
the
beginning,
this
is
not
like
what's
being
used
in
the
entire
application.
Lifecycle
is
just
what
is
being
used
at
this
point
of
me,
giving
the
content
that's
in
the
page,
so
I
can
view
different
resources.
Let
me
just
expand
this,
so
I
can
view
I
can
see
that
I
have
89
in
my
css.
B
I
have
89
and
use
css
and
javascript.
I
have
like
39
and
use
javascript,
so
this
can
be
pretty
handy
if
you
want
to
do
something
like
code
splitting,
which
is
like
the
idea
of
code
splitting
is
just
getting
fetching
a
resource
only
when
it's
about
to
be
used,
so
I
can
quickly
see-
and
also
if
I
open,
I
think
if
I
open
this
tab,
it's
going
to
show
me
exactly
which
lines
are
not
being
used
versus,
so
these
lines
are
not
being
used.
B
This
line
is
being
used
and
these
lines
are
not
being
used.
So
I
can.
I
can
take
all
of
these
css
rules
and
put
in
a
separate
file,
and
then
just
I
can
I
can.
I
can
use
code
splitting
to
kind
of
request
for
those
because
at
this
point,
they're
not
being
used.
So
if
you
have
you
have
that
for
all
of
the
all
of
the
resources
on
the
early
10th
there's
also
something
called
rendering
that's
really
nice
to
if
you
want
to
test
different
features.
B
So
if
you,
if
you,
if
you
use
dark
themes
on
your,
if
you're
setting
up
dark
themes
on
your
web
app,
you
can
actually
use
an
emulation
which
is
prefers
the
lights.
You
can
set
this
media
query,
so
one
of
one
of
the
major
choices
called
prefer
the
light,
the
light
scheme
or
the
dark
scheme.
So
this
can
be
useful
if
you
are
testing
for
these
features
on
your
browser
and
there's
other
there's
other
different
emulation
mechanisms
here.
So
you
can
use
wire
testing
for
your
app.
B
B
One
thing
that
I've
noticed
about
like
most
developers
that
we've
been
using
because
of
that
log.
I
think
this
application
is
pretty
large
and
doesn't
have
just
so
there's
this
demo
application
from
the
google
team
that
they
made.
So
the
idea
is
like
they
just
made
the
calculator,
that's
bagging.
So
if
I
write
one
here
and
now
write
one
and
then
I
have
these
two
numbers
going
to
be
11,
which
is
which
is
clearly
wrong
by
the
way.
B
If
I
just
write
five
and
one
it's
going
to
be,
51
like
this
is
not
correct,
depending
on
how
you're
doing
the
math.
This
is
not
correct,
so
the
I
think
the
best
way
to
debug
this
I
can.
I
can
just
come
into
the
sources
panel
and
see
exactly
what's
happening.
I
can
add
all
the
console
logs,
but
I
think
maybe
this
is
not
effective.
It
gets
the
job
done,
but
it's
not
a
factor.
B
B
B
B
I
can
evaluate
the
selected
text
in
the
console,
so
I
can
just
click
evaluate
this
so
here,
if
I
open
the
console,
I
can
just
evaluate-
and
it
would
tell
me
exactly
what
happened
in
this
comparison,
so
I
don't
have
to
try
to
guess
and
try
to
to
fight
the
and
try
to
find
the
the
javascript
engine.
I
can
simply
just
highlight
and
then
see,
what's
the
result,
so
here
I
don't
care
about
this
function.
I
can
just
I
want
us.
I
want
to
see
the
next
function
being
called
okay
in
this
function.
B
They
get
the
this
value
and
also,
if
I
highlight
chrome,
is
going
to
tell
me
exactly
what's
the
value
and
there's
also
something
interesting
here
on
the
scope,
it
shows
you
all
the
variables
and
all
the
variables
that
that
belong
to
these,
that
are
being
that
being
used.
So
I
don't
really
care
about
this.
The
get
number
returns
five
and
and
then
I
can
just
go
to
the
next
function.
B
Okay,
step
to
the
next
function.
Okay,
he
gets
the
second
number.
Let
me
see
what
what's
the
result
of
the
second
number,
it's
one.
If
I
just
highlight
it,
okay,
I
can
just
go
to
the
next
function.
It
gets
the
second
number
and
then
here
it
is
like
none
of
the
inputs
are
empty.
Okay,
I
can
just
get
to
the
next
function.
Call
and
then
there's
this
function
called
update,
update
label.
I
think
this
is
where
things
might
be
bugging.
I
guess
that
I
can.
B
I
can
step
into
this
function,
to
see
what's
happening,
so
they
get
the
first
number
and
then
they
get
the
second
number.
Okay,
I
can
just
step
so
here
it
gets
the
the
first
number.
This
is
the
value
of
the
set,
and
then
they
get
I
can
step
so
another
thing
that
chrome
does,
which
is
really
handy.
It
shows
you
like
when,
after
you've
been
dressed
up,
it
shows
you
the
value
for
that
variable.
So
this
variable
has
this
value,
so
this
can
be
really
handy.
B
I
don't
think
you
can
do
this
with
the
console
log.
I
would
have
to
add,
like
multiple
console.
statements
and
also
here
here
on
the
scope.
It
tells
me
the
variables
and
then
the
value
of
that
variable
I
can
even
I
can
even
update
the
values.
So
here
I
can
update
it.
Let's
say
I
want
to
update
it
to
hey.
I
want
to
test
a
scenario
where
the
value
is
87,
so
I
can
even
update
the
value.
This
is
really
handy
and
it
shows
me
the
other.
B
So
if
you
see
like
this
is
the
value
that
I
just
updated,
87
and
then
the
second
variable
is
one.
So
then
there's
this
part.
That
does
the
sum.
So
basically
here
they
just
take
the
first
variable
and
then
the
second
variable,
and
then
they
sum
them
something
interesting
here
like
I
can
quickly
just
highlight
this,
and
this
is
going
to
be
so.
The
byte
lies
in
here
like
this
is
going
to
be
1
871.
B
I
think
this
is
mainly
because,
like
87
is
a
string
and
one
is
a
string
so
what's
happening
here,
coercion
is
just
taking
away
I'm
taking
two
strings.
You
want
me
to
join
two
strings.
Okay,
I'm
going
to
join
the
strings,
so
I
think
what
would
solve
this.
It
actually
is
just
if
we
parse
it
if
we
just
converted
the
strings
to
x.
So
I
can.
I
can
quickly
just
take
this
expression.
I
can
test
it.
B
I
can
take
this
expression
and
then
evaluate
in
the
console,
and
then,
if
I
just
try
to
evaluate
here
so
I
can
copy
this
one
and
then
try
to
evaluate
in
the
text
console.
So
this
is
what
was
invited
in
a
text
console
that's
the
result.
I
can
maybe
change
it
here.
I
think
it's.
The
function
is
called
the
parts
called
parseint.
B
If
I
just
write
first
into
this
one
as
well
and
there
you
go
so
I
think
this
is
what
we
wanted
to
happen
here.
So
we
want
wanted
to
convert
like
the
the
string
values
to
I
need
value.
So
if
so,
I
already
have
an
idea
of
what
what's
breaking
and
what
could
be
the
possible
solution.
So
I
know
that,
like
the
problem
is
here,
I
can.
I
can
also
add
a
breakpoint
to
this
line
and
the
problem
is
here
and
I
just
have
to
change
it.
B
So
let's
say
I
I
edit
like
I
can
just
resume
script.
So
I
added
a
breakpoint
to
that
line
this
line,
and
then
I
can.
I
can
try
to
render
the
page
again
so
there's
also
there's
an
option
to
remove
like
deactivate
all
the
breakpoints,
so
this
will
deactivate
all
the
breakpoints
I
have
on
the
page.
I
can
quickly
remove
that
the
rule
or
I
can
just
resume
the
script
and
also,
I
think
I
need
to
remove
this
on
click
breakpoint
and
then
I'll,
just
reload.
The
page.
B
B
This
is
the
break
one
that
we
just
said
here
so
like
this
is
a
different
way
of
doing
it.
You
can
quickly
add
a
breakpoint
to
a
place.
Maybe
you
have
an
idea
that
this
is
where
the
bug
might
be,
or
you
can
just
add
a
breakpoint
when,
when
someone
clicks
a
button
when
and
when
an
ajax
request
happens,
so
we
already
know
like
the
bug
is
here,
and
I
think
we
have
the
sticks
here,
so
we
just
had
to
like
change
this
specific
part
of
the
page.
B
I
think
this
would
be
a
good
opportunity
to
show
something
called
local
overrides.
It's
actually
a
pretty
cool
feature
of
chrome.
So
since
this
website
is
on
the
web
like
if
I
change
this
and
then
I
refresh
it's
gonna
be
back
to
normal,
so
there's
something
really
cool
on
the
chrome
on
the
sources
panel.
B
I
I
think
it's
here.
I
think
it's
overrides
call
it
local
overrides.
I
can
quickly
select
a
folder.
I
can
just
create
a
folder
here,
call
it
js
and
then
again
open
and
paste
it
here.
So
so
chrome
will
ask
me
if
I
want
to
give
home
access
to
that
specific
folder.
I
will
allow
it
so
chrome
will
pretty
much
load
like
the
entire
page,
that
specific
to
that
specific
folder.
So
any
changes
I
make
to
this
page
are
going
to
be
permanently
on
my
local
environment.
B
A
B
Also,
when
you,
when
you,
when
you
coding
with
chrome,
it
actually
has
the
autocomplete,
you
can
pretty
much
use
chrome
for
like
a
for
like
an
ide
if
you,
if
you're
working
on
a
vanilla,
javascript
app.
So
if
I
make
changes
to
this
line,
chrome
is
gonna.
Show
me
this
icon,
saying
I
should
save
this
change
and
if
I
save
the
change
the
icon
is
gonna
have
is
gonna
have
a
different
color,
meaning
I
made
changes
to
this
website.
B
B
In
here,
okay,
so
first
thing
is
another.
Let
me
just
see
the
console.
How
do
you
write
first
in
also
the
p,
so
this
should
be
parsed
in
like
this,
so
I
can
quickly
save
it
again,
and
now
it
works
just
fine.
So
if
you
look
at
the
url
it
still,
it
still
shows
like
the
normal
chrome
url,
but
then
I've
I've
made
changes
to
my
local
environment
and
I've
saved
them
to
these
local
overrides.
So
I
can
quickly.
B
I
can
quickly
make
changes
to
these
parts
and
then
so
now
so
now
that
bag
has
been
fixed.
So
that's
how
you
would
you
you
would
go
about
debugging,
your
web
application,
there's
also
something
that
I
would
like
for
other
developers
to
you
to
use.
Let's
call
it
the
log
point.
This
is
really
interesting.
So
if
I
just
add
a
low
point
here
and
then
I
get,
I
call
this
function
get
number
one.
I
added
a
low
point
list
in
this
line.
I
can
add
a
different
log.
B
B
B
B
Yeah,
I
think
I
have
to
I
have
to
refresh
the
the
page,
if
I
just
add
like
one
and
zero
and
then
click
add
the
numbers.
Okay,
something
is
work.
So
the
idea,
the
idea
of
low
points
is
basically
that
if
you
can
add
log
point
to
any
line,
so
it's
going
to
log
the
value
of
the
expressions
on
that
line.
Oh
yes,
it's
here,
so
you
add
the
log
points.
I
want
to
add
the
log
points
for
these
two
lines.
B
B
I
I
can
just
call
this
function
here
on
the
low
point
and
then
so,
if,
if
the
the
value
for
that,
if
the
value,
if
when
I
reach
this
line,
is
it's
going
to
log
me
in
the
console
exactly
what
what
what
was
the
output
of
that
value?
So
this
can
be
really
helpful.
If
you
don't
want
to
clutter
your
script
with
the
log
we
console.log
you
can
you
can
simply
just
use
the
chrome
log
points,
so
you
don't
have
ever
to
use
console.log
again.
A
B
I
think
basically,
the
idea
like
jquery
is
is
more
it's
kind
of
a
library
that
was
written
by
like
a
couple
of
developers,
so
I
I
haven't
used
jquery
to
the
full
extent,
but
for
the
things
that
I
want
to
do
like,
which
is
basic,
don't
don't
manipulation
it.
It
seems
to
work,
so
I
wouldn't
know
exactly
what
are
the
limitations
of
it.
So
maybe
that's
something
someone
else.
B
C
So
it
was
sort
of
like
the
baseline
that
made
all
browsers
gave
you
a
stable
base
to
develop
off
of
and
then,
as
stuff
has
been
added
into
browsers
in
the
standard
like
document.queryselector,
I
heard
you
mention,
which
was
a
big
one.
The
eventing
support
has
gotten
better
and
javascript's.
Language
has
gotten
better,
there's
very
little
reason
to
still
use
jquery
unless
you're
interested
in,
like
the
plug-in
model
on
top
of
it
and
there's
still
some
good
stuff
that
uses
the
jquery
plug-in
model
so
limitations.
C
B
Yeah
and
also,
I
think,
just
adding
what
mike
said,
I
think,
depending
exactly
on
your
target
audience,
you
might
have
to
use
it.
So
if
you
building
an
app
for
let's
say
an
enterprise
app
for
these
companies
that
still
using
ieee
like
the
old
browsers
and
all
of
these
like
you
would
have
to
use
jquery
because,
like
the
the
apis
are
not
stable
and
javascript
is
like
not
just
javascript
css.
All
of
these
things
are
not
like,
as
standardized
as
in
the
modern
browsers.
B
B
So
if
you
want
to
use
jquery
on
your
project,
you
have
to
import
the
entire
jquery
library,
whereas
now
with
the
different
tools
they
allow
you
to
do
things
like
three
shaking
and
you
can.
You
can
use
the
code
splitting.
So
the
idea
is
that
you
only
ship
the
functions
you
use,
not
the
entire
library
itself.
So
I
think
that
is
the
biggest
order
of
jquery.