►
From YouTube: PnP Webcast - Debugging SharePoint Framework solutions
Description
PnP Webcast around Debugging options with SharePoint Framework solutions. More details around covered content from http://dev.office.com/blogs
A
Welcome
everybody:
this
is
chef
on
balance
and
practices.
The
webcast
and
this
time
we're
going
to
talk
about
how
to
do
debugging
when
you're
doing
SharePoint
framework
solution
development,
and
so,
if
you're,
doing,
for
example,
client-side
solution,
client-side
webparts
solution
development
on
top
of
the
SharePoint
framework,
how
can
you
do
debugging
within
a
Visual
Studio
code
or
within
a
browser?
And
today
and
the
primary
presenter
will
be
Elio
before
we
go
to
the
illios?
My
name
is
Sarah
Vaughn
and
I'm.
A
A
Super
super
classic
SharePoint
training
company
for
years
already
you
to
you
anyway,
so
I'll
be
stepping
slide
and
I'll.
Let
Ilyas
actually
do
the
presentation
and
I'll
jump
in
and
ask
questions
that
we
know
then
as
needed,
but
this
should
be
interesting
topic
and
I.
Think
we
have
a
nice
configurations
and
solutions
to
people
to
take
advantage,
but
I
think
that's
it
Ilya.
Please
take
it
away.
Okay!
Thank
you.
B
So
as
everything
in
SharePoint
framework
itself,
its
client-side
based,
yes,
in
my
opinion,
three
options
of
going
away
with
debugging,
so
the
first
option
could
be
that
you
just
start
opening
your
browser
and
start
debugging
over
there.
Now,
it's
not
that
nice
way
of
working,
because
you
first
need
to
find
out
the
right
file
start,
adding
your
breakpoints
and
Selam.
Another
option
you
can
go
for
is
using
the
debugger
statement.
B
If
you
did
some
JavaScript
development
in
the
past,
you
will
probably
know
that
there
is
a
debugger
statement
which
you
can
use
in
your
code
so
that
you
don't
have
to
specify
these
breakpoints
and
your
browser
is
immediately
going
to
stop
sound,
exactly
deadline.
Now,
that's
one
thing
or
two
things
you
can
do
and
the
majority
will
love
to
just
keep
debugging
their
code
in
the
Visual
Studio
editor
and
there's
a
way
to
do
that,
and
we
are
going
to
show
this
during
the
webcast
yeah.
A
A
Up
before
you
go
forward
on
this
one,
so
obviously,
on
the
visual
studio
code,
we're
kind
of
a
maturity
of
the
especially
new
client-side
developers
are
probably
using
visitors
to
their
code
if
you're,
using
whatever
alternative
editor,
many
of
them
actually
have
the
similar
capabilities
as
well,
so
you're
able
to
essentially
kind
of
a
start
debugging
with
an
f5
in
the
in
the
tooling
as
well.
But
in
this
video
we'll
concentrate
on
Visual
Studio
code,
no
doubts,
and
maybe
one
note
on
the
on
the
using
of
the
debugger
statement.
B
Let's
quickly
go
in
a
quick
demo
of
using
that
debugger
statement,
so
what
I
created
I
just
created
a
small
web
part
that
is
going
to
call
the
Search
API
in
case
when
I'm
online,
when
I'm
using
the
local
workbench,
then
I'm
just
going
to
use
a
mock.
So
let's
first
start
up
our
web
part
I'm
going
to
use
the
integrated
terminal
of
Visual
Studio
code
and
I'm
just
going
to
run.
Go
p--
serve
no
browser
with
a
no
browser
data
as
flash.
B
B
Chrome
window
I'm
going
to
refresh
going
to
at
my
web
box,
and
now
I
see
a
web
part
over
here,
so
I'm
going
to
show
me
anything.
Why
is
because
I
have
to
specify
a
couple
of
properties
now
in
case
if
there
is
something
going
on
or
if
you're
writing
your
web
part-
and
you
just
want
to
know.
Oh,
are
these
properties?
I'm
I
should
really
be
retrieving.
You
can
just
create
a
debugger
statement
Engels.
B
B
A
B
Of
course,
I
don't
see
anything
right
now.
It's
not
triggering
that
debugger
statement.
Why?
Because
I
don't
run
or
I
have
my
developer
tool
not
yet
open
to?
First,
let
me
open
my
developer
tools.
If
you
just
press
f12
in
your
Windows
machine,
it
will
open
up
this
chrome
developer
tools
or
in
any
other
browser,
and
when
you
refresh
again
it
will
exactly
stop
on
that
debugger
statement.
So
you
can
press
them
and
go
on,
but
you
can
also
check
which
properties
do
I
have
okay
right
now,
I
only
have
the
description.
I
can
continue.
B
I
can
just
say:
I
want
to
specify
the
exact
keyword,
I'm
looking
for
so
apply,
and
if
I
now
check
back
I
see
that
I
have
a
keyword
set
to
do
X,
which
is
the
same
as
I
specified
over
here,
and
you
can
use
the
debugger
statement
wherever
you
want
in
your
code.
Pretty
easy.
It
was
nice
forward.
Yeah
just
keep
in
mind,
always
remove
that,
otherwise
it
will
keep
breaking
over
there.
So
I
just
removed
it.
When
I
refresh
it
again,
it
doesn't
stop
anymore.
B
So
when
going
to
production,
just
remove
it
before
going
to
production,
so
that's
the
quick
and
easy
way
so
there's
another
way
and
the
other
way
is
for
debugging
inside
Visual
Studio
code
itself.
When
you
start
using
Visual
Studio
code
and
want
to
start
debugging
in
there,
you
first
need
to
start
using
or
start
installing
a
debugger
for
at
the
moment,
that's
the
only
one
that
is
supported.
B
There
is
a
page
from
the
visual
studio
code
team
that
mentions
that
H
is
going
to
be
supported,
but
at
the
moment
we
can
only
do
divider
for
a
user
debugging
for
Chrome.
So
just
go
to
visual
studio
code.
The
extension
step
look
for
debugger
for
chrome,
install
it
it's
going
to
ask
you
to
reload
the
page
or
reload
the
window.
Once
it's
reloaded,
you
can
start
using
it.
Now.
How
do
you
use
it?
You
have
to
create
that
launch
dot
JSON
file.
B
If
you
ever
divert
something
in
Visual
Studio
code,
you
might
have
already
seen
it
that
you're
the
bigger
file,
which
is
specifying
which
debugging
tasks
you
can
configure
inside
Visual
Studio
code
over
here
on
the
slide.
You
already
see
an
example
one
so
in
this
case
you're
going
to
create
a
local
host.
Oh
sorry,
for
that,
you
could
go
in
to
create
a
local
workbench
debugger
talk
which
is
attaching
to
Chrome,
which
is
a
launch
request.
So
it's
going
to
launch
Chrome
and
it's
going
to
open
up
this
URL
with
any
quite
interesting
thing.
B
The
runtime
argument
is
going
to
specify
that
it's
going
to
open
Chrome
with
a
remote
debugging
port.
What
is
the
remote
debugging
port
when
you
open
Chrome
without
the
remote
debugging
port
Visual
Studio
cannot
attach
to
Chrome
to
read
out
all
the
JavaScript
cells
so
by
just
specifying
the
debugging
port,
a
chrome
is
going
to
open
up
with
exactly
that
port
opened
and
Visual
Studio
is
going
to
attach
to
that
port.
So
it
can
see
all
the
JavaScript
files
that
are
getting
loaded
on
your
page.
B
One
thing
we
have
to
do
is
specify
all
the
source
parts
of
methods
in
combination
with
your
root
folder
in
your
project.
So
what
is
vertex
vertex
is
the
bundler
that
is
being
used
inside
shape
and
framer,
and
it's
going
to
dwindle
all
these
JavaScript
files
that
are
transpiled
from
typescript
into
one
giant
bundle,
but
the
source
mappings
will
be
in
place
in
your
browser.
Now
I
didn't
invent
these
paths.
These
thoughts
are
coming
from
your
Chrome
browser
or
from
the
pack
itself.
B
When
you
open
your
developer
tools
and
go
to
sources,
you'll
find
a
read-back
source
over
there
and
we
can
go
in
into
chrome
itself.
When
I'm
going
to
open
my
developer
tools
again,
I
should
see
a
backpack
source.
Folder
and
I
can
just
go
in
and
check
there
all
the
files
are
located.
So,
yes,
it's
a
really
long
list
area.
A
B
So
what
I
was
explaining
on
the
slide?
First,
you
have
to
install
the
chrome,
debugger
so
open
the
extension
step
to
look
for
debugger
for
chrome
when
you
didn't
have
installed
it.
Yet
it
will
just
show
you
an
install
button
like
this.
You
click
on
it.
It
will
install
just
reload
it
once
it's
reload
it.
You
can
open
the
plugins
tab
in
my
case,
I
already
have
one,
but
if
you
click
on
the
gear
menu,
it
will
open
a
new
launch
file
and
you
have
to
specify
the
following
configuration.
B
A
B
Yeah
and
one
thing
each
and
every
one
has
to
do-
is
update
this
sharepoint
URL
to
its
own
tenant
that
you
can
use
it
against
you
on
one.
So
I
just
copy
and
paste
this
into
my
one.
So
I've,
a
local
host,
one
n
ivanhoe
stood
against
sharepoint
I
can
choose
whatever
I
want
to
start
using
so,
for
instance,
I
use
the
local
one
and
when
I
press,
a5
or
I
just
start
over
here
is
going
to
start
up
a
Chrome
browser
with
that
remote
debugging
portal.
B
Now
one
thing
to
mention
on
Windows,
if
you
already
opened
Chrome,
it
could
be
that
there
is
a
problem
with
the
remote
debugging
pork.
So
first
close
all
these
browsers
or
even
yeah
the
background
processes
from
Chrome,
and
then
you
can
start
using
that
I
had
some
problems
with
this
on
my
Windows
machine
in
in
the
pasture.
So
let
me
just
add
a
webpart
same
report
again
type
in
some
keywords,
so
everything
is
rendering
correctly
and
now
head
over
to
visual
studio
code.
B
Let's
dive
in
into
you,
for
example,
the
component.
So
this
is
my
component
file,
and
over
here,
I
can
just
tell
I
want
to
diverge
at
this
exact
spot.
Go
back
to
my.
So
this
is
my
wrong
one
and
refresh
a
browser,
and
it
should,
as
you
can
see,
it
should
stop
over
there,
and
now
you
can
see.
Okay,
I
can
see
the
state
I
can
see
the
columns,
so
it's
not
retrieving
any
results
yet
so
it's
still
in
the
loading
phase
and
when
I'm
coming
back
right.
B
And
now
I
can
see,
I
have
results,
I
can
open
my
results
and
I
can
exactly
see
what
I'm
expecting
and
what
I'm
going
to
return
on
my
screen.
So
the
same
can
be
done
when
you
are
going
to
work
with
your
sharepoint
online
site.
So
if
I
just
switch
to
host
its
workbench,
let
me
stop
this
one
and
just
read
the
five
could
be
that
I
have
to
again,
because
it's
a
new
browser
scores
just
into
my
password.
B
So
exploding
some
PowerPoint
files-
let's
go
back
what's
running
behind
the
scenes,
is
a
search
service,
I
created
and
over
here.
For
example,
I
can
see
when
my
data
is
retrieved
I'm
going
to
call
the
process
result
service
which
is
going
to
check
if
there
are
results
and
Selam
coming
back
from
search
again
wrong
browser
refresh.
B
B
There
are
a
couple
of
results
and
each
results
had
a
as
a
couple
of
cells,
so
you
can
see
which
properties
you
are
retrieving
from
search
after
quite
nice,
and
it
gives
you
the
complete
debugging
that
you
can
do
like
processed
and
and
so
on.
So
you
can
see
what
is
going
to
happen,
which
things
are
being
executed
and
home-tree
so
great
experience.
So
a.
A
A
A
Absolutely
so
you
can
easily
access
that
information
or
you
can
have
a
look
on
the
steps
from
the
video
as
well,
except
that
the
chase
and
the
launch
Jason
file
definition
is
probably
is
just
a
copy-paste
from
the
from
that
article,
but
I
think
that
sums
up
the
webcast
so
any
last
words
from
your
side.
Ilya.
Are
you
using
this
for
every
single
time?
You
are
doing
any
development
all.
A
The
authorities
and
so
on-
and
you
might
actually
it's
debatable-
why?
Why?
Wouldn't
we
have
this
by
default?
Actually
within
the
yeoman
template
output?
But
this
is
users
to
their
code,
specific
thing
and
some
of
the
people
are
using
slightly
different
platforms
or
slightly
different
editors
as
well
so
doing
this
manually
on
top
of
the
yeoman
template,
it's
not
a
massive
deal.
It
only
takes
like
two
minutes
to
complete
or
even
in
one
minute,
if
you,
as
long
as
I,
have
to
stuff
open,
so
not
a
massive
deal
but
I
think
that's
it.
A
A
Integration
is
the
experience
it's
almost
like
within
the
if
you're
a
classic
ship
one
developer,
it
feels
like
you're
doing
a
in
quotes
a
form
solution,
development
or
a
server-side
development,
because
you
can
debug
directly
is
a
little
bit
in
your
IDE,
but
we'll
add
two
links
for
all
of
the
resources
and
Thank
You
Ilya,
one
more
time
and
we'll
come
up
with
a
new
web
cast
sooner
or
later.
Thank
you.
Okay,.