►
From YouTube: FE/UX walkthrough of Chrome Dev Tools
Description
Payton (FE) / Daniel (UX) meet for a short walkthrough of chrome dev tools.
B
A
So
Daniel
and
I
are
going
to
go
through
using
Chrome
developer
tools
to
check
UX
changes
or
any
changes
that
have
happened
to
the
UI
he's
a
pretty
familiar
with
it.
So
we're
gonna
try
to
talk
together
and
show
how
it's
done.
Okay,
so
let's
say
that
a
I
guess
we
can
just
do
this
pipelines
page
here.
Maybe
we'll
be
the
pipeline
rows
a
lot
of
field
pipelines
here,
because
I'm
testing
something
okay.
A
So
what
I
usually
do
is
on
Mac
I,
do
command
option,
J
to
open
up
the
console
for
console
and
then
I
go
to
elements.
I
usually
keep
it
pinned
at
the
bottom.
If
you
would
like
to
view
mobile,
there
is
an
icon
to
the
left
of
the
developer
tools
right
beside
elements
that
shows
toggle
device.
That
says
the
toolkit
toggle
device
toolbar.
If
you
click
that
that'll
put
you
in
sort
of
a
mobile
state
where
you
can
drag
and
view
different
pixel
widths
at
the
top,
so
like
right
now
would
be
1031
pixels.
A
So
I
can
go
back
down
and
go
back
up
to
be
different,
pixel
widths
to
see
if
anything
is
breaking
at
a
certain
screen.
Size
there's
also
set
width,
so
we
could
say
we
got
a
galaxy
s5
here.
So
let's
see
what
this
particular
view
looks
like
on
a
Galaxy
s5
pixel
to
iPhone
6,
7,
8
I
typically
view
everything
at
a
hundred
percent,
because
that's
going
to
be
the
most
accurate
that
fail.
A
B
A
A
So
you
can
use
this
to
view
different
elements
on
the
page
there
padding
their
margin
and
as
you
hover
over
the
different
elements
on
the
page,
you'll
notice
that
the
developer
console
is
actually
highlighting
the
element
in
HTML.
So
once
you
click
that
you'll
be
able
to
see
the
element.
So
we
know
this
is
a
div
with
a
class
of
commits
GL
responsive
table
robe.
So
this
is
a
pipeline
table
row
that
we
render
on
this
particular
view,
and
if
you
go
to
the
right,
you
will
notice
that
we
have
styles.
A
So
these
are
actually
the
styles
that
are
pulled
from
our
actual
product,
our
code
and
you
can
switch
on
and
off
the
different
styles
to
see
how
it's
gonna
affect.
So
this
particular
table
row
has
a
border
bottom
for
each
element.
So
if
we
take
that
off,
you
could
say
okay
well,
this
is
would
look
like
without
that
you
can
adjust
padding.
So
it
looks
like
here
we
have
padding
top
and
bottom
of
16
pixels
and
left
and
right
of
0.
A
So
if
we
wanted
to
adjust
that
we
come
in
here
and
we
adjust
it
with
the
down
arrow
or
type
in
what
you
want
to
do
so,
let's
say
if
you
want
to
change
the
padding
top
and
bottom
to
10
pixels.
That
would
have
that
effect
and
also
remember
that
none
of
this
is
permanent.
So
you
can
do
what
you
like
in
the
browser.
If
you
refresh
all
of
this
will
disappear,
it's
not
having
any
effect.
A
You
also
can
click
on
elements.
You
can
right-click
them,
you
can
add
attributes.
So
if
you
wanted
to
add
an
attribute
of
I,
be
you
know
equals
hello.
You
can
do
that
at
different
classes.
So
if
there's
a
class
that
you
know
in
the
code
base
so
like,
if
Eve
was
one
up
here,
this
will
probably
look
really
terrible,
but
we
could
say
CI
table
that
actually
didn't
have
anything,
but
you
can
add
different
classes
to
see
different
things.
A
If
you
don't
want
to
see
an
element
on
the
page,
let's
say
we
just
want
to
get
rid
of
this
entire
pipe
lines
container.
We
can
right-click
it
and
say
hide
element,
so
that'll
get
rid
of
that
not
very
helpful,
but
for
that
particular
use
case.
But
if
you
wanted
to
see
what
it
looked
like
without
these
buttons,
you
can
do
that.
A
Also.
You
can
use
this
too
and
find
different
elements,
but
also
you
can
right-click
on
it
and
click
inspect
and
it'll.
Take
you
to
that
element
as
well,
and
then
you
can
right-click
and
say
hi
to
element,
no
get
rid
of
it,
but
it
actually
still
stays
in
the
Dom.
So
if
you
right-click
a
nun,
show
it
if
you
actually
want
to
get
it
out
of
the
Dom,
you
can
click
the
delete
button
and
it
actually
deletes
the
element
out
of
the
Dom.
B
Think
the
other
important
thing
is
the
live
CSS.
So
you
wanted
to
say,
for
example,
change,
margins
and
padding's
on
the
right.
You
just
find
the
element
in
the
CSS
and
you
can
increase
or
decrease
that
or
change
colors
fonts.
So
that's
normally
what
I
use
it
for
to
try
and
find
things
to
make
changes.
A
B
A
Just
wanted
to
show
that
feature
of
threat.
He
actually
wanted
to
do
something,
but
yeah
yeah
he's
completely
yeah.
That's
completely
right
so
say
if
we're
hovering
over
this
button,
what
he
was
saying
if
you
wanted
to
adjust
things
like
this
button,
has
a
margin
right
of
10.
If
you
want
to
go
to
margin,
write
40
pixels,
you
do
it
like
that.
If
you
want
to
take
off
display
flex,
just
uncheck
it
and
that's
pretty
much
it
so
like
we
have.
This
class
has
a
class
a
button.