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.

typescriptexpressdebuggingvscode-debuggernodemon

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

What should I do when using _.extend() in express - override or add in fields?

When an object is extended by another object with values set for some of the extended fields, will it be rewritten or will the new values be added? For example: const PATCH_REQUEST_SCHEMA = { 'type': 'object', 'title' ...

javascriptnode.jsexpress

A TypeScript Class that Refers to Itself

I need help with representing a JSON object in an Angular2 typescript class. The JSON object contains an array of objects of its own type. Here is what the JSON object looks like: { "data": { "id": 5, "type": "taxons", "attributes": { ...

angularjstypescriptangularself-reference

What is the best way to create a custom hook that updates in response to changes in state?

My situation involves a custom hook that handles a specific state variable. After making changes to the state, it doesn't update right away. To solve this issue, I need to subscribe to it using useEffect. The challenge is that I can't directly ...

javascriptreactjstypescript

If the status is 400, Xhr does not log the response

I have implemented a basic login route in express: //login router.post('/login',async (req,res) => { try{ const user = await User.findOne({username: req.body.username}); console.log(user); if (!user) { ...

node.jsreactjsexpressaxiosxmlhttprequest

Is it possible to bind parameters in the select clause using TypeORM?

I'm currently working on implementing a search feature using the pg_trgm module in my PostgreSQL project built with TypeScript and TypeOrm. My SQL query that works for me looks like this: SELECT t, similarity(t, 'word') AS sml FROM test_t ...

postgresqltypescripttypeorm

Using TypeScript's `extend` keyword triggers an ESLint error when attempting to extend a generic type

I am dealing with numerous models that include additional meta data, which led me to create a generic type for appending them to the models when necessary: type WithMeta<T> = T extends Meta; However, I encountered an error stating: Parsing error: &a ...

typescripteslint

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Why does obj[i] become undefined inside the .then() function? obj = [{'id': 1, 'name': 'john', 'age': '22', 'group': 'grA'}, {'id': 2, 'name': 'mike', &apo ...

javascriptangulartypescriptangular6

Is there an alternative method to invoke the function aside from setTimeOut()?

if(i==1){ this.resetScreens(); this.editJobScreen1 = true; if(this.selectedLocations.length > 0){ this.locationService.getLocationByInput({ maxResultCount:16, skipCount: 0 }).subscribe((ele)=>{ ...

angulartypescriptsvg

Encountering a 500 error while trying to access a different file using the .get()

My current project involves setting up basic Express routing. However, every time I try to fetch data in order to link to a new page on my website, I encounter a 500 error. The main file managing the routing is Index.js. The content of Index.js: var expr ...

javascriptnode.jsexpresshandlebars.js

Guide to effectively showcasing information stored in a MongoDB database on the frontend using Express.js even if you are unaware of the field

Is there a way to showcase information retrieved from mongodb on the frontend using express js even if the field names are unknown? ...

node.jsmongodbexpressmongoose

Error encountered in Typescript when attempting to invoke axios - the call lacks a suitable overload

When I make a call to axios, I include a config object like this: const req = { method, url, timeout: 300000, headers: { 'Content-Type': 'application/json' } } axios(req) An error in TypeScript is thrown stating that "No overload matc ...

javascripttypescriptaxios

The compiler is showing an error with code TS5023, indicating that the option 'strictTemplates' is not recognized

When trying to compile my Angular application (v10), I encountered the following error message. An unexpected issue has occurred: tsconfig.json:14:5 - error TS5023: Unknown compiler option 'strictTemplates'. 14 "strictTemplates": t ...

angulartypescriptivytsconfig

Transforming a JavaScript chained setter into TypeScript

I have been utilizing this idiom in JavaScript to facilitate the creation of chained setters. function bar() { let p = 0; function f() { } f.prop = function(d) { return !arguments.length ? p : (p = d, f); } return f; } ...

javascripttypescriptidioms

Incorporate any enum value into a Typescript interface

I'm working with a Typescript interface export interface MyInterface { valid: boolean; resourceType: MyEnum; message: string; } As well as an enum enum MyEnum { 'a', 'b', 'c' } Is there a way to allow the ...

typescript

Having difficulty ensuring DayJs is accessible for all Cypress tests

Currently embarking on a new Cypress project, I find myself dealing with an application heavily focused on calendars, requiring frequent manipulations of dates. I'm facing an issue where I need to make DayJs globally available throughout the entire p ...

javascripttypescriptcypressdayjs

Identifying misspelled names in shared resources textures during PIXI.js loading

Our game utilizes TypeScript, Pixi.js, VSCode, and ESLint. We maintain a dictionary of image files as follows: export function getAllImages(): {name: string, extension: string}[] { return [ {name: 'tile_lumber', extension: '.svg ...

typescriptvisual-studio-codepixi.js

Typedoc: only export contents from a particular file are documented

Currently, I am working on developing two npm packages: https://github.com/euberdeveloper/mongo-scanner https://github.com/euberdeveloper/mongo-cleaner My goal is to create documentation for these packages using Typedoc. The main file is index.js p ...

node.jstypescriptnpmtypedoc

Analysis of cumulative revenue using Palantir Foundry Function

I am in need of creating a function that can transform raw data into target data. The raw data consists of a table with columns for customer, product, and revenue, while the target data includes customer, revenue, and cumulative revenue. customer produ ...

typescriptpalantir-foundry

What is the best way to incorporate an automatic scroll to the following section on a single page website

My goal is to implement a feature that enables automatic scrolling between sections as the user scrolls up or down. The smooth transition should occur when the user reaches halfway through each section, seamlessly moving to the next screen on the same page ...

reactjstypescriptnext.jstailwind-css

Is it necessary to use Generics in order for a TypeScript `extends` conditional type statement to function properly?

Looking to improve my understanding of the extends keyword in TypeScript and its various uses. I recently discovered two built-in utilities, Extract and Exclude, which utilize both extends and Conditional Typing. /** * Exclude from T those types that are ...

typescriptgenericstypesconditional-types