Check out a free preview of the full Introduction to Dev Tools, v3 course

The "Running Node.js" Lesson is part of the full, Introduction to Dev Tools, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Jon demonstrates how to run DevTools on a Node.js application by running an inspect flag in the terminal.


Transcript from the "Running Node.js" Lesson

>> Last thing I wanted to show before we move on, which is really cool and people have asked about this is that and this used to be much harder but since node.js is just a wrapper around V8. Which is the same JavaScript engine that chrome uses, you can actually very very easily run your Node.js apps through the devtools as well So I'll demo that.

So basically, I'm just going to go to my terminal and I'm going to kill the app that I currently have and clear the page. And then instead of running, so I was running NPM start, which is set to run node server.js. This is how I've been running the app.

You can now go and you can change it to do node dash dash inspect. And do the same thing. So it'll still load the site just like normal, but now when we open up the devtools, we'll see this little node.js icon up here. And if we click on that, we can actually see it pops out its own.

Kind of got two devtools, right? You've got devtools inception going on. But you can click on like profile, for example. And you can do a full profile and then we'll like refresh the app and then we'll stop the profile or something like that. And so you can do all of these.

Let me move it over to the flame chart that we're used to. You can do these things. You can actually watch my little Node sample app started up right where it's like it's a fast defy app. And it's like walking ASDs as it walks the mark down all this like really cool stuff.

So doing it with like a web server is like pretty cool, but like one thing you could do that would be really interesting is if like you're using Web pack, and your build times are slow. You could actually do run node inspect and then call web pack and then you could open it up in here with a profile and like do the same exact thing, right?

You can walk any kind of node command line application and see it. So I have like a little example that I'll just do with you all, but you can feel free to follow along with but in the server.js file, I have this like silly little function commented out, which is FUBAR so you can uncomment it.

And then you can go up and in the get lesson page, you can uncomment it being called. Now save that, now go back to my terminal, and I'll start node with the inspect flag. And then I'll go back to my devtools. And I'll click the node icon again here and I'll start recording then I'll go back here and I'll refresh the page and then I will stop recording.

And we can actually see like inside this fast defy which is the framework I'm using get this like FUBAR function, so we're actually seeing like the node server trying to process stuff. And you can see it's it's reading and markdown, and then it hits this thing. So you can do a really nice, just like we did with the front end code.

You can do it with all your back end code. Here's my server.js file. Here's how long it took to do this silly thing, all that stuff. So this is really cool, because when you start looking into it, there's like a lot of stuff that we use day to day that's just a node app.

And so just the idea of being able to run, the Chrome devtools that you're used to on the node app can be really cool.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now