Debug Typescript Node apps in Visual Studio Code (Great for NestJS!)

welcome along my name is chris roberts and this is robert's dev talk now if you build node applications with typescript did you know you can use the built-in visual studio code debugger to directly debug your typescript set breakpoints step into your code and so on this is a really useful tool it's easy to configure it just requires a couple of changes to your project settings and here here's how you do it so i've created a very basic typescript app in node with a couple of files i have a greeter class which just takes a greeting in the constructor and i have my main ts file which simply imports the greeter class creates a new greater and then calls the greet method now this of course is a very simple example but it could just as easily be a very complex nest framework project now i want to be able to set up some breakpoints and step into my code so to configure typescript debugging i just need to perform a couple of steps first i need to install some packages into my dev dependencies in package.json because these are in-depth dependencies they won't be included in the production build so i'll go to my terminal and i'll run mpm install and then dash dash save dev to specify my dev dependencies and then i want the ts node package and the ts config paths package i'll run that to install those packages now just a side point if you're using a typescript framework like nest for example those packages may already be included so double check your package.json file if they are you can skip that step next i'm going to go to my debug panel in vs code and i'm going to click create a launch.json file then i'll select nodejs now vs code has created a template debug configuration for us and so we can debug our typescript we just need to make a couple of changes first we'll just change the name of the configuration to debug typescript now if we look at our program property this is the entry point into our application in this case the main.cs file if you're working with a nest project it's also main.ts but it could of course be app.ts or index.ts if vs code doesn't detect this for you you can simply add your path in here using the workspace folder placeholder as shown so you don't have to put an absolute path in now underneath program we're just going to add an extra property and this is going to be a runtime args and these are the arguments of the past our node runtime when the application is started up so we're going to add dash r for require and then we're going to add ts dash node four slash register and then dash r again for require and then ts config dash paths for slash register and that's pretty much it that's all we need to debug our typescript but i will just add another property which is console and set that to integrated terminal so that our debug information is printed out into the terminal and not the debug console so we'll save that now we're back in our source code let's stick a break point in on agree to greet in our main.ts and inside our greet method on the greater class and we can simply start debugging either by going to run start debugging or we could go to our debug panel and click the play icon or we could just simply press f5 so we'll just click run and then start debugging our debugger will start up and notice we've hit our breakpoint we can play through and hit our breakpoint in our great method and notice in our debug panel we've got all the information about our application state well i hope you enjoyed that tip it's something i find very useful when building my nest framework projects let us know in the comments below if you've got any questions about this or suggestions for future quick tips like this thank you so much for watching happy coding and we'll see you in the next video you

Channel: Roberts Dev Talk

Views: 31,708

Keywords: typescript, visual studio code, vs code, vs code debugging, debugging typescript in visual studio code, debugging typescript in vs code, web developer, nestjs debug vscode, debugging, vscode tips and tricks, typescript debugging, debug typescript, debug typescript visual studio code, debug typescript vscode, node js debugging vscode, Developer, Developers, Nextjs, Nodejs

Id: f3i9b3uK00U

Length: 4min 6sec (246 seconds)

Published: Thu Apr 22 2021