Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Setting Up Google Chrome for Node.js Debugging

2:50 with Andrew Chalkley

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.

  • 0:00

    Debugging a node application with Google Chrome feature was first introduced

  • 0:05

    in Node.js 6.3+ but wasn't recommended for years until Node.js 6.4+.

  • 0:10

    You'll also need at least Google Chrome 55+.

  • 0:14

    The great thing about using Google Chrome as a debugging tool is that you can

  • 0:18

    debug both your front end and back end java script with the same interface.

  • 0:24

    You'll see how familiar it looks in a minute.

  • 0:26

    Open up Google Chrome and visit the experimental dev tool settings panel

  • 0:31

    by visiting chrome//flags,

  • 0:36

    hit Enter, and then scroll down to developer tools experiments.

  • 0:43

    Click enable and then Chrome will ask to restart.

  • 0:52

    Then open up the developer tools.

  • 1:03

    Head over to the settings.

  • 1:05

    This settings menu is hidden under this menu here with the three

  • 1:10

    dots stacked above each other.

  • 1:14

    Then go to experiments.

  • 1:16

    Then the next step is a little strange.

  • 1:19

    Hit the shift key six times.

  • 1:24

    You should now see some other options appear.

  • 1:27

    Including debugging node.js,

  • 1:32

    check the box next to the text, and then close down the panels.

  • 1:40

    Chrome is now set up to debug node applications.

  • 1:44

    Now let's set up the node side.

  • 1:46

    To put node into debug mode and generate a URL for Chrome to use to inspect your

  • 1:51

    application you need to pass in the -- inspect flak for

  • 1:55

    example the command would look like node--Inspect.

  • 2:00

    App.js if our application was in a file called appjs.

  • 2:05

    Since we're using MPM to start our application,

  • 2:08

    we'll need to modify the package.JSON.

  • 2:13

    And add the inspect flag.

  • 2:20

    Save the file, And start the application again with MPM start.

  • 2:27

    You should see a message when the server starts.

  • 2:30

    To start debugging open up the following URL in Chrome then copy the URL.

  • 2:38

    And paste it into Google Chrome.

  • 2:43

    And now you should see a familiar dev tools interface.

  • 2:47

    I'll cover the debugging features next.

You need to sign up for Treehouse in order to download course files.

Sign up