Choose that option so it starts running in the terminal and watching for changes. For a TypeScript project it will show you “tsc: build - tsconfig.json”, which will be a task based on the tsconfig.json file you have on your project.
Debug node js visual studio code code#
If you press Ctrl + Shift + B now and you have no tasks configured, Visual Studio Code will run some detections and give you suggestions. Configuring a transpilation task for TypeScript Play (F5) will go to the next breakpoint, step into (F11) will go to the next line, and step out (Shift + F11) will exit a method or loop and go to the next instruction if you need. This way you are able to debug only the parts you want and get to the breakpoints you configured faster.Īs you can see in the top, we have the debugger controls. Here only two of the tests will be executed. If you want to execute only the tests you want to debug, then change the “it” inside the tests file to it.only. In the bottom left corner you can see the breakpoints that you configured. The breakpoints can be set in the TypeScript file, but if that doesn’t work, you can set them in the JavaScript file you want inside the bin directory and the sourcemaps will be used to show the TypeScript code instead of the JavaScript one when the debugger runs. It shows all the properties of a json object, for example, if you hover it with the mouse pointer. When you run the tests and at least one of the tests access this part of the code, the debugger will stop there and show the current state of the variable(s) in the line where you put the breakpoint. This is the result of the tests running inside Visual Studio Code using Mocha:īefore running the debugger, you can also set a breakpoint in the code by clicking on the line you want, before the line number. If there’s no bin directory yet with the transpiled TypeScript, then you’ll have to run gulp before to create it and run the gulp tasks. When you click on the play button it will start running the tests inside the bin/test directory, if you followed the configuration I created on my previous post about testing with Mocha. Ps: If this directory is not there, then open the Debug view inside Visual Studio Code (Ctrl + Shift + D) so the option to create it will be presented to you.Īfter saving this file with the Mocha options, when you go to the Debug view, you’ll see “Run mocha” as one of the options for running the debugger. Open the launch.json file inside of it and add the Mocha settings: 1 Inside the project you opened in Visual Studio Code, there’s a directory called. Configuring a new launch for debugging our Node.js system
This post is based on the configuration we did in the previous post, which was about testing with Mocha. A task can be configured to transpile our TypeScript files to JavaScript automatically, as soon as we change them. You see your compile task executing, and once it’s finished you are right in the debug session.Visual Studio Code comes with settings to launch node or mocha executables in order to debug our systems, and also with tasks. src/index.ts" ,Īnd with that, you are all set up. The folder structure is easy: I have my TypeScript files in src, my output in bin. I use a pretty late ES target (having Node an all), and I use commonjs as module format to work nicely with Node.js.
My TypeScript configuration tsconfig.json is pretty standard. So I switched to a mode where I compile TypeScript first, then run debugging on the generated JavaScript files with source maps. But at some point I was stuck and didn’t manage to debug my whole application. I tried to make ts-node work for this setup, and made good progress. Things might be different if you are using other versions.
I’m using Node 9.8, VS Code 1.21 and TypeScript 2.7. Since it took me a while and it requires some steps, I thought I better share that with you. That’s where the magic is supposed to be, isn’t it? So I decided to get started with the complete setup. Or I wrote my Node.js apps in TypeScript using tsc or ts-node. I developed Node apps and used the great debugging possibilities with VS Code. Debugging said apps in Visual Studio Code.When developing, there’s three things that I absolutely enjoy:
0 kommentar(er)
