Even if you are developing only a small application or have little experience with TypeScript altogether, debugging with VS Code will be inevitable. Not to mention larger projects. In this article I’ll show you how to setup your development environment with VS Code to debug your code.
Create new project
At first we create a small TypeScript project. Please make sure that you have VS Code and Node.js pre-installed on your computer. You can also skip the next steps and simply clone this Github repository.
Create source files
Create a new project folder called “vscode-typescript-debugging”. After that create a “src” folder and add an “app.ts” file with the following content:
Add another file called “hello.ts” to the “src” folder:
That’s the whole code! This is sufficient for this tutorial. We don’t make things more complicated than absolutely necessary.
These are very basic options for the TypeScript compiler. If you need more information about the compiler options, then take a short look into the official handbook. It is important to set the
Note: If you have installed TypeScript globally with the command
npm i -g typescriptyou can call the compiler in your terminal by just typing
tsc. It compiles the TypeScript code according to the options in “tsconfig.json” and outputs the compiled JS-files into the “out” folder.
What we also need is the well-known “package.json” file. Simply run the following commands in your terminal to create it and to add the required dependencies:
npm init --yes
npm install typescript --save-dev
Next we add the required scripts to the “package.json” file, which finally looks similar to this:
Short explanation of the scripts:
start — run the compiled app with node
prestart — is called automatically before the start script
build — runs the TypeScript compiler
Run the app
Open your terminal and run the following command:
Create a “.vscode” folder in the project directory and add a file called “launch.json” with the following configurations:
Short explanation of the most relevant configs:
program — entry file of our app
preLaunchTask — calls the “build” script of package.json
sourceMaps — use the sourcemaps from the “out” folder
smartStep — skip “uninteresting” code in the debugger (e.g. compiled JS-files)
internalConsoleOptions — open the debug console during a debugging session
outFiles — place where the debugger looks for the sourceMap files
Now you can open the debug view (Ctrl-Shift-D) of VS Code. By clicking to the left of a line number you can add a new breakpoint. Press the green debug button with the selected launch configuration (“Build project”) or simply press the F5-key on your keyboard to start debugging.
Assuming you have a for-loop and do not want to break execution at each iteration, you can add conditional breakpoints. Here you can decide between an “Expression” or “Hit Count” condition.
Expression: If the expression is true, the breakpoint stops execution.
Hit Count: Number of hits until the breakpoint stops exection.
More information can be found in the VS Code documentation.
VS Code offers a very comfortable development environment for TypeScript, no matter how big the project itself is. Using the built-in debugger is much more useful and time-saving than using the well-known “console.log” for this purpose.
Hopefully you enjoyed this article. You can find the link to the related source code of the demo project below.