Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Live Editing Code with Google Chrome

Truman Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Truman Smith
Full Stack JavaScript Techdegree Graduate 17,901 Points
Posted by Truman Smith
.a{fill-rule:evenodd;}techdegree seal-36
Truman Smith
Full Stack JavaScript Techdegree Graduate 17,901 Points

At this time, do the Chrome devtools work for debugging node?

I searched the internet to find current instructions and was able to open a page on chrome-devtools:// which saw to my node app files, but I couldn't get breakpoints to pause the app. I can provide more details regarding my steps if someone is seeing the debugger work.

3 Answers

Truman Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Truman Smith
Full Stack JavaScript Techdegree Graduate 17,901 Points
Truman Smith
.a{fill-rule:evenodd;}techdegree seal-36
Truman Smith
Full Stack JavaScript Techdegree Graduate 17,901 Points

Oops. Thank you for mentioning it Steven. I updated the link in the comment. The second segment in the course explains the devtools setup. I did not try to replicate the instructions in the video since they appear to be outdated now.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

Wow, I've watched these videos but I managed to totally forget about this feature. I'll try to give it a shot sometime soon and see how it works today. Of course, it still might be experimental and perhaps they haven't yet worked out the bugs relating to breakpoints.

Truman Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Truman Smith
Full Stack JavaScript Techdegree Graduate 17,901 Points
Truman Smith
.a{fill-rule:evenodd;}techdegree seal-36
Truman Smith
Full Stack JavaScript Techdegree Graduate 17,901 Points

Hurrah! I discovered simpler steps that gives me Chrome DevTools for a Node app that lets me set breakpoints and view variable values.

  1. In a terminal window start the app with “node --inspect app.js” where app.js is the file that starts the app server.
  2. In the browser open the app (e.g. localhost:3000)
  3. Open a new tab and go to "chrome://inspect". Select the Devices tab.
  4. Click the link "Open dedicated DevTools for Node", which should open a new DevTools window.
  5. If the DevTools-Node.js window isn’t connected to the app, select the Connections tab and add the browser's app URL (e.g. localhost:3000).
Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

Chrome devtools is great for code that is running in the browser, but node runs on the server. So I don't think it's possible for the devtools to affect the execution directly in ways like setting and responding to breakpoints.

UPDATE: I totally spaced on this one. :stuck_out_tongue_winking_eye: See the later comments.

Truman Smith
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Truman Smith
Full Stack JavaScript Techdegree Graduate 17,901 Points
Truman Smith
.a{fill-rule:evenodd;}techdegree seal-36
Truman Smith
Full Stack JavaScript Techdegree Graduate 17,901 Points

According to the video at https://teamtreehouse.com/library/setting-up-google-chrome-for-nodejs-debugging I should be able set breakpoints for a node app. But, the video was created a few years ago and we know that experimental or leading edge developer tools can change.

Background:

  • I’m using a MacBook Pro, OS 10.14
  • I created the flashcards web app that’s in the Express Basics course and successfully run it with node in a terminal window and a Chrome browser. The browser and node communicate through localhost:3000

My Steps:

  1. In a terminal window I started the node app with: node --inspect app.js It returned a message in the terminal window containing “Debugger listening on ws://127.0.0.1:9229/“ followed by a UUID.

  2. In a Chrome browser I try the URL listed in the terminal window, but it returns the error ERR_DISALLOWS_URL_SCHEME. The client side of the app is running successfully in the same browser.

  3. In the browser I open http://127.0.0.1:9229/json, which returns data containing URLs with the keys devtoolsFrontendUrl, and webSocketDebuggerUrl, which both end with the same UUID seen in step 1. The webSocketDebuggerUrl is the same one that didn't work in step 2.

  4. In the browser I open the URL devtoolsFrontendUrl, which starts with "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/" and ends with the UUID. The result is a dev tools tab. The Sources tab contains my web app source files. The Console tab contains the console.log message that’s output when the app starts. Yes! But, setting breakpoints doesn’t pause the app, and the console doesn’t recognize any variables defined in my app.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You mentioned a video, but the link you provided points back to this question.