Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
You'll learn to set up Google Chrome to inspect Node.js and the steps needed to enable Node.js to talk to Google Chrome's DevTools.
IMPORTANT: Don't See Experimental Features?
Since Chrome 57 you don't need to enable experimental features. You can just copy and paste the inspector link straight in to chrome.
Application Code
The application code can be found on GitHub.
To clone the code to your local machine use the following code.
git clone https://github.com/treehouse-projects/reverse-app-node.git
To install dependancies use npm install.
Debugging a node application with
Google Chrome feature was first introduced
0:00
in Node.js 6.3+ but wasn't recommended for
years until Node.js 6.4+.
0:05
You'll also need at
least Google Chrome 55+.
0:10
The great thing about using Google Chrome
as a debugging tool is that you can
0:14
debug both your front end and back end
java script with the same interface.
0:18
You'll see how familiar
it looks in a minute.
0:24
Open up Google Chrome and visit
the experimental dev tool settings panel
0:26
by visiting chrome//flags,
0:31
hit Enter, and then scroll down
to developer tools experiments.
0:36
Click enable and
then Chrome will ask to restart.
0:43
Then open up the developer tools.
0:52
Head over to the settings.
1:03
This settings menu is hidden under
this menu here with the three
1:05
dots stacked above each other.
1:10
Then go to experiments.
1:14
Then the next step is a little strange.
1:16
Hit the shift key six times.
1:19
You should now see some
other options appear.
1:24
Including debugging node.js,
1:27
check the box next to the text,
and then close down the panels.
1:32
Chrome is now set up to
debug node applications.
1:40
Now let's set up the node side.
1:44
To put node into debug mode and generate
a URL for Chrome to use to inspect your
1:46
application you need to pass
in the -- inspect flak for
1:51
example the command would
look like node--Inspect.
1:55
App.js if our application
was in a file called appjs.
2:00
Since we're using MPM to
start our application,
2:05
we'll need to modify the package.JSON.
2:08
And add the inspect flag.
2:13
Save the file, And start
the application again with MPM start.
2:20
You should see a message
when the server starts.
2:27
To start debugging open up the following
URL in Chrome then copy the URL.
2:30
And paste it into Google Chrome.
2:38
And now you should see
a familiar dev tools interface.
2:43
I'll cover the debugging features next.
2:47
You need to sign up for Treehouse in order to download course files.
Sign up