Having trouble utilizing the Visual Studio Code debugger in an Express.js project that uses TypeScript

My package.json file is shown below:

`

{
  "name": "crm-backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "concurrently \"yarn tsc --watch\" \"yarn tsc-alias --watch\" \"nodemon -q dist/index.js\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "mongoose": "^6.7.5"
  },
  "devDependencies": {
    "@types/express": "^4.17.14",
    "@types/mongoose": "^5.11.97",
    "@types/node": "^18.11.10",
    "concurrently": "^7.6.0",
    "nodemon": "^2.0.20",
    "tsc-alias": "^1.8.1",
    "typescript": "^4.9.3"
  }
}

`

I have experimented with different options in the launch.json file:

`

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach",
      "port": 1234,
      "request": "attach",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "node"
    },
    {
      "name": "Launch Chrome with Debugger",
      "port": 7999,
      "request": "launch",
      "type": "chrome",
      "webRoot": "${workspaceFolder}/static",
    },
    {
      "name": "Nodemon: Attach Express.js + TypeScript 2",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "protocol": "inspector",
      "cwd": "${workspaceFolder}/backend"
    }
  ]
}

`

Only the "Nodemon: Attach Express.js + TypeScript" configuration was functioning correctly (to make it work I had to include "--inspect-brk=0.0.0.0:9229" in the package.json after nodemon), but it was only capturing breakpoints in the compiled "js" files and not the source "ts" files.

Answer №1

If you want to enable source mapping in your typescript project for debugging, simply include this configuration in your tsconfig file:

"compilerOptions": {
    "sourceMap": true
}

Remember to disable source mapping when building your production bundle by creating a separate tsconfig.prod file, as source maps can increase the size of your final bundle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on Configuring the Attributes of a TypeScript Object in Angular 2

A TypeScript class called Atom is defined as follows: export class Atom { public text: String; public image: boolean; public equation: boolean; } To create an object of type Atom class and set its properties, the following steps are used: atom: ...

Is there a way to tally up the overall count of digits in a number using TypeScript?

Creating a number variable named temp in TypeScript: temp: number = 0.123; Is there a way to determine the total count of digits in a number (in this case, it's 3)? ...

When the next() function of bcrypt.hash() is called, it does not activate the save method in mongoose

Attempting to hash a password using the .pre() hook: import * as bcrypt from 'bcrypt'; // "bcrypt": "^1.0.2" (<any>mongoose).Promise = require('bluebird'); const user_schema = new Schema({ email: { type: String, required: tru ...

Avoid saving sessions in Node.js using Express.js and Mongoose

I've recently embarked on learning node.js and have set up a Phonegap project. However, I'm facing an issue where req.session is coming up as undefined in my code: app.js const express = require('express'), routes = require('./rou ...

Why do selected items in Ionic 3 ion-option not get deselected even after reloading or reinitializing the array

HTML File: <ion-item class="inputpsection" *ngIf="showDeptsec"> <ion-label floating class="fontsize12">Department</ion-label> <ion-select (ionChange)="showDepartmentChosen($event)" multiple="true" formControlName=" ...

Exploring the Google Drive API with Node

Currently, I am utilizing the Google Drive API in NodeJS. Below is the snippet of code I am using to download a file: try { const auth = await authenticate(); const drive = google.drive({ version: 'v3', auth }); drive.files.get( ...

How can I stop the SvelteKit production node server from filling up the logs with "Error: not found /path/here"?

After developing a website using sveltekit, I decided to build it for production as a nodejs server and deploy it on my linux server with Caddy as a reverse proxy. Unexpectedly, upon starting the server, I began receiving error messages in the log such as ...

An error was encountered in compiler.js at line 1021, stating that an unexpected value 'UserService' was imported by the module 'UserModule'. It is recommended to add a @NgModule annotation to resolve this issue

As a PHP programmer new to Angular, I am facing an issue while trying to retrieve user properties from a Laravel API. When attempting this, I encountered the following error: compiler.js:1021 Uncaught Error: Unexpected value 'UserService' importe ...

Can you explain the distinction between certain assignment assertion and ambient declaration?

When declaring that a field is definitely initialized within a class, what distinguishes the ! (exclamation point, definite assignment assertion) from the declare modifier? The subsequent code triggers an error in strict mode as TypeScript cannot confirm ...

Utilizing EJS to display dynamic data from a JSON file in a visually appealing D

*Excited about learning express! Currently, I have two files - index.ejs and script.js. The script I've written successfully fetches JSON data from an api. const fetch = require("node-fetch"); const url = '...' fetch (url) .then(resp ...

What is the process for linking a SQL server to the app.js file?

I currently have a directory named NEsql, which is located within another folder named sqlnames1. Inside the NEsql folder are the following individual files. sqlcreatedb.js var mysql = require('mysql'); var con = mysql.createConnection({ hos ...

The value returned by elementRef.current?.clientHeight is not the correct height of the element

I've encountered a peculiar issue with my code where the reported height of an element does not match its actual size. The element is supposed to be 1465px tall, but it's showing up as 870px. I suspect that this discrepancy might be due to paddin ...

Enforce directory organization and file naming conventions within a git repository by leveraging eslint

How can I enforce a specific naming structure for folders and subfolders? I not only want to control the styling of the names (kebab, camel), but also the actual names of the folders and files themselves. For example, consider the following paths: ./src/ ...

Sending Images to a Node.js Express Server Using Swift

Currently, I am working on developing an application that involves sending images from an iOS device to my expressjs server using the multer middleware. While I have successfully set up the server side of things, it seems like there may be an issue with th ...

Working with type-agnostic values in a type-agnostic list within a type-agnostic class using Typescript

I'm currently attempting to add a generic object to a list of other generic objects within a generic class. There seems to be an issue with the semantics, but I can't pinpoint exactly what the problem is. type EventCallback<I, O> = (event ...

What is the best way to integrate ag-grid with Observable in Angular 2?

After conducting extensive research on the Internet, I am still struggling to connect the pieces. My angular2 application utilizes an Observable data source from HTTP and I am attempting to integrate ag-grid. However, all I see is a loading screen instead ...

What is the best way to display data retrieved through an HTTP service using ngFor?

I was attempting to inject a service (contact.service.ts) into a component (contact-list.component). The service contains data on employees defined in contacts.ts. While I was able to successfully receive the data, I encountered difficulty in rendering it ...

Retrieve the value of a local variable in the ngOnInit function from a different function

Recently, I've started working with Angular and TypeScript. I am facing an issue where I need to access a local variable that is declared in the ngOnInit function from outside it, but I'm not quite sure how to achieve this correctly. This variabl ...

The Ajax query returned a successful response, yet it unexpectedly triggered an error

Currently, I am delving into the realm of mongodb. I have integrated Express, Body-Parser, and Mongoose into my project, and I'm retrieving data from an online mongodb database hosted on mlab. Everything seems to be functioning smoothly as I've t ...

When iPhone images are uploaded, they may appear sideways due to the embedded exif data

When trying to upload images from a mobile device like an iPhone, it's common for the images to appear sideways unless viewed directly in Chrome. It seems that this issue is related to the image exif orientation data, which Chrome can ignore but othe ...