Exploring VSCode Debugger with Typescript: Traversing through Step Over/Into leads to JavaScript file路径

Just starting out with VSCode and using it to debug node.js code written in Typescript. One thing that's been bothering me is that when I stop at a breakpoint and try to "Step Over" or "Step Into", the debugger takes me to the compiled Javascript file instead of the actual Typescript file.

Does anyone know how I can make sure the debugger only goes to Typescript files when using "Step into" / "Step over"?

Here's a glimpse of my settings.json file: 

{
            "type": "node2",
            "request": "launch",
            "name": "Launch TS Program",
            "program": "${workspaceFolder}\\app.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}\\**\\*.js"
            ],
            "smartStep": true,
            "outputCapture": "std",
            "console": "internalConsole",
        },
typescriptvisual-studio-code

Answer №1

To enhance your coding experience, consider enabling the smartStep option in your launch configuration file (launch.json).

If you want to learn more about how this feature works, visit the documentation here.

By setting the smartStep attribute to true in your launch setup, VS Code will intelligently skip over 'uninteresting code' during debugging sessions. This includes generated code that lacks proper source map coverage and does not directly correlate back to the original source.

Answer №2

I encountered a similar problem and was able to resolve it by making a specific adjustment in my tsconfig.json file. After doing so, I removed the directory specified by outDir within the tsconfig.json.

{
  ...
 "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
  ...
}

Following these steps, the issue was resolved and stepping operations functioned correctly during the next debug build.

Answer №3

Revised

Perhaps consider toggling the Enable Source Mapped Stepping option in the debugger settings.

  • @command:extension.js-debug.enableSourceMapStepping

    @command:extension.js-debug.disableSourceMapStepping

https://i.sstatic.net/1205f.png

https://i.sstatic.net/FpZ64.png

Prior response & may not be accurate anymore

(Possibly outdated, but this solution worked for me, though I'm unsure why)

You could try opening only the specific project (/ folder) in a new workspace -- without any other projects or folders, just focusing on this particular one.

Then proceed to execute the code.

  • In my case, after running the code, the debugger immediately switches to the compiled ts file (yes, it's a ts file and not js, although I'm not sure why).

    • (I am using tsx to execute the ts code.)

  • This behavior might be related to vscode trying to search from the default root project directory -- which could lead to confusion if multiple projects are open in your workspace.

  • (Everything seemed fine previously, until now.)

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

incomplete constructor for a generic class

I have multiple classes that I would like to initialize using the following syntax: class A { b: number = 1 constructor(initializer?: Partial<A>) { Object.assign(this, initializer) } } new A({b: 2}) It seems to me that this ini ...

typescriptobject-initializers

Angular AutoComplete feature does not accurately filter the list items

I need to implement an auto-complete feature for the county field due to a large number of items in the list causing inconvenience to users who have to scroll extensively. Currently, there are two issues with the code. The first problem is that although t ...

javascriptangulartypescript

Oops! It seems like there has been an issue. The EnjoyHint is not

Encountered the following error message: https://i.stack.imgur.com/JL4l6.png The error in my code is within the line that initializes a new EnjoyHint object. Seeking assistance to resolve this issue. public initiate(stepName) { const steps = ...

angulartypescriptenjoyhint

Utilize an external JavaScript function within a React and TypeScript document

I have encountered an issue in my React/Next.js/TypeScript file where I am trying to load the YouTube iframe API in my useEffect hook. Here is the code snippet: useEffect(() => { const tag = document.createElement('script'); tag.src = ...

reactjstypescriptnext.js

Starting object arrays in Angular 6 using ES6

As someone who is just starting out with javascript, I have encountered a challenge with a nested class structure. Specifically, I am looking to initialize an array of EventDate objects and assign it to 'this.dates' within the CustomerEvents cons ...

javascriptangulartypescriptclasses6-class

Strategies for transferring data from index.html to component.ts in Angular 4

Greetings, as a newcomer to Angular, I am seeking advice on how to link my Index.html file to component.ts. Please review the code snippet below where I have created a function called scannerOutput in my Angular index.html file which is functioning properl ...

javascripthtmlangulartypescript

NEXT JS 13 experiencing an infinite loop when using State, encountering an error with Params, and facing issues with hook definition

Currently, I am in the process of developing a shopping cart using NEXT JS and encountering several issues within my code. To begin with, I have established a route [product]/[productitems] within the apps folder. In the page.tsx file of [productitems], I ...

reactjstypescriptnext.jssanitynext.js13

Adjust the size and color of text in Chart.js using Angular 5

Why does the font color in chartjs appear as light gray and not print when you want to do so from the page? I tried changing the font color of chartjs in the options attribute, but it didn't work. How can I change the font color in chartjs angular? ...

cssangulartypescriptchart.js

Creating a dedicated class or module specifically designed for handling import and export tasks is a highly efficient approach towards stream

Exploring different ways to import multiple classes into a single class file: import myClass1 'pathto1'; import myClass2 'pathto2'; import myClassn 'pathton'; Seeking a simpler method using one file (class export) with al ...

typescript

Guide to retrieving specific information from a JSON file in an Angular application

Struggling with handling this JSON file [ [ { "category": "Bags", "productData": [ { "id": 1000, "name": "Tro ...

jsonangulartypescript

Need for utilizing a decorator when implementing an interface

I am interested in implementing a rule that mandates certain members of a typescript interface to have decorators in their implementation. Below is an example of the interface I have: export interface InjectComponentDef<TComponent> { // TODO: How ...

typescriptinterfacedecorator

Angular 5: How to Calculate the Sum of Two Numbers and Handle NaN Output

I have encountered an issue where I am trying to multiply two numbers and add another number, but the output is displaying as NaN. How can I troubleshoot and solve this problem? Below is the code snippet: medicines = [new Medicine()]; this.sum = 0;// su ...

angulartypescript

Troubleshooting Angular modal fade not functioning

I am facing an issue while trying to display a component called "Login", which belongs to the class "modal fade", from another component named "navbar". Despite my attempts to trigger it by calling data-bs-toggle="modal" data-bs-target="#LoginModal" from t ...

htmlangulartypescript

Error: Unable to access the 'next' property of null within an Angular 2 Observable

Issue Found An error of type TypeError has occurred: Cannot read property 'next' of null Problematic Template Utilizing Observer.next import { NavService } from '../../providers/services/nav-service/nav-service'; @Component({ ...

typescriptangularionic2

Ways to retrieve data from an Observable and save it in an Array categorized by a specific identifier

The data I have is structured as follows: Location: lat: 43.252967 lng: 5.379856 __proto__: Object customerId: "5cd430c65304a21b9464a21a" id: "5d5a99c62a245117794f1276" siteId: "5d0ce7c4a06b07213a87a758" __proto__: Object 1: Location: {lat: 43.249466, lng ...

angulartypescriptgoogle-mapsrxjs

Angular 9 ensures that the component template is validated and loaded before the constructor logic is executed

Recently switched from Angular 8 to Angular 9 (without IVY) and encountered some unusual errors indicating that services injected in components are undefined in getters. Upon investigation, I discovered that the getter is being called before the constructo ...

angulartypescriptdependency-injectiongetter

Locating and casting array elements correctly with union types and generics: a guide

My type declarations are as follows: types.ts: type ItemKind = 'A' | 'B'; type ValidItem<TItemKind extends ItemKind = ItemKind> = { readonly type: TItemKind; readonly id: number; }; type EmptyItem<TItemKind extends ...

typescripttype-conversionunion-typestypeguards

Dealing with Errors in Angular 5 using Observables: Why Observable.throw isn't working

Can someone assist with resolving this issue? Error message: core.js:1542 ERROR TypeError: rxjs__WEBPACK_IMPORTED_MODULE_3__.Observable.throw is not a function Software versions: Angular CLI: 6.0.8 / rxjs 6.2.1 import { Injectable } from '@angular/ ...

angulartypescriptrxjs

What is the process for switching the tile layer from OpenStreetMap to Stamen?

Exploring the possibilities of using Stamen maps with ngx-leaflet has piqued my interest. For those interested, more information on integrating leaftlet can be found here. However, the process of integrating it with ngx-leaflet remains a bit unclear to m ...

angulartypescriptleafletngx-leafletstamen-maps

Ways to inform websocket client of authentication failure

Utilizing the (ws package) in Node.js to handle websockets, I leverage the "on upgrade" event to authenticate incoming clients based on a token provided as a URL parameter. Following the guide here, if the token is invalid/missing/expired, I utilize the fo ...

node.jstypescriptauthenticationwebsocket