Hello there, I'm Chris and today I want to show
you how to do end to end debugging in Visual
Studio code of web projects.
In this case I've got a simple todo app here
which is plain vanilla,
HTML, CSS and JavaScript and the first thing I normally
do when I open that as I open it and
editor and I go to my i-term and I
start my local server. The thing here though is that
the terminal is already built into Visual Studio code so
you don't need to go to an extra app for
that. So you're already in the right folder as well
so that makes it much easier to just start a
local server here.
In this case my PHP server, and that means your
app is now running on Localhost 8080,
so we can get rid of that and we don't
need it any longer.
I normally now would go to the browser and go
to Localhost 8080,
open the developer tools there and do all the things
that I would normally do.
When you debug my web projects.
But the better option here is to actually get a
dedicated browser instance by running and debugging this workflow here.
So if I go to run a debug or an
HTML document,
it now opens a dedicated browser just for this project
right now.
It's linked to this file right now,
so we want to change that to actually
Go to Localhost 8080 instead,
and that means my app is now running here inside
that dedicated browser.
This is my my browser on my operating system,
in this case Edge. I don't have any Chrome installed,
so normally it could be Chrome as well,
or any other browser that is actually based on Chromium.
So now when I interact with this one you see
that something interesting is happening down here.
The debug console, a lot of messages are coming in.
These are coming from my JavaScript,
so this is my normally my console.info,
console.log debugging workflow that a lot of people actually use,
so this is the dedicated console of that browser inside
the debug Console Visual Studio code so you can actually
interact with the window object here as well,
and you can use to convenience methods like $ to
access for example the body and that gives you the
information of the body inside that browser.
Right now you can also do things like changing the
styles around,
so in this case here.
Can change the background to peachpuff and that means I
can do all the things that I do in the
console and the browser dev tools directly here from
Visual Studio code and I don't go away from my
main code.
Console Debugging is fun but actually I like breakpoints more
so in this case I have an add task here.
I can set a break point and if I now
add another task in my app I actually jump into
the breakpoint debugging workflow.
You can read up on that.
It actually gets you much more insights than the console
info does and it allows you to go step by
step.
Through the product and find out what's going on.
So when there is something that you need to have
more detailed information about,
it's probably good to use breakpoint debugging because console info
would lead to another console info to another console info
to another console info.
Now this is all fun and games,
but this is something we had for quite a while,
but if you use Edge as your browser,
you also get this little inspect button here and that's
an interesting one.
If I click that one the first time,
I actually get asked to install an extension.
This installs the extension, and once it's actually there you
can close that.
And go back to your code and now if you
click that icon again and give it more space,
you get the developer tools of the browser right inside
Visual Studio Code.
So this one now opens this page that I have
here and I can move around in the DOM and
in the CSS and change the things like I normally
would. So if I go to that search bar here,
I could rename that to TODO and it would change
that to TODO here as well.
I can also go to the element that we changed
here and use the more visual tools.
Inside the browser developer tools to change that back to
white if I want to know which file that came
from,
I can link this file.
I can link to this file here and click on
that one and upon opens the CSS file inside Visual
Studio Code and I get all the functionality of Visual
Studio Code directly here. So what I get here is
the normal developer tools from the browser.
But in the instance of that browser and in the
context of Visual Studio code with all the cool stuff
that Visual Studio code comes from. The network
Is another thing as well.
So if I reload that one here as well,
I get insights into the network and if something loads
I can see what debug what's going on there now.
This is quite nice, but it's actually quite cumbersome to
do that every single time,
so the better option to do that is to actually
go to the debugging workflow and say create a launch.json
file for me.
If you create that launch.json file and you say Edge
launch here,
you already get the PWA MS Edge and the localhost:8080
So next time you go through debugging workflow it automatically.
Open the browser for you and it has the developer
tools already installed for you,
so you don't need to go through that process every
single time.
This is a file that's just generated in your project
for you,
so you can do that by hand as well if
you wanted to,
but in essence, it's just something that might be easier
for you to get generated,
and that is end to end debugging in Visual Studio
code of web projects,
you've got a terminal, you've got the console,
you've got breakpoint debugging, and you've got access to the
Dom and to the CSS editing anything else you need
please.
Tell me about it. We can put this thing in
there.
It's open source. It's on GitHub and we can extend
these things as we want to.