Debugging TypeScript files that are not related to each other

In this post I will briefly describe how to properly configure the debugger for VSCode so that you can debug the code right in the editor without using Webpack and sourcemaps.

There are many guides on the Internet how to debug index.ts importing modules into it and I completely agree that this method should be used when we create a web application, however, when it comes to debugging independent files (for example, tasks from leetcode) we need to debug the files separately without importing them into the main file.

We start with initialization

First, we need to initialize a new project, for this we write in the terminal:

npm init

Next, we choose a name for our project, write its version and answer all npm questions

For those who did not know: you can quickly initialize the project using the following command:

npm init -y

At the output you will have a file package.json, which will describe the dependencies of the project, as well as the project itself as a whole:

{
  "name": "typescript-debug",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Downloading the required packages

Next, we need to enter the following command:

npm i -D typescript ts-node tsconfig-paths
  • typescript – the TypeScript compiler

  • ts-node – a module for TypeScript support right in Node.js

  • tsconfig-paths – the module that is responsible for connecting tsconfig.json

We also need a file to configure the TypeScript compiler, it is called tsconfig.json and should look like this:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true,
    "baseUrl": "."
  }
}
  • target – what standard should the code be brought to?

  • module – sets which system of modules to use. More details here

  • outDir – the directory into which the code will be compiled

  • sourceMap – this parameter is responsible for source maps (we can debug the .js file by looking at the .ts file)

  • baseUrl – from which directory should you search for modules, in our case this is the root directory

Generating the launch.json file

This file is needed by VSCode so that it understands what and in what sequence it needs to be launched, as well as what tasks need to be performed before launching the file.

The file is stored in the directory .vscode and called launch.json

This file should look like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript",
      "type": "pwa-node",
      "request": "launch",
      "runtimeArgs": [
        "-r",
        "ts-node/register",
        "-r",
        "tsconfig-paths/register"
      ],
      "program": "${file}",
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/**/*.js", "!**/node_modules/**"]
    }
  ]
}

In this config, we describe what we want to test the open file, and also tell Node (namely, on it we will debug our code) to enable TypeScript support using the module ts-nodeand also connected our configuration.

Checking the result

Already at this stage, we can make sure that we can already debug our code:

If you were interested, you can go to my blog on telegram, there is a lot of information on web development and Linux.

Thank you for reading this guide, successfully writing code without bugs, I hope you don’t have to debug often;)

Similar Posts

Leave a Reply