►
From YouTube: PnP Webcast - Debugging SharePoint Framework Solutions
Description
PnP Webcast around the options on debugging your SPFx solution in local workbench, online workbench on within the actual production sites. We cover different options and what are their benefits or when they should be used.
More details on covered content and references to additional documentation from http://dev.office.com/blogs
A
Welcome
to
shipment
and
practices
webcast
and
system,
we
can
talk
about
how
to
do
debugging
of
SharePoint
framework
solutions
or
what
are
your
options
on
doing
the
the
debunking
when
you're
doing
development
of
SharePoint
framework
solutions
so
including
client-side
web
parts
and
SharePoint
framework
extensions?
Now
this
isn't
really
around
how
to
do
an
f5
in
visitors
to
their
code
or
whatever
is
her
editor?
A
This
is
more
around
the
actual
debugging,
so
you
want
to
make
sure
that
you're
able
to
step
through
the
code
and
what
are
the
options
of
doing
that
depending
on
what
are
you
actually
building
within
your
wet
one?
My
name
is
Reuben
I'm,
a
Senior
Program
Manager
from
SharePoint
engineering
and
with
me
today,
responsible
of
the
demo
will
be
Molly,
waldek
mastercards,
so
Baltic
will
do
the
wiki
interest
as
well.
B
A
So,
let's
have
one
more
slide
and
before
we
actually
go
to
the
demo,
we
kind
of
keep
this
relatively
simple
and
relatively
fast,
so
your
you
can
easily
follow
up
on
on
what
are
we?
What
are
the
options
and
easiest
way
to
actually
explain?
That
is
really
to
show
you
that
in
practice,
but
let's
actually
have
a
wonderf
light
kind
of
going
through
the
different
options
and
considerations
on
this
now
with
chip
and
framework
solution,
we
do
have
a
local
workbench
and
we
do
have
a
sharepoint
online
hosted
workbench
as
well.
A
Now
these
are
for
client-side
web
parts.
So
at
the
time
of
the
video
getting
recorded,
these
do
not
support
either.
One
of
them
are
not
supporting
a
SharePoint
framework.
Extensions
we're
looking
into
having
that
support
at
some
point
so,
depending
on
when
you're
watching
the
video
SharePoint
framework
extension
support
might
be
in
the
hosts
effort,
bands
or
even
in
a
lot
in
a
local
workbench.
A
The
local
reference
gives
you
the
opportunity
of
doing
SharePoint
framework
solution,
even
though
you
would
be
in
an
offline
scenario,
so
you're
basically
able
to,
for
example,
see
the
rendering
of
the
web
part,
but
you
can't
really
connect
to
the
SharePoint
data,
because
you're
running
actually
in
the
local
host,
so
you're
not
running
in
the
context
of
share
the
hosts
departments,
on
the
other
hand,
is
running
in
the
context
of
SharePoint.
So
you
will
the
inside
of
the
sharepoint
online.
A
So
therefore
you're
able
to,
for
example,
get
access
on
shipment
lists
and
user
data
and
all
that
context,
so
you
can
and
then
actually
do
development
more
complex
scenarios
within
your
web
board.
So
quite
often,
what
we've
seen
and
I
think
bother
can
actually
have
confirmed
this
one.
He
is
development
as
well,
and
local
workbench
isn't
actually
that
widely
used,
because
you
actually
quite
often
need
to
access
your
point.
Data
and
people
are
being
quite
lazy.
A
A
B
A
So
I
always
wondered
who's
actually,
the
way
the
wet
part
or
stock
whiteboard
guy.
But
it's
actually,
you
know
cool
now
at
the
second
options
on
the
SharePoint
framework
extension.
So
if
you're
doing
shape
and
framework
extensions,
placeholders
or
field
customizers
or
commonly
story
of
common
sense,
you
are
actually
doing
testing
on
the
modern
UI.
So
you
are
actually
doing
testing
and
debugging
kind
of
against
the
live
site,
so
to
say,
or,
like
page,
is
actual
betas.
A
The
modern
experiences
so
loading
your
custom,
Java
scripts,
your
developed
in
development
JavaScript
on
top
of
the
production
pages
and
then
you're
able
to
see
how
your
functionality
is
behaving
and
that's
actually
super
cool.
This
is
something
which
we
introduced
in
as
part
of
the
SharePoint
framework.
A
station
release,
which
was
1.3
version,
wasn't
it.
It
was
one
country
in
correct
temper
last
year,
releasing
so
many
versions,
I
can't
remember
which
one
knows
where
well.
A
So
therefore
you're
able
to
then
see
how
your
web
part
behaves
in
the
context
of
the
modern
urs,
because
there
are
scenarios
there's
functionalities
which
are
not
supported
by
the
local
hosted,
fragments
or
the
local
workman's.
So
you
might
need
to
do
this
to
ensure
that
your
web
part
is
behaving
properly
without
the
requirement
of
deploying
the
web
part
to
the
catalog
which
to
say
a
great
great
great
improvement,
anything
what
I'm
missing
there
wallak.
A
Absolutely
not!
Yes,
you
covered
it
all
excellent
cover.
It
absolutely
everything
around
the
ship,
one
favorite
solution,
debugging
now,
there's
over
there's
a
lot
of
a
lot
of
different
areas
on
this.
You
have
on
frame
resolution
debugging,
but
what
we
basically
wanted
to
do
is
cover
the
two
main
options
and
show
you
the
basics
to
get
started
in
practice.
There
are,
then,
additional
tricks
and
tools
and
tips
which
are
partly
documented
in
the
official
docks
and
part
of
the
document
that
also
in
the
in
the
individual
person's
blog
post.
A
So
please
have
a
look
at
those
as
well.
It's
like
f5
debugging,
starting
and
all
of
that
absolutely
supported
which
have
one
favorite
solution,
but
let's
try
it
on
so
to
say
those
three
options
which
we
show
on
so
on
the
previous
slide
and
let's
have
a
live
demo
on
seeing
this
in
practice,
so
all
deck
take
it
away
all.
B
Right
so,
let's,
let's
have
a
look:
how
debugging
SharePoint
femoris
solutions
would
look
like
in
practice,
I've
created
a
project
with
an
extension
and
a
web
part
and
I
didn't
change
anything
about
the
code.
That's
not
the
point.
The
point
is
how
you
would
deduct
them
in
the
different
options
that
we
have
available.
So
first,
let's
start
with
the
extensions.
A
Actually,
well,
let's
just
quickly
explain
this
these.
These
are
the
things
in
our
old
documentation,
in
the
guidance
with
before
the
RTM
version
of
the
extensions
and
I'm
not
sure
if
we
updated
the
section
and
the
dogs
we
require
that
people
to
use
query
parameters,
so
the
config
or
the
service
of
Jason
actually
makes
the
curve
the
use
of
query
parameters
not
needed
anymore
yeah.
B
I
mean
they're
still
there,
but
you
don't
need
to
craft
a
URL
by
yourself.
You
just
launch
it
at
it
and
it
works
right.
So
here
I
am
doing
it
on
a
Mac,
but
it
works
exactly
the
same
on
Windows,
so
here
I
would
run
gulp
surf
write
because
I
want
to
test
my
my
my
extension
and
then
I
will
add
a
a
an
argument
that
will
say:
config
equals
and
after
that
I
will
paste
the
name
of
my
surf
config.
That
is
tied
to
my
extension.
B
B
Career
I,
because
does
the
default
URL
that
you
will
get
when
yeoman
creates
project.
Well,
it
doesn't
know
that
you
were
off
your
are
tenant
right,
so
it
will
give
you
default
URL
right
and
here
what,
as
is
you,
you
serve
sense,
a
bessa.
Originally
we
told
you
to
craft
all
of
this
URL
by
yourself
at
properties
and
if
you
would
grab
that
and
paste
it
as
a
URL,
your
site
that
will
work
right.
So
here
I
am
in
and
in
a
tenant
you
will
get
a
warning.
B
You
click
through
it
and
we'll
get
get
back
to
that
and
it
works
you're
at
my
extension
shoot
load.
If
it
doesn't,
then
maybe
I
did
something
wrong
in
the
code
anyway,
it
should
be
maybe
right
so
using
its
wrong.
Yes,
I'm,
holding
it
wrong
right,
but
that's
the
whole
point
right
or
maybe
let
me
just
try
one
more
thing:
debugging
life-size
home.aspx.
Maybe
it
requires
the
full
name
site
pages
enough
sites
side
pages.
Maybe
it
requires
the
full
URL
of
the
page
I.
Don't.
B
B
So
if
we
were
to
change
this
to
console
or
window
alert
hello
from
SPF
X
and
here
will
be
live
debugging,
that's
always
the
best
part
of
a
demo
right.
Isn't
it
yeah
three,
two
one,
let's
check,
if
that's
already
refresh
it
should
be
shouldn't.
Take
that
long
yeah.
There
was
an
error
there,
but
six
now
refresh
the
page,
slow,
debug
script.
Yes,
there
you
go,
there's
a
message
so
I'm
not
holding
it
wrong
and
just
to
prove
you
that
it
works.
Let's
see
if
we
can
use
it
without
the
page
name.
B
Remove
this
part,
it's
still
loading
and
it's
working.
Okay.
Okay,
so
that
part
is
fine
right,
so
you
could
craft
that
URL
by
yourself.
But
if
you
will
add
this
URL,
you
were
off
your
page
in
which
you
would
like
to
test
your
extension
to
your
surf
config.
Let
us
stop
this
one
and
go
back
to
our
code
editor
and
go
back
to
the
surf
config
and
let's
change
the
URL
of
this
page.
B
Because
does
a
URL
of
the
page
on
which
we
want
to
test
that,
and
that
could
be
your
own
decide
or
we
can
add
it
side
pages,
slash,
home.aspx,
save
it,
and
then
we
will
rerun
the
same
command
right.
So
we'll
go
back
to
command
line,
and
here
we'll
run
gulp
serve
con
say
let
me
increase
the
font
of
that
a
bit.
So
it's
easier
to
see
for
everybody.
B
Gulp
serve
this
config
debugging
banner
enter,
and
now
we
will
run
on
the
correct
URL.
It
will
still
open
in
their
own
browser,
prompting
me
to
log
in,
but
if
I
grab
this
URL
from
here
and
use
it
in
Chrome
because
I'm
already
authenticated
here,
let
me
just
replace
the
whole
URL
paste
it
here
from
command
line.
I
will
get
the
warning
and
it's
there
yeah
right.
So
that
way,
you
don't
need
to
craft
that
yura
by
yourself.
You
can
just
easily
run
a
command
and
it
will
give
you
exactly
the
right
URL.
B
A
A
A
B
But
but
but
if
you
had
a
project
with
only
a
webpart,
you
would
see
the
local
wall
orbits
right
or
you
won't
see
it
in
our
case,
because
when
you
add
extension
extension
replaces
default
config
with
the
same
as
the
one
for
extension.
So
so
you
have
exactly
the
same
thing
twice,
but
now
by
default
you
cannot
access
the
Workmen's
right
and
you
could
you
can
change
it
still.
You
can
say
I
want
this
to
point
to
a
local
word
branch.
B
So
this
will
be
this
part
and
that
would
be
localhost
for
three
two
one
time
I
believe
that's
workbench
dot
HTML.
If
I
record
correctly,
we
can
check
it
here.
If
we
scroll
to
temp,
we
will
see
workbench
on
HTML,
so
let
say,
save
out
save
this
stop
restart
and
we
should
see
now
local
workbench
there
you
go
right.
So
this
way
you
can
easily
switch
back
and
forth
between
the
config
and
I
could
add
the
web
part
that
I
have
here
well.
B
Yes,
so
does
the
localhost
and
exactly
here
you
can
start
developer
tools
attach
breakpoints,
basically
do
debugging
of
the
weapon
here,
even
if
an
in
an
offline
case
or
if
you
would
build
an
API
or
build
a
web
part
that
uses
third
party
API
that
do
not
require
the
context
of
a
site
yeah
if
you
do
build
a
web
part
that
requires
the
context
of
a
side.
Well,
you
can
test
it
in
the
workbench
that
is
part
of
your
tenant,
and
for
that
you
could
have
another
config
here.
B
B
B
B
B
Imagine
that
you
want
to
test
a
full
bleed
experience
of
a
web
part
currently
today,
when
we
record
a
video
well,
the
word
which
doesn't
support
it
or
if
things
are
things
like.
Imagine
that
the
background
of
the
page
and
you
receive
would
be
black.
Well,
that's
that
doesn't
show
inside
the
word
which
either
imagine
that
you
wanted
to
test
the
workbench.
How
that
work
with
other
elements
on
the
page?
B
You
cannot
do
that
inside
orange
right,
so
there
are
different
reasons
for
which
you
might
want
to
test
the
web
part
actually
on
the
page,
and
you
can
do
it
right.
So
there
are
a
number
of
ways
in
which
you
can
do
that,
and
the
one
is
to
use
exactly
the
same
approach
as
you
would
with
extensions
and
I
have
no
idea.
Why
that's
popping
up,
because,
let
me
refresh
the
page
I
am
not
attaching
anything.
I
am
not
attaching
any
query.
Parameters
and
I
still
get
worried.
I
can
imagine.
There
is
cookie
somewhere.
A
B
B
B
And,
and
in
here
we
can
use
exactly
the
same
approach
right
so
here
we
have
the
host
or
invent.
Oh,
we
can
copy
exactly
that
thing.
We
can
create
a
new
comic
config,
which
would
be
modern,
page
modern
h,
and
we
can
grab
that
you
grab
the
URL
of
this
page
and
we
don't
need
to
add
anything
else
because
the
manifest,
let
me
just
do
it
correctly,
because
the
manifest
will
be
loaded
already
by
itself.
So
we
do
that
and
then
we
will
start
the
config
named
modern
page.
B
So
we
go
to
here
golf
serve
this
config
modern
page
and
we
will
get
a
URL
that
will
open
again
in
our
own
browser,
but
we
don't
care
about
it
and
we
copy
it
from
here
stops
crying
we'll
grab
this
one
and
when
I
will
pays
this
URL
will
get
again
the
warning
and
will
get
back
to
that
in
just
a
moment,
and
now,
when
I
edit
the
page,
so
I
am
now
on
a
modern
page
right.
This
is
not
a
warbird.
B
This
is
a
normal
mountain
horn
page
in
here
I
can
look
for
debugging,
and
here
I
see
my
web
part
that
I'm
building
locally-
and
I
can
just
edit
to
the
page-
and
I
can
test
all
experiences
full-bleed.
I
can
test
themes.
I
can
test
it
with
other
elements
on
a
page
just
as
if
it
was
a
regular
web
part
deployed
inside
the
site,
Jim
all
right.
B
Correct,
yes,
so
allow
debug
scripts
and
that's
important
part
Y
right,
because
in
theory,
you
could
use
this
approach
to
test
the
web
part
on
your
life
tenant
in
production.
The
one
thing
that
you
should
keep
in
mind
is
at
this
point:
you
load
your
local
scripts
that
haven't
been
approved,
verified
by
anybody.
Nobody
has
checked
whether
they
are
in
accordance
to
your
compliance,
East,
others
and
right.
B
A
Be
responsible
or
think
about
when
somebody
sends
you
a
transcript
file,
saying
hey,
do
the
following
step
and
just
put
it
in
your
site
by
loading.
This
query
parameter
and
ignore
all
of
these
warnings-
and
you
know
it
says
if
you
don't
know
what
you're
doing
click
here,
if
ignore
it
that
one
as
well
and
then
load
the
thing.
So
basically
what
we're
trying
to
say
here,
the
warnings
and
everything
else
for
the
developers.
This
is
like
yeah.
A
This
is
just
for
the
sake
of
its
no,
but
these
warnings
are
there
to
avoid
the
situation
that
somebody
just
randomly
follows
up
without
understanding
what
they're
doing
stuff
and
guidance
from
internet
which
could
be
wrong
and
which
could
be
then
impacting
or
adding
a
JavaScript
to
be
executed
within
your
site.
Using
your
permission,
so
these
are
really
there
to
avoid
that
situation,
and
this
isn't
really
anything
specific
for
SharePoint,
because
exactly
the
same
kind
of
loading
and
site
learning
capabilities
are
with
other
other
service
providers
as
well.
Yeah.
A
Which
is
really
cool,
because
now
you
can
actually
then
see
the
behavior
of
the
web
part,
even
though
it's
still
hosted
from
a
local
host
related
on
the
warnings.
By
the
way
we
can
actually
quickly
do
this.
Can
you
do
open
up
the
dev
tools?
You
can
actually
see
the
same
warning
in
the
console
in
here
as
well.
The
reason
why
these
are
here
this
is
actually
the
Facebook
does
exactly
the
same.
So
it
gives
you
this
kind
of
a
warning.
Please
please,
please,
please
don't
do
anything.
A
B
A
Why
did
you
format
that
your
disc
doesn't
make
any
sense?
These
are
similar
kind
of
warnings
trying
to
make
sure
that
people
think
before
they
actually
performed
actions.
Well,
I
think!
That's
it
welcome
this
one.
So
no
great
thing
you
learned
something
new
I
learned
something
new
everybody's
learning,
hopefully
something
every
system
back
on
the
slide.
So
for
a
a
summary
and
close-up
the
webcast.
A
Thank
you
yep
excellent,
so
talk
to
you,
baltic,
for
that
demo,
and
that
was
really
around
showing
the
local,
workbench
and
and
kind
of
a
like
black
mentioned
in
during
the
demo
as
well.
The
local
events
is
really
useful
and
you
can
absolutely
do
actually
even
end-to-end
development
and
local
work
plans
if
you
are
hitting
external
api's
like
the
way.
The
web
part
is
a
good
example
or
if
you
would
be
hitting
the
github
api
sore
non
sharepoint
online
IV
eyes.
Now.
A
If
you
need
to
hit
and
get
data
from
sharepoint,
then
you
absolutely
need
to
at
least
go
to
the
hosted
workbench
where
you
can
then
actually
access
the
rest
api
sand
information
as
you
haven't
online,
but
then
that
doesn't
really
support.
All
of
the
scenarios,
so
in
the
case
of
extensions
as
an
example,
you
need
to
anyway
to
development
and
debugging
against
actual
modern
8's
or
lists
lists
and
model
pages,
and
the
same
option
is
then
available
for
client-side
web
parts
as
well.
A
Please
have
a
look
on
our
official
documentation
that
is
referenced
in
the
in
the
webcast
notes
in
the
video
notes
as
well
so,
and
please
give
us
also
feedback
if
there
are
room
for
improvements
around
these
topics,
please
use
the
SPF
docs
issue
list
for
letting
us
know
the
idea
of
sort
of
improving
the
documentation
but
well
deck
anything.
What
I'm
actually
missing
around
her
to
be
yeah.
B
Say
is
that
you
should
definitely
keep
in
mind.
There
are
three
options:
right:
keep
them
in
mind
that
you
can
host
your
or
you
can
test
web
parts
in
local
garbage,
hosted
organs
or
directly
in
on
the
page
or
in
the
list,
and
with
that
different
scenario,
support
different
abilities
and
it's
important
for
you
to
know
that
there
are
all
three
available
to
you.
Absolutely.