Debugging in 2017 with Node.js

we're gonna take a look at a little look at debugging and kind of just the state of debugging with nodejs and to give you a little bit of context I work on Google Chrome I I work on the chrome dev tools but I've been invested in dev tools and just generally tooling for a long time I found this like recently ten years ago I made this stunner right here a nice little like cheat sheet of keyboard shortcuts for our best friend Firebug so good but you know like even then I was just really excited to understand what kind of capabilities tools offered us because I always like I can I can learn one more thing and I can be more productive save my time and save my stress and we now have some good tools we have one tool in particular that is you know our trusty friend go to a console log we all use it we love it it's reliable it's everywhere you want to know what a value is hey console logs got you back no problem so that's great but you know you while it is useful like console log debugging printf debugging there are more powerful capabilities so I wanted to touch on a few of those a year ago at Google i/o the chrome team introduced some of the work that we've done to introduce the v8 inspector component into node bringing some new debugging capabilities to the node project we actually announced a pull request rather than like you know something shipping but hey you know it landed and and now it's no it's in there so that's fine I'm going to quickly walk through kind of just the basics of how this works you have a little hello world script you can run it like that obviously but you can run - - inspect how many people have used - - inspect or something good yes great okay do this return the debugger also - just inspect we'll run it turn on the debugger and pause it on the very first statement of the script I find this is really useful with you know utilities other things where it's going happen really fast and you want to break at the very beginning to make sure any sort of break points are in place now when you run this you'll get some output that looks like this hey the debugger is on it's listening to a WebSocket and here's some Docs this is a little different than it was before in previous node versions you saw something like this a bit more text and a big long URL that you felt compelled to like copy paste and it's kind of awkward anyways don't do that anymore it's a little bit better and so this is kind of a good approach to take so once you turn things on head over to Chrome a new tab type in about inspect it'll bring you to a page that looks a little like this and these are some inspectable targets you'll see your the node script mentioned right here but click on this guy right here the dedicated dev tools for node and this is gonna pop up dev tools it's just for your node now another approach to do the exact same thing is if Chrome is open and then a dev tools windows already open and then you go and take your script and you start inspecting it in dev tools now and this is a new as of its shipped to the chrome stable as of this week right up in the top left corner will add a nice bright green shiny nodejs icon click that guy and that will bring up the dedicated window for you so just you know the dedicated window obviously it has less tabs than your typical chrome dev tools because we're just dealing with node and its capabilities but the dedicated window is great because if you're working with no if you're working with your application then you make some changes so your control seeing the application and then you rerun it this dedicated window is going to automatically reconnect to the node that is now there so it's just there so it's gonna automatically reconnect whenever there's anyone all right so those are just kind of the basics but I want to show a little bit of how this works in action sooo we have I'm a little web server app and when I run it yeah okay yep internal server error great so we do have some problems a console is telling me problems great over in chrome inspect I'm gonna open this guy up ok so this is the app 40 lines of stuff internal server error is right here and so one thing that I know happens it's a little you know it's it's kind of confused so we're trying to do this we catch so we got some exception and then at this point we emit an error event that actually gets heard up here when we're listening on this guy and then this error function is emitting its own error then passing along the data now I really want to know what this exception is right here because I'm not getting it out on the console but one thing that I can do is I'm gonna place a breakpoint well I don't actually want it here I want to break inside of this arrow function so I place it this guy but then turn on this column breakpoint right here so now all right now we go over here we reload and I paused inside of the arrow function and you can see data is inspectable and so we're paused inside this guy who's really cool works phenomenally well with arrow functions with asynchronous code it's super useful no I this guy comes down here where I say problem and I'm losing the details about this exception somewhere between there I don't know where exactly I might start out with like a step in see what happens but I step in on am it I'm inside of you know nodes core events module which honestly I like I don't want to walk through this so I'm gonna right click and I'm in a black box this guy and with black box seen it's just saying hey you probably you know you're just gonna avoid stepping through this so we can see now in the Cossack it says that a few call frames are completely black boxed and so now when I step in we step directly to my own event handler for the exact same thing so just by passing all out right well we got that under control and E is telling us well this string we still don't have our exception open other consoles just be like it is arguments yep there it is okay there are two arguments right okay that string and then the actual exception so I was just being silly so what we can do just take this guy ctrl D for multiple selection and comment and spread good and I'm gonna hit control s control s is a live at it it's kind of like a hot module reloading at the v8 level and so now when i refresh the same guy well I'm still paused I'm still paused hey now when i refresh yeah there we go okay so I was just getting the logs before and now yes the actual exception made its way through nice thing here is I didn't have to like restart node the live at it meant that I'm able to just keep that running make some changes and then see what happens alright so thank you so just a few things here call them breakpoints black boxing live at it all that's good stuff that's been available when you're debugging Chrome now all available when you're debugging with note as well all right bring it back to these guys so if you've done this before and you feel like it takes a little bit of work just to bring up that window there are some tools that help with this to make it like a one action thing hey I want a bug window there's a chrome extension called NIM project called speck process another one called rocket just makes it kind of a single action to get that up and running really what they're doing is opening this URL we just need the dev tools URL with the WebSocket kind of hooked into it but because it's a kind of a fancy URL you can't open it in normal ways so that's that's kind of under the covers all right I want to briefly touch on four kind of other approaches apart from those basics one situation you might find yourself in is you ran node normally no flags no anything but you've reached a state and you're now like I really want to debug it profile I don't know you want to start inspecting it is it too late it's not too late no no you can do it process the debug process and pass it just to process ID as a number you can run this in a completely different no process and it'll just flip on debugging and your target really cool that works if you want to do to my gain and you're more of a terminal kind of person and you want like a gdb style interface you can use the existing CLI debugger this has been a node for quite some time but the back end was recently redone to be sitting on the new implementation but you just work with the script here on the command line with some short commands it's very great now another approach is via the dev tools protocol now as you saw there's this WebSocket port and that just speaks JSON RPC with the dev tools protocol this right here what we're looking at is script that attaches to Chrome or Chrome headless and just capture as a JavaScript profile just automatically if we wanted to take this script and have it run against node instead we just changed the port to connect two nodes to bug in port otherwise the rest of it works the entire dev tools protocol that chrome uses it's obviously bigger than the set of what node is using but there's some great overlap around profiling debugging console and the runtime all this so you can do this over here over the WebSocket another approach is to use the new core inspector module that was added I think it's new in eight and here you just set up a session and you talk the same exact same protocol profiler enables start/stop same thing as we're doing the last one but this is happening inside of your node process instead also a decent option with debugging the other way I want to quickly touch on tracing because there's some cool stuff now tracing is a very powerful collection of tools on the chrome team we use this to understand what is happening in the browser this is two seconds of loading a page on Wikipedia and on Chrome we use this to understand what is happening and anything that's taking time we go to a trace that is the ground truth and so much stuff is instrumented there and this is like the most basic looking thing it can get a lot more involved but we're gonna skip over that traces are really really powerful and the great thing is now this whole capability is available in node it is still early days but this is how you can do it run with trace events enabled and after you run this it's going to spit out a JSON file of the trace and you can open that up in chrome in a about colon tracing just drag it in and you'll see something like this this is one that I captured with node just the other day so there's a few things going on here and it gets really interesting in this area in the middle not gonna zoom in and export too much but I've selected this whole region and down at the bottom we see some of the results we have that we know how much time v8 spent executing compiling parsing doing GC work total time self time and on CPU time so some nice break down around the timings of what's happening on that thread and then above it is some really fascinating stuff and this is actually showing me here kind of a breakdown of where my latencies are between DNS and TCP connection and the rest of the network requests really helps in this case identify where the the certainly entities are I will point out that this aspect is sitting on top of the new async rap implementation in node core and this part isn't yet in isn't yet landed in node there's a good-looking flow request really good stuff that when landed will enable this still the the kind of detail in here in the trace it's there's a lot more opportunity so I'm really excited to see continued investment in instrumentation and understanding all sorts of things and what's happening inside node like understanding when the event loop is doing work or whatever this is a great solution to instrumenting all that and building tools around it yes good a basic trace looks like that but there are some off by default categories which give you more detail at the cost of a little overhead this would be the magical incantation that turns on all those categories yeah there you go so that's about gonna wrap it up for me one last thought I want to leave you with is just explore and think what is beyond the console thank you guys very much [Applause]

Channel: Paul Irish

Views: 57,019

Keywords: node.js, node, debugging, javascript

Id: Xb_0awoShR8

Length: 14min 56sec (896 seconds)

Published: Thu Sep 14 2017

Reddit Comments

[u/paulirish]

That little stutter at the beginning is so distracting.

[u/sumdudeinhisundrware]

The Jet Brains Node Debugger (WebStorm, IDEA, etc.) is so much easier to use than the Chrome debugger and has all the features.

[u/jadbox]

I'm surprised he didn't demo the async callstack feature in Node 8...

[u/beeskneecaps]

Was just using yarn add global node-inspector and node-debug. I’ve been in the dark ages! Thanks for posting!