Exploring Typescript Breakpoints in Visual Studio Code

While using Visual Studio Code, I have encountered an issue where breakpoints set in my .ts file are not being hit (and do not turn red during debugging).

Interestingly, if I set a breakpoint in the compiled JS file, it then redirects me to the ts file as I navigate through the code. This action somehow triggers any previously unresponsive breakpoints in my .ts file.

Is there a way to ensure that breakpoints in .ts files work seamlessly without the need to first set one in the compiled .js file?

It is worth mentioning that I came across a similar inquiry in this question: Setting breakpoints in Typescript Jasmine tests with Visual Studio Code. Although the solution mentioned upgrading to VS Code 0.10.9 and Typescript 1.8.2, I am currently running on VS Code 1.8.1 and Typescript 2.1.4.

debuggingtypescriptvisual-studio-codebreakpointssource-maps

Answer №1

To pinpoint the necessary changes specific to your configuration, it's important to assess your setup firsthand. However, here are some recommendations for you along with a demo project for reference. For further insights, check out the ongoing discussion on this GitHub issue. Below is a streamlined TypeScript project structure that has proven effective on my end.

.vscode/launch.json Customize the properties program, prelaunchTask, outFiles, and sourceMaps

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/index.ts",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": "tsc",
            "outFiles": [
                "${workspaceRoot}/**/*.js"
            ],
            "sourceMaps": true
        }
    ]
}

.vscode/settings.json Configure Visual Studio Code to leverage the locally installed TypeScript version within our node_modules directory instead of relying on the global installation.

{
    "typescript.tsdk": "./node_modules/typescript/lib"
}

.vscode/tasks.json Specify the shell command tsc -p . as the prelaunchTask identified in launch.json.

{
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."]
}

index.ts

console.log('foo');
console.log('bar'); // a breakpoint here gets hit.

package.json Locally install TypeScript to have greater control over the version being utilized.

{
  "devDependencies": {
    "typescript": "^2.1.4"
  }
}

tsconfig.json Instruct the compiler to produce source maps.

{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    }
}

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

The current breakpoint is inactive because symbols have not been loaded for this asp.net service during debugging

As I work on developing an ASP.NET website integrated with a WCF service for client applications, I encountered an issue with debugging. When setting a breakpoint at the beginning of the service's operation function, the message in the title appears, ...

asp.netwcfbreakpoints

Ways to retrieve "this" while utilizing a service for handling HTTP response errors

I have a basic notification system in place: @Injectable({ providedIn: 'root', }) export class NotificationService { constructor(private snackBar: MatSnackBar) {} public showNotification(message: string, style: string = 'success' ...

javascriptangulartypescript

Removing an Extension that Relies on a Different Extension in Visual Studio Code

Can someone help me with the process of removing an extension in VSCode that another extension relies on? I am unsure how to do this. P.S. The extension I want to uninstall is listed under the extensionDependancies section of package.json. ...

visual-studio-codenpmpackagepackage.jsonuninstallation

Exploring the implementation of float type in TypeScript

Is it possible to use Number, or is there a more type-specific alternative? In the past, I have relied on Number and it has proven effective for me. For example, when defining a variable like percent:Number = 1.01... ...

javascriptreactjstypescript

Naming convention for TypeScript accessors

Expanding on the previous solution When I convert the example object to JSON from the answer above: JSON.stringify(obj) The output is: {"_id":"3457"} If I intend to transmit this data over a service and store it in a database, I prefer not to use the ...

typescriptnaming-conventions

Exploring the features of Typescript involving async/await, Promise, and the use of function

I am currently working on a nodeJS-Express-Typescript project where I need to implement native promises with async/await and also provide default values for functions. Here is a simple example of what I am trying to achieve: sleep(ms: number) { return ...

node.jstypescript

When transitioning from component to page, the HTTP request fails to execute

I have created a dashboard with a component called userInfo on the homepage. This component maps through all users and displays their information. Each user has a display button next to them, which leads to the userDisplay page where the selected user&apos ...

javascriptreactjstypescriptredux

Prevent reserved words from being included in a string in Typescript

Is there a way to define an interface that prevents assigning the string 'options' to the configNames field, but still allows other strings? I've tried a couple of approaches without success: // First attempt interface Options<T = string& ...

typescript

Error encountered while attempting to assign a value to a two-dimensional List: UnsupportedOperationException

Upon execution of the code below, an Exception occurs with the message: Exception in thread "LWJGL Application" java.lang.UnsupportedOperationException // Initializing the main List for this scenario List<List<Integer>> grid = new ArrayList< ...

javalistdebuggingexception

Utilizing TypeScript namespaced classes as external modules in Node.js: A step-by-step guide

My current dilemma involves using namespaced TypeScript classes as external modules in Node.js. Many suggest that it simply can't be done and advise against using namespaces altogether. However, our extensive codebase is structured using namespaces, ...

javascriptnode.jstypescriptnamespacestypescript1.6

How can I identify the specific line that is triggering the exception?

Being a beginner in XCode and Objective C, I purposely made an error by assigning a number to NSString*. NSString* s = @1; [s uppercaseString]; Even though XCode issues a warning, the code compiles successfully. However, during runtime, I encounter an e ...

iosobjective-cxcodedebugginglldb

Combining Vitest with FastifyAutoload resulted in a FastifyError: The plugin provided must either be a function or a promise, but instead, an 'object' was received

My application built on Fastify ("fastify": "^4.26.0") operates smoothly under normal conditions with no issues. However, when trying to incorporate unit testing using Vitest, every test fails despite their simplicity. Upon troubleshoot ...

typescriptunit-testingfastifyvitest

What is the method for specifying a null value in Typescript?

I'm curious if this code snippet is accurate, or if there's a better way to define it. Is there an alternative to using error!? I'm unsure of its meaning and would appreciate clarification. ...

javascripttypescript

Disabling the experimental app directory feature in NextJs

I've been working on a real-life project and decided to test out the new App directory feature that comes with Next.js version 13. However, I encountered some issues such as images and fonts not loading properly. Now, I'm looking to opt out of th ...

javascripttypescriptnext.js

Facing issues with Typescript imports for validatorjs?

Utilizing TypeScript with validator JS and encountering dependency issues: "dependencies": { "@types/validator": "^12.0.1", "validator": "^12.2.0" } Attempting to import isDividibleBy yields an error: import { isDivisibleBy } from "validato ...

javascriptnode.jstypescripttypes

Issue with navigating history back in Angular 7 using an iframe

I'm currently working on a single-page application using Angular. I encountered an issue where, when the user presses the browser's back button, only the YouTube iframe content updates and not the entire page. This results in having to press the ...

angulartypescript

Angular 5 - Implementing "similar to %" Filter (similar to SQL)

I have created a method in my code to filter an array based on a specific type. filterByType(type: string) { console.log("Filtering by type"); this.filteredArray = null; this.filteredArray = this.mainArray.filter((item: Item) => item.type === type); t ...

sqlangulartypescriptfilter

Ensuring typescript req.user in Passport JS is always defined: Best practices

When utilizing Passport JS, the req.user within the route is considered potentially undefined. However, the middleware prior to my route method ensures that this scenario does not occur. How can I convey this information to TypeScript? Object may be &apos ...

javascriptnode.jstypescriptexpresspassport.js

What is the method for sending value from a hook to the text rotate parameter?

How can I change the rotateValue from useEffect to rotate text? Thank you for your help. var rotateValue = 0 React.useEffect(() => { const tickWidth = refText.current.getBBox().width; rotateValue = optimalTextWidth > tickWidth ? 0 : ...

reactjstypescript

Guide on mocking a function inside another function imported from a module with TypeScript and Jest

I have a function inside the action directory that I want to test: import { Action, ActionProgress, ActionStatus, MagicLinkProgress } from '../../interfaces' import { areSameActions } from '../actionsProgress' export const findActionPr ...

javascripttypescriptjestjsmocking