►
From YouTube: Sideloading and Debugging Outlook Add-ins
Description
Courtney Owen, Sr Software Engineer, shows a demonstration of how to debug Outlook add-ins with Visual Studio Code.
For more information, please visit https://aka.ms/office-add-ins-docs
This video is taken from the Office Add-ins November community call. To join future calls, please download the series at https://aka.ms/officeaddinscommunitycall
Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog
A
Hello:
everyone,
I'm
courtney
on
from
the
office
developer,
experience
team
and
today
I'm
going
to
demo
outlook,
side,
loading
and
debugging.
So
what
do
I
mean
by
side
loading
side?
Loading
is
the
ability
to
automatically
register
an
add-in
without
having
to
go
through
the
manual
steps
in
the
past,
we've
supported
side,
loading
for
word
excel
and
powerpoint,
but
never
for
outlook,
and
so
right
now,
if
you
were
to
try
and
sideload
a
outlook,
add-in
project,
you
would
see
this.
A
You
would
get
an
error
saying.
Side
load
is
not
supported
on
this
host
and
that's
kind
of
not
ideal
for
developers,
because
they
want
to
be
able
to
run
npm
start
and
be
able
to
start
up
their
dev
server
side
load
their
ad
in
and
have
outlook
boot,
and
so
they
can
quickly
verify
that
their
add-in
is
up
and
running.
A
A
This
time
no
error
and
we
boot
outlook
and
show
you
this
warning
message.
This
warning
message
is
just
to
let
you
know
that
we're
going
to
register
an
add-in
and
we're
doing
this
for
security
purposes,
so
someone
doesn't
potentially
maliciously
install
an
add-in
on
a
user's
machine.
We
see
this
as
a
very
much
an
edge
case,
but
we
wanted
to
protect
the
user
nonetheless,
so
I'm
going
to
go
ahead
and
say:
okay-
and
I
have
my
add-in
now
now,
the
next
thing
I'm
going
to
show
you
is
debugging.
A
So
before
I
click
on
show
task
pane.
I
want
to
tell
you
a
little
bit
about
the
outlook.
Debugging
experience
in
the
past
or
lack
thereof,
outlook
uses
background
add-ins
extensively,
such
as
commands
and
background
on
send
the
problem
with
trying
to
debug
these
types
of
add-ins
is
that
their
webview
instance
can
expire
very
quickly
and
the
developer
doesn't
have
time
to
attached
the
debugger
before
the
webview
instance
expires,
so
you
can't
debug
it.
A
So
what
I'm
going
to
do
now
is
I'm
going
to
click
on
show
task
name
and
that's
going
to
bring
up
a
dialog
here
and
it's
telling
you
that
hey
we've
created
a
webview
instance
and
you
can
now
attach
to
it
before
we
execute
the
javascript
code.
So
I'm
going
to
go
over
to
vs
code
here
and
I'm
going
to
attach
debugger
to
that
webview
instance.
A
A
Once
again
we
hit
the
debugger
here.
Okay,
so
that's
cool!
So
that's
a
task
pane
add-in!
Now
I
want
to
show
you
the
background
add-in
case,
which
has
always
been
very
difficult,
if
not
impossible
to
debug,
unless
you
go
through
outlook
online,
so
in
this
instance,
I'm
going
to
run
a
command
and
once
again
it's
going
to
bring
up
that
dialog
and
I'm
going
to
go
over
here
and
I'm
going
to
select
this
instance
and
say:
ok
and
it's
going
to
hit
the
command
code
here
go
back
here.
A
I
can
execute
it
again
and
we
hit
it
in
the
debugger
again
now.
I
want
to
show
you
the
final
case
here,
and
this
has
always
been
the
one.
That's
really
never
been
possible
to
debug,
and
this
is
the
background
on
send
case
now
the
background
on
send
case
once
the
javascript
code
executes
it
expires.
The
webview
instance
expires
immediately.
A
There's
no
possibility
that
you're
going
to
be
able
to
attach
the
debugger
in
time.
So
I
have
a
ad
in
here.
That's
going
to
run
that
validates
that
this
email
is
sendable,
and
this
is
a
test
account
I'm
using
here.
So
this
is
not
my
official
outlook
account
and
I'm
going
to
click.
Send
it's
going
to
bring
up
a
dialog
here,
so
you
can
attach
the
debugger.
A
So
I'm
going
to
go
back
again
and
I'm
going
to
attach
to
this
instance
and
I'm
going
to
go
okay
and
it's
going
to
hit
the
break
points
for
my
validate
sendable
function
here
and
I
can
step
through
this
code
and
then
you
notice
that
the
debugger
detaches
right
away,
that's
because
the
webview
instance
has
officially
expired.
So
had
we
not
brought
up
that
dialogue,
we
never
would
have
been
able
to
attach
to
it
now.
One
thing
I
want
to
show
you
that's
really
nice
about
this
side.
A
Loading
is
that
I
can
make
a
change
to
my
add-in
and
I'll
be
able
to
see
that
change
right
away
without
having
to
go
through
the
cumbersome
manual
steps
of
registering
an
add-in.
So
I'll
close
this
down
here
and
I'm
going
to
go
to
my
manifest
and
I'm
just
going
to
add
the
word
demo
in
here-
save
it
and
then
we'll
sideload
again.
A
Warns
you
again,
we
go
back
to
our
test
pane
here
and
we
see
the
new
title
here
demo
in
here.
So
this
is
a
really
nice
way
to
be
able
to
make
quick
changes
and
verify
them
without
having
to
go
through
all
those
manual
steps
such
as
get
add
in
my
add-in,
add
a
custom
ad
and
add
from
file
that
can
get
to
be
really
tedious
and
time
consuming
for
a
developer.