Debugging GUI Applications in a GitHub Codespace

hi I'm Michael price I'm a product
manager on the visual C++ team you may
know that you can debug uh an
application in a codespace from from vs
code uh just fine but uh guey
applications on Linux which all codes SP
all GitHub codes spaces are Linux based
uh if you have a guey application there
it's usually written in um a framework
called X or X11 and in order for those
things to show up on a Linux desktop uh
you have to have what's called an X
server and it has to be connected to
some display that is a video device but
in a GitHub codes space um those are
headless VMS running out in the cloud
and so there is no video device or
display for uh X applications to to
connect to to display all of their guey
so this talk is going to show you how
you can make that work uh on your
Windows system
so this is a very simple diagram that
sort of explains the components and
parts uh that will make this work so you
you can see in this diagram that we have
a Windows system and we have a GitHub
code space and that we have an instance
of vs code either running in a web
browser or on the desktop uh that will
connect to the VSS code uh that is
running inside the code
space um and so whenever you run the
application you want to debug in vs code
um it doesn't know where to send that
that uh gooey information to so the
other pieces that you need to be running
here um is you need to actually set up
an X foring SSH connection between the
windows subsystem for Linux that's
running on your Windows system and the
uh the the SSH Damon that's in the code
space um the other little piece of magic
that just automatically happens here is
that um WSL has a feature called WSL G
and that just uh forwards any of the
gooey elements that show up in your
local WSL instance to your Windows
desktop so whenever you have those
pieces in place uh and you launch your
application to debug it um all of the
X11 commands all the things that do the
rendering on the screen will get
forwarded through the SSH connection and
then through WSL um back to your Windows
desktop uh where you can actually drive
your guy application uh for your
debuging
purposes you can roughly break down the
steps that you're going to need to do
into you know four four parts so first
you're going to create a code space I'll
show you how to do that um then you're
going to need to set up local SSH ke key
authentication uh that you would set up
and it'll work through the GitHub CLI
the GH uh
application um and then you need to
actually adjust your codespace some so
that the X1 forwarding works and then uh
you can uh go off and do your debugging
work and I'll demonstrate that as
well so to show an example of what uh
what we need to do here I'm going to use
this repository go- CPP this is is an
implementation of the go board game that
I use often and I have only ever had a
console UI for this but I'm in the
process of adding a a guey front end for
this thing so I have this Branch
multiple front ends that's already got
some basic code there I'm going to make
a codespace by going to the code
dropdown and select create codes space
on multiple front
ends this is going to create a code
space in the background uh as you can
see here I've have bed this up so we
don't have to wait a long time uh this
is going to make a code space on the
back end and then get a vs code instance
in my browser that is connected to it
and there it goes it's uh it's connected
up uh you know I like to pick a color
theme for each project that I'm working
on uh way I can distinguish between them
and I prefer darker colors so let's pick
uh let's pick this one here excellent
it'll install that extension and I have
my dark color theme uh I'm going to do
some cleanup of some of the windows are
going to pop up and configuration is
going to happen I'm going to speed up
through
that and all right configuration is done
I've closed all the windows that came up
uh needed to make it a little bit bigger
it was a little hard to see so it's
bigger now we can we can uh read it a
little bit more easily I'm going to do a
build now this is going to go and do the
build just like it normally
would it's not a very big project so it
doesn't take very
long okay build's done uh I'm going to
go set some break points uh let's set a
break point in one of the error
conditions and we'll set a break point
uh on the quit the Clos window event uh
the quit event as well let's click debug
uh we'll select the guey and off and the
debugger is
running so we see that the debugger
stopped in our air condition so let's
just go ahead and step through this and
uh figure out what it is that the error
what what error it's telling us so it's
saying no available video device this is
what we expected right like this is a
headless machine it doesn't have a video
device connected to it uh so I did not
expect this to work and that's the error
that I was
expecting so what we need to do first um
in the Second Step uh in the list that I
laid out is set up S SSH uh key
authentication so we're going to run SSH
keyin inside our WSL uh shell now an
important part here is you want to give
this a very this key pair a very
particular name of codes spaces. Auto
there's a reason why that you'll see
later so I'm going to copy the contents
of the public key that was generated um
you can see it generated both the public
and the private key we're going to
select the cont ents of the public keyy
I'm going to have it blured out here uh
and I'm going to I'm going to copy that
and we're going to then use that in the
next part of this
step okay so what we need to do is you
need to go to your github.com uh profile
should just be github.com and then your
username you'll click on the little icon
in the upper right uh it's going to pull
down a drop down list and you're going
to find settings and click settings
okay go to SSH Keys SSH and gpg keys and
add a new SSH key give it a title
whatever you want to name it and then
you'll paste the key that you copied
that public key into that key
field there we go and then click add SSH
key your SSH key is now added so let's
go back to the
console uh and make sure that that
actually
worked okay back in the console uh we're
going to use the GH uh application this
is a command line utility you can use to
interact with GitHub uh there's this
codespace command you can see all the
interesting stuff you can do with code
spaces we're just going to list the code
spaces that are in my account uh you can
see my code space that I made is there
uh you can view more details about a
code space um if you have multiple will
give you an option to choose but for now
what we're going to do is we're going to
use the GH codespace SSH command to
actually establish an SSH connection to
that code
space okay it looks like it connected so
just you know as an attempt to see we're
going to try to run the the the guey
here and see what it tells us okay it
tells us the same thing that was also
expected now we're going to f fix that
in a minute uh but first I wanted to
show you an additional little um uh tip
on how you can make sshing into your
codes spaces a little easier there's a--
config option to SSH that will actually
print out to standard out the stuff that
you would put in your SSH config file uh
so that you can more easily connect to
it when you do this if you if you
redirect it and append it to your SSH
config file this lets you then um use
tab completion and such uh for your code
spaces you don't have to go through the
GitHub uh user interface you can just do
it directly from your standard SSH
client okay now that we've got that set
let's go back to the codes
space so what we need to do now is we
need to actually go set up the X11
forwarding in your code space so in
order to do that uh you're going to want
to make sure that your codespace has the
X off package installed so I'm going to
let co-pilot kind of give me some hints
it did kind of the same thing it was
supposed to did above but that's okay it
got me most of the way and I'm going to
replace that with xof I'm not going to
accept its suggestion for X11 apps uh
cuz I don't need them for this uh but
those are some pretty cool apps if you
just want to test out X forting on your
own you can use those when you do this
uh you now need to rebuild your
container um so if you go up and um find
the re uh code spaces rebuild container
setting uh our option you can rebuild
this container we'll fast forward
through this because it takes a couple
of
minutes okay the container has been
rebuilt excellent
but there's still a few more things we
need to do let's go back to our console
uh our WSL console this time we're going
to pass the -
XY uh switch to SSH this is the thing
that actually establishes the X11 ter uh
forwarding so now we're going to run our
guy and now when we run the GUI on our
local Windows system we're going to see
the GUI app that we tried to run there
the the forwarding is now working
correctly from this uh session that I
established over
SSH but that doesn't quite get us what
we want because it works inside this
session and it works because of the um
display environment variable is set to
that so we'll need to know that piece of
information to make this also work in vs
code so if we try the same thing in vs
code you can see that the display
environment variable is not set we need
to have it set to the same thing that
our forwarding session has it set to so
if you go into your Dev container Json
you can add a remote M field with
display and you set it to the same value
that was in your SSH forwarding session
now when you rebuild the container this
time it will cancel or it will close out
your SSH forwarding connection because
the machine goes away so you will have
to reestablish that connection after you
do this reset and the display shouldn't
be changing between different sessions
um but just to make sure we're going to
go back and establish that forwarding
connection again in our SSH
client and we're just going to double
check and make sure that the value of
the display environment variable didn't
change between these
sessions okay it's the the same in both
places so now we're going to go over to
the vs code instance and we're going to
click
debug and you can see this time the
application came up and it's running I
can see the guey in my windows client
but the application is running on the
codespace and I'm debugging it through
my browser vs code
instance so you can see um we'll to the
terminal you can see as I move my mouse
around and press keystrokes different
events are getting sent to
it and then when I go over and I hit the
close window button I should get that
break point over in vs
code aha it's been told to quit so the
breakpoint fired and now I can just
continue through that and the app should
close and we successfully debugged our
guy application running inside a GitHub
code space while we're on our Windows
system so just to recap you know I
showed you how to create a code space
it's pretty easy um setting up SSH key
authentication is a little bit more
complicated but not too much there were
a couple of tricks with the GH tool that
lets you SSH into your GitHub code
space um then we set up the code space
to do X11 forwarding the the two parts
of that were making sure that the X off
package is installed and also making
sure that you set the display
environment variable
correctly um and then once you have
those things done uh and you've
established at SSH forwarding connection
from your local machine to the GitHub
Cod space uh then you're off to the
races and you can debug all your guey
apps and make the most beautiful
applications uh that run in the Linux
desktop uh that anyone would ever
want uh thanks for watching the talk and
I hope you enjoy the rest of pure
virtual C++ this year and if you want to
get in touch with the Microsoft C++ team
you can reach us at visual CPP
microsoft.com