Collaboration made easy with Visual Studio Live Share

hi I'm Jon Chu a program manager on the
visual studio team today I'm here to
give you an overview of Visual Studio
Live share and how it can enable you to
more easily collaborate with your
teammates when developing your apps
whether you're working together in
person or in the same office working
remotely or from home or even across the
world you can use live share to get
real-time collaborative development from
the comfort of your favorite tools let's
dive into the demo I have here a node.js
guestbook app that I've been working on
I was looking into a boat that was
causing the guestbook to not display any
of the profile pictures that the people
had signed in it I think I fixed the
issue but before I push this up to my
team's repo I want to have a colleague
do a review of my code so I'm gonna use
live share to do that review in vs code
I can click on the live share icon on
the Left activity bar to open up the
live share view late-- I can click start
collaboration session and that will
start sharing out my code additionally
as you can see in the viewlet I could
have joined a session or I could have
started a read-only collaboration
session this is useful if I wanted to
share my project without having
unnecessary at it's made or in the case
of an interactive lecture I could share
this out with students to follow along
live share supports up to 30 guests
joining a session after the code has
been shared I get a link to the session
that I can share out with my colleague
additionally you'll notice in the
viewlet that are a couple things that I
have already been shared I have a shared
server for the localhost 3000 for the
run end as well as a terminal with the
node that I did when I started the app
you'll see that there's a listing for
audio call and that I could start an
audio call this is because I have the
live share audio extension installed
with this extension I can start up an
audio call that is tied to my live share
session with that any guest joining my
session from v/s code and that has the
extension installed can join in to this
call and we can communicate about what
we are working on with the link let me
send it to my teammate JC and have him
looked at my code so let me message him
on teams
on his side he'll get the link and it
will open up his browser from there it
will detect that he has live shirt
installed on his machine and launch
Visual Studio and this will join him in
to my code
hey JC thanks so much for looking at my
code no problem always happy to help
now that Jonathan is joined into the
session the first thing you'll notice is
that on both of our screens we can see
each other's cursors and highlights so
as I highlight and move around the file
he can see on his editor and I can see
his movements and highlights on my side
as well additionally JC is set to follow
me so as I scroll through the file or
change files his editor follows along
with me so in this file let me show you
I made this change over here to make the
title a little bit clearer alright that
change looks good but I'm curious to see
the set of changes that you've made
within this review and other files so if
I switch to the team Explorer team tool
window I can see that you've made some
changes as well as in header js-- also
in signature matrix jason guestbook grid
so let me click signature matrix and I
want to see add if you to know exactly
what you've changed in this file and so
once I enable the diff view I can see
that okay you've changed unshifted to
shift and I'm curious John why does you
made that change so yeah so while I was
looking into this issue
I found that unshipped wasn't actually
returning the right things that I needed
for the matrix so when upon changing it
to shift it looks like it fixed the
issue okay I guess that makes sense
now in addition to being able to see the
set of changed files that John has made
I can also leverage all of the language
services I would come to expect from
Visual Studio even though I'm looking at
his remote code so for example if I
wanted to see the definition of the
signatures variable out in general I
could simply right click and say peek
definition to verify that okay this is
in fact the set of signature data that
the application is running against and
therefore this changed to shift make
sense to me now
I'm also able to go and look at other
files independent of John so even though
I'm able to follow him as we showed
earlier I can also look and explore
ideas on my own so I'm gonna go to
guestbook Gradius and I'll toggle off
the diff view because I'm
curious to take a look at this with a
little bit more screen in real estate
and in addition to the navigation
capabilities that I get from his remote
language services I also get all of the
linting errors and diagnostic
information as well so I can immediately
see that this line has an error with it
and if I hover over I can determine that
it's because it's using a var when our
application is configured to use the
letter Const now beyond error
information and navigation I as a guest
in a live share session can also make
edits collaboratively so I'm going to
just change this VAR Const and as soon
as I start typing I get the completion
list once again as I would expect when
editing locally in Visual Studio even
though I'm able to work with John and he
can see these changes as well
so at this point John and I are in
different files and if I want to pull
his attention to see the change I've
just made I can perform a focus
operation which will send a request to
him to come and join me in this file so
that we can take a look at this change
together on my end I get a request for
that so I can click follow and that will
jump me to JC's location and I can see
what he's been talking about and see
what he's been working on alright John
so I think the changes that you made
look good and I just fixed the lingering
error that you had but I'm curious to do
a little bit of debugging and just make
sure that functionally the app still
works correctly
sure let's try debugging this app all
right so I think what I want to do is go
to signature matrix J s and actually run
this specific algorithm to make sure
everything is good so I'm gonna set a
breakpoint on line 7 and then also line
19 can we go ahead and run this yeah so
as I guess how about you try running it
and starting to bug in session okay so I
think we're gonna go ahead and launch
this using Chrome which because you're
on a Mac that's the browser that you're
using and so even though this app in
this code is not local to my machine
here on windows I can simply press the
play button to launch the app in the
debugger into a new session so now that
we're in a debugging session I see that
the breakpoints that JC has put down
earlier are synced on my machine
additionally if I were to put down
breakpoints as well they'd see them
reflected on his machine so with the app
now debugging
both of our debuggers are attached to
the running app on my machine
our debuggers are stopped at the
breakpoint JC set earlier additionally
as a guest in a live share session I'm
able to independently inspect all of the
local state of the running application
for example I have access to all of the
local variables I can see the call stack
and walk back on individual frames to
see where the application was at at that
point in time and I can even hover over
variables to see what their state is
currently even cooler though I can even
step the debugger so in this case I want
to jump from line seven to the
breakpoint we have on 19 and I can
simply click continue to make that
change yes so on on my end what I can do
is I can inspect the matrix and see that
it's properly populated and seems to be
getting the right things inside of it so
yeah so let's let's start let's continue
debugging and have the app running so
I'll click continue and between the two
of us we can we can step through the app
while debugging together to be able to
figure out issues or bugs now beyond
being able to step through the
application to verify that the logic
looks correct I want to also verify
visually that the app is functioning as
I would expect now with live share as
John pointed out earlier the local host
server that he was running was
automatically shared with me and so I
can come to this list of shared servers
she was to open that in my browser and
here even though this is running on his
machine because I have none of the code
locally I can in fact verify that the
application is continuing to function as
expected yeah so with sharing these
servers you can share the port's that
your app uses with your guests for them
to use in this case it was the front end
but you can also share things like a
REST API or a MongoDB port so the last
thing I think we need to verify John is
that we haven't broken any of the tests
with this change can we go ahead and
spin up a new terminal and take a look
at those ok sounds good
in Jaycees vs he can go into the sharing
menu and select show shared terminals
like with the server that for the
front-end since I had a terminal open
initially when I ran the start of the
app that terminal was automatically
shared with him and in this case it was
shared as read-only so he could see what
commands I had previously run and how
that they had executed in order to run
tests how about I share a new term
by going into the live shirt viewlet and
selecting the ability to shared new
terminal and I'll make this one
readwrite so you can type into it and
execute commands all right so with that
terminal shared let me go ahead and run
NPM test to verify if our tests are
passing and I can in fact see that
everything is still green so I think
John these changes look good and they're
ready to push up to the repo yeah so on
my side I see how that executed because
he was running his command as if it was
on my machine and yeah the tests are
great I think everything looks great so
thanks for reviewing this absolutely
great so once we're done collaborating I
can end a session from the viewlet by
clicking end session and that will end
it and on JC's machine he will get a
notification that the session is ended
and he will not have access to code
I shared any more I hope that gave you
an idea of all the collaborative things
you can do with visual studio live share
with the ability to collaboratively edit
and debug while sharing audio servers
terminals diffs and more live share can
enable you to collaborate with your
teammates wherever you are from code
reviews to pair programming hackathons
interactive lectures and so much more
collaborating and working together has
never been easier visual studio live
shirt is available now for download in
the visual studio marketplace for visual
studio 2017 and visual studio code and
starting with Visual Studio 2019 it
comes already installed you can learn
more about getting started or get the
links to the extension downloads by
visiting our website at a KA MS /v SLS
also check out our Doc's site for more
in-depth guides about using live share
we'd love for you to give it a try and
let us know how it goes
thanks and happy collaborating