Can you debug an app with breakpoints and the whole
9 in production? Well, yes. If your hosting provider and
tools support it. Let me show you. So for today,
we're going to be using Azure app service and Visual
Studio Code because those things support this remote debugging scenario
and so we're going to need this Azure Tools extension
for VS Code. Now let's take a look at the app.
So here's our app and it's running in Azure and
it looks like it's running just fine, but it actually
isn't. So if we delete one of these items.
And then refresh the page even though it looks like
it went away, it didn't. It comes right back. So
let's debug this in production to figure out what's going
on here.
So the first thing we're going to do is come
to the Azure extension and look for our application which
is running an Azure App Service. It's a node application
and this should work for Node or Python apps, and
we're going to right click the application and just say
start remote debugging and what this is going to do
is it's going to enable remote debugging on the site
and to do that it has to restart the site.
This is something to be aware of when you're debugging
in production. If you restart the site, you may bounce
everybody that's on there off. That's not a great experience.
Once the debugger is attached, we can debug this app
in production exactly like we would if it was local.
So here's our files. They're all local. Now. Let's go
ahead and take a look at the delete service here
to see what's going wrong. So what we can do
here is we can drop a breakpoint just like we
would normally if we were working on this application locally.
Now, let's go back to the application running in production,
and let's delete an item, and this will actually cause
the application to break right in our local code here,
but we're debugging against production.
So we have a break point here and we can
inspect all of these things exactly like we would if
we were running locally so we can see our ID
parameter and our category as well. The idea is undefined,
which is probably part of the problem here. Now it's
important to note that when you add a breakpoint like
this in production, no one else can access the site.
So for instance, if we copy this and we open
a new tab and we try to access it, it
will just sit there and spin and that's because the
application is busy because we're debugging it.
And This is why you want to be careful when
you debug in production. It's not something you want to
do unless you absolutely have to, but there are some
things that you can do to cause it to not
hang up like this. So what we could do instead
here is instead of having a break point, let's continue
on and you'll see when we do that the tab
actually loads. We can use a log point instead. So
let's go ahead and back up to the file that
actually calls this service here. Let's go down to the
bottom where the ID actually comes in, and we'll just
check the value of the ID here, but instead of
having a break.
Point here, we're just going to right click and we're
going to add a log point and a log point.
Just logs out of value to the console without causing
the whole application to stop at a breakpoint. So to
do that, let's just say the ID is equal to
and then we have to put expressions inside of these
brackets here and the category variable is equal to.
The category right here. OK, so now that we have
this, we'll just hit enter to save that, let's go
back to our production app and let's delete an item
and then we can come back to the console and
we can see id equals undefined and category equals "fun".
So we're definitely missing our id here. So the next
step would be to just see well, what is the
value of req.body. So let's go ahead and
edit this log point and let's just say that we
want to look at. We could look at the entire
req.body, but instead.
Let's just look at the req object, so we'll go
ahead and press enter here and then let's go ahead
and try to delete a task.
And come back and you can see that here's the
req object. Actually in our debug console, so let's go
ahead and expand that. And here's the whole req object.
Let's go and find the body and you can see
that the body is empty. OK, so the id parameter
is not on the body. Well, where else might the
ID parameter be? Well, it might be in the params
object, and sure enough, there it is right there. So
another way to do this would be to add a
watch. So let's come back and go to our debugger
and let's add a watch here. And let's just look
at the
req object and then we're going to have to drop
a breakpoint here in order to use the watch, and
then we'll go ahead and refresh our application and try
again.
OK, and now we can look at the value of
rec inside of the watch, and if we go down
to params, we will see there is our ID. And
if you didn't know this, you can copy values directly
from the watch here. And then if we pull open
our debug panel, our debug console down here at the
bottom, let's go ahead and we can set this id
equal to this new value here. Whoops. And it already
comes with the quotes. We don't need those, so let's
just add this. And now we're just going to actually
test if we add the id.
Does the delete actually work? So let's go ahead and
go back and make sure id has a value now.
And it does, let's go ahead and continue on and
we'll go back to our app and refresh and we
only have one item so it does work. So now
we know what's going wrong with this application and we
know that we can come here and change this to
params.id and then redeploy our application once we
disconnect the debugger. Here Visual Studio Code will tell us
do you want to disable debug mode on the application
because it can slow it down and we'll just say
disable.
The application will be restarted and the debugger disconnected, so
that's how you can debug your apps in production. If
you're hosting provider supports it like Azure App service, it's
important to note that you shouldn't debug in production if
you know that you're going to disrupt the user experience
and you definitely shouldn't do it if you can get
the same information from the logs or by replicating this
scenario locally. Hey, if you like this video like this
video and subscribe for more tips and tricks on development
VS Code and all things programming.
Happy Coding.