- [Instructor] The debug mode is a way to see
all of the internal logs used in Express.
According to the Official Express Documentation,
Express uses the Debug module internally
to log information about route matches,
middleware functions that are in use, application mode,
and the flow of the request response cycle.
When launching the app, instead of using npm start,
we would use some form of the commands you see here.
We are going to have to add an extra flag,
but we'll get more into that momentarily.
The Debug command is fairly consistent
across all operating systems,
but you can see with Windows users
there is a slight difference,
so keep that in mind if you're using a Windows machine.
The logs that you see below after running the command
are for an app generated by Express Application Generator.
However, what we'll see in our logs
will look fairly similar.
Let's head back to our editor where we have our terminal
and see what this looks like with our project.
If you don't have the terminal open,
make sure you go ahead and do so.
I actually have my server running and you probably do too,
but we're going to go ahead
and shut that down using Control + C.
And I'm going to clear this
just to make things a little bit cleaner.
And what we're going to do is then run the Debug command
that we just saw on the Express Documentation page.
The Debug command will go a little bit something like this.
It will be DEBUG in all caps, equals express,
colon, asterisk and then a space,
node, dash, dash,
experimental-json-modules, space, index.js.
Remember, if you're using a Windows machine,
yours will look slightly different at the beginning,
but pretty much everything to the right of the asterisk
is going to be the same.
Now, let's break this down
before we hit Enter and see this in action.
So, DEBUG=express:*, that's just the basic debug script
so to speak that we will use to debug with our application.
If you take a look, I have my package JSON file open,
and it's okay if you don't have yours open,
we will come back to that shortly.
But if you remember,
when we were setting up our start script,
we had to add the flag experimental JSON modules,
because we're using ES6 and we're using JSON,
so that's why we have to include it in our debug script.
And then, index.js is just referencing
the entry point of our project, okay?
If you're ready go ahead and hit Enter,
and you will see the debugger in action.
I'm going to make my terminal a bit bigger,
just so we can take a look at everything that's here.
Scrolling back up to the very top
where this starts, all right?
You can see all of the output here based on our server.
There's information about the application,
there's information about the routes,
and even what corresponding HTTP method they're using.
And then anything we have console logged is still here,
so if we keep scrolling down you see all of these routes.
We have a lot of routes that we created with this project,
but then we also still have our console log here
regarding the port number that our server is running on.
Let's take a look, we're going to head over to our browser,
and we're going to see what the debugger looks like
whenever a route has been hit
or you transition to a new route.
Let's go ahead back over to our browser
and head to one of our routes,
and then we'll come back and look at our terminal.
All right, starting here in a new tab,
I'm just going to go to local host 3,000
where we have our server running,
and as we would expect we have all of our mock data.
that's still being served to the client here.
Let's go to our class route
that we created with our routing parameters.
So that slash, class, and then let's go to student five.
We hit Enter, on the client side
we get back the student information here, okay?
And let's head back to our editor in terminal
and let's see what the debugger printed out
in regards to our navigating in between routes.
All right, back here at our editor in our terminal,
we see that there's some new information
from the debugger that's here.
They're all in reference to Express router.
You can see the first one after our console log
regarding our port number,
it was dispatching a GET, so out the route.
And then if you look a bit further down,
you can see that we went to the class route
with the student ID of five.
And so, all of that information
is provided to us by the debugger.
Now, the debugger Command is kind of long,
just like the command that we used for our npm start.
To make debugging a little bit easier,
let's add it to our package .json file
so we don't have to type that out each time.
I'm going to make my terminal smaller,
and if you don't already have your package .json file open,
go ahead and open your package JSON and scroll down
to where we have the scripts and our npm start.
In this script's object we're going to add a debug.
I'll just go to a new line and then in quotes here,
we'll add the key for debug and then some quotes.
This is going to start just like we typed in our terminal.
It's going to start with capital DEBUG,
equals, express, colon, asterisk.
Now I'm going to add a space.
Now, remember if you're using a Windows operating system,
this is going to be a little bit different, this first part.
Just make sure you reference the Express documentation
to make sure that you have the right thing typed in.
Then we're going to take everything that's in our start script,
and we're going to add it
after this DEBUG, express, colon, asterisk.
I'm just going to copy this and then add it right here.
All right? And save.
Make sure you save, always important to save.
Basically we're saying DEBUG, right?
And then this is almost identical
to what we had typed in the command line in our terminal.
We just added the nodemon so that way,
if we are running in debug mode and there's a change,
we don't have to start and stop the server.
We want to make sure that we include that,
we know we need our experimental JSON modules flag,
and then we have our other information for ES6
with the Babel node and then our entry index JS file, okay?
Let's go ahead, we have debug mode running,
go back to your terminal,
and go ahead and shut the server down.
And I'm going to clear,
and then I'm going to use our new script,
so I will type an npm run debug.
And that will put me into debug mode.
Just to show you,
I'm just going to make this a little bit bigger.
And you can see we have everything that we had previously,
all of our logs, all of our console logs.
And now if there's any changes,
we don't have to start and stop the server.
There is certainly more that you can do
and use debugging for,
but now you have a great foundation to get started
with basic debugging using Express' Debug module.